An image
map is a device that allows you to insert links to multiple files within a
single image.
1. Insert required image into the webpage.
With an
image selected, you see four image map tools in the property bar(with
expanded). These tools are used to define image map hotspots. Arrow tool is
used fro selecting or moving the hotspots and remaining tools are used fro
creating rectangular circular and polygonal hotspots within the image.
1. Insert required image into the webpage.
2.
Give required map name for as whole image in the Map
Name text box.
3.
Click on one of the required hotspot tool and define an
area.
4.
With a newly drawn hotspot selected, type a URL in the
Link Box or choose required linked page by using Browse button. You can also
link a hotspot to a named anchor by inserting a hash (#) button followed by the
anchor name.
5.
Enter alternative text for the hotspot in the Alt text
box.
6.
Set all of the image properties for the image map as an
ordinary image.
Note: The image must be selected
to get the image properties properly. However you can use the hotspots from the
common Panel – Image sub category.
Creating a rollover image
Rollover is
an mage that, when viewed in a browser, changes when the pointer moves across
it. A rollover actually consists of two images: the primary image (the image
displayed when the page first loads) and a secondary image( the image that
appears when the pointer moves over the primary image). Both images in a
rollover should be the same size; if the images are not the same size, Dreamweaver
automatically resizes the second image to match the properties of the first
image.
You cannot
see the effect of a rollover image in the Dreamweaver Document window. To see
the rollover effect, pres F12 to preview the page in browser, then roll the
pointer over the image.
To create a rollover:
1.
In the document window, place the insertion point where
you want the rollover to appear.
2.
Insert the rollover using one of these methods:
·
In the Insert bar, select Common, then click the
Rollover Image icon.
·
Choose Insert > Interactive Images >
Rollover Image.
Then Insert Rollover Image dialog
box appears.
3.
In the Image Name text box, type a name for the
rollover.
4.
In the Original Image text box, click Browse and select
the image you want displayed when the page loads, or enter the image file’s
path in the text box.
5.
In the Rollover Image text box click Brows and select
the image you want displayed when the pointer rolls over the original image, or
enter the image file’s path in the text box.
6.
If you want the images preloaded in the browser’s cache
so no delay occurs when the user rolls the pointer over the image, select the
Preload Images option,
7.
In Alternate Text, enter text to describe the image for
viewers using a text-only browser. (optional)
8.
In the when clicked Go to URL text box, click Browse
and select the file, or type the path to the file that you8 want to open when a
user clicks the rollover image.
Note: If you don’t set a link for
the image, Dreamweaver insets a null link (#) in the HTML source code to which
the rollover behavior is attached. If you remove the null link. The rollover
image will no longer work.
9.
Click OK to close the Insert Rollover Image dialog box.
10.
Choose file > Preview in Browser or press F12.
11.
In the browser, move the pointer over the original
image.
