50% off godday web hosting :
domain search
Go Daddy Deal of the Week: 30% off your order at GoDaddy.com! Offer expires 11/6/12
domain search
Creating a Rollover Image in Dreamweaver
In Dreamweaver, Rollover images — as the name implies — are designed to react when someone rolls a cursor over an image. The effect can be as dramatic as a picture of a dog being replaced by a picture of a lion, or as subtle as the color of a word changing as one image replaces another. Either way, Dreamweaver includes a special dialog box for rollovers that makes creating a simple rollover effect one of the easiest behaviors to apply.
To create a rollover image by using Dreamweaver's Insert Image Rollover dialog box, follow these steps:
1. Click to place your cursor on the page where you want the rollover to appear.
Rollover effects require at least two images: one for the initial state and one for the rollover state. You can use two different images or two similar ones, but they both should have the same dimensions. Otherwise, you get some strange scaling effects because both images must be displayed in exactly the same space on the page.
2. Choose Insert --> Image Objects --> Rollover Image.
The Insert Rollover Image dialog box appears.
3. In the Image Name box, name your image.
Before you can apply a behavior to an element, such as an image, the element must have a name so that the behavior script can reference it. You can name elements anything you like as long as you don't use spaces or special characters.
4. In the Original Image box, specify the first image you want visible. Use the Browse button to locate and select the image.
If the images are not already in your site's root folder, Dreamweaver will copy them into your site when you create the rollover.
5. In the Rollover Image box, enter the image you want to become visible when visitors move their cursors over the first image.
Again, you can use the Browse button to locate and select the image.
6. Select the Preload Rollover Image check box to load all rollover images into the browser's cache when the page first loads.
If you don't choose to do this step, your visitors may experience a delay because the second image will not be downloaded until a mouse is rolled over the original image.
7. In the When Clicked, Go to URL box, enter any Web address or browse to locate another page in your site that you want to link to.
If you don't specify a URL, Dreamweaver automatically inserts the # sign as a placeholder.
8. Click OK.
The images are automatically set up as a rollover.
9. Click the globe icon at the top of the workspace to preview your work in a browser and test how the rollover works.
Create a Mouseover Effect
A "mouseover" effect occurs when a user moves the mouse pointer onto an image. When the pointer rests on the image, it changes to something else. This is especially useful for navigation buttons. Dreamweaver 3.0 has mouseover commands ready for you to set up!
1. Start Dreamweaver and open the page the mouse-over effect will be located on.
2. Open the Insert menu and select Rollover Image. A dialog box will appear.
3. Type the name of the image to be rolled over in the first box. For example, you might call a Home Page button Home Rollover.
4. In the next box, type the location of the image that will appear on the page. Click Browse to choose an image from your hard disk.
5. In the Rollover Image box, type the location of the image that will be appear when the mouse hovers over the image. Click Browse to choose an image from your hard disk.
6. If the image is click able (linked), type the Web address in the next box. Click OK.
7. Save the page when finished.
8. Test the mouse-over by choosing Preview in Browser from the File menu. Hover your mouse over the image to see the new image take its place.
In Dreamweaver, Rollover images — as the name implies — are designed to react when someone rolls a cursor over an image. The effect can be as dramatic as a picture of a dog being replaced by a picture of a lion, or as subtle as the color of a word changing as one image replaces another. Either way, Dreamweaver includes a special dialog box for rollovers that makes creating a simple rollover effect one of the easiest behaviors to apply.
To create a rollover image by using Dreamweaver's Insert Image Rollover dialog box, follow these steps:
1. Click to place your cursor on the page where you want the rollover to appear.
Rollover effects require at least two images: one for the initial state and one for the rollover state. You can use two different images or two similar ones, but they both should have the same dimensions. Otherwise, you get some strange scaling effects because both images must be displayed in exactly the same space on the page.
2. Choose Insert --> Image Objects --> Rollover Image.
The Insert Rollover Image dialog box appears.
3. In the Image Name box, name your image.
Before you can apply a behavior to an element, such as an image, the element must have a name so that the behavior script can reference it. You can name elements anything you like as long as you don't use spaces or special characters.
4. In the Original Image box, specify the first image you want visible. Use the Browse button to locate and select the image.
If the images are not already in your site's root folder, Dreamweaver will copy them into your site when you create the rollover.
5. In the Rollover Image box, enter the image you want to become visible when visitors move their cursors over the first image.
Again, you can use the Browse button to locate and select the image.
6. Select the Preload Rollover Image check box to load all rollover images into the browser's cache when the page first loads.
If you don't choose to do this step, your visitors may experience a delay because the second image will not be downloaded until a mouse is rolled over the original image.
7. In the When Clicked, Go to URL box, enter any Web address or browse to locate another page in your site that you want to link to.
If you don't specify a URL, Dreamweaver automatically inserts the # sign as a placeholder.
8. Click OK.
The images are automatically set up as a rollover.
9. Click the globe icon at the top of the workspace to preview your work in a browser and test how the rollover works.
Create a Mouseover Effect
A "mouseover" effect occurs when a user moves the mouse pointer onto an image. When the pointer rests on the image, it changes to something else. This is especially useful for navigation buttons. Dreamweaver 3.0 has mouseover commands ready for you to set up!
1. Start Dreamweaver and open the page the mouse-over effect will be located on.
2. Open the Insert menu and select Rollover Image. A dialog box will appear.
3. Type the name of the image to be rolled over in the first box. For example, you might call a Home Page button Home Rollover.
4. In the next box, type the location of the image that will appear on the page. Click Browse to choose an image from your hard disk.
5. In the Rollover Image box, type the location of the image that will be appear when the mouse hovers over the image. Click Browse to choose an image from your hard disk.
6. If the image is click able (linked), type the Web address in the next box. Click OK.
7. Save the page when finished.
8. Test the mouse-over by choosing Preview in Browser from the File menu. Hover your mouse over the image to see the new image take its place.
No comments:
Post a Comment