Creating Image Map Hotspots in Dreamweaver CS4
Image maps are links that you can assign to image or regions of an image. Imagine a map of the world and every continent being an individual clickable link. Well, these links are created using image map hotspots.
They are also a great time saver for say, assigning a link to a certain part of you header image as you can quite simply draw the area you want that hotspot to be. Here is one example that is at the top of the page you are v******iewing right now:
Here is another example of an Image map which is also at the top of the page; This hotspot link takes you back to the Index of this website. Hover over the link to see.
Image hotspots are achieved using tools similar to that found in adobe fireworks, Photoshop and flash. Located in the properties inspector once you click on an inserted image, the tools are as follows:
- The rectangle tool which is used for drawing squares or rectangles
- The oval tool which is used for drawing ovals or circles on difficult to map images
- The polygon tool which is used for more intricate detailing of a hotspot like drawing around a country or shape.
- There is also the pointer tool which looks like an arrow. This can be used to click and drag the created hotspot to the desired location or to modify the hotspot. You will probably use this quite a bit.
How to create an image map in Dreamweaver
Ok, heres what you need to do to create an image map hotspot:
- Once you know which image you wish to create a hotspot onto, click on it and go to the properties inspector and at the bottom left you will see the word ‘map.’ Below that are the image hotspot tools you need.
- Draw the area for the hotspot which will make up the clickable portion that you visitors will be able to see.
- Adjust the hotspot if needed by using the pointer tool. You just need to click and drag on the corners of the hotspot. You can also click in the middle of a hotspot to adjust it's placement on the image.
- Put the link for the hotspot inside the links box of the properties inspector. Or you can browse for the file or, everybody’s favourite; Use the point to file icon!
- Optionally you can set where the link opens up using the target popup menu. I.e. in a new window, frameset, pop-up menu etc.
Setting the Image Hotspot link Target
Clicking the taget pop-up underneath the link box will give you the following link options:
- _blank. Will open the link page into a new browser tab.
- _parent. Will open the link into the frameset of the current document. (If any)
- _self. Loads the link into the same browser tab and is also the default option.
- _top. loads the link in the top of the frameset (If any)
Modifying Multiple Image Hotspots in Dreamweaver
If you at anytime need to modify or adjust multiple hotspots you can hold down the shift key and using the pointer tool select the hotspots you wish to amend. Then you can change the link properties in the properties inspector.
If you change the Image behind the hotspot at any time the image hotspot will still remain in place.
Share this Dreamweaver Article:
Related Dreamweaver Links
Create Email Links in Dreamweaver - Dreamweaver Article
Named Anchor Text Links in Dreamweaver CS4 - Dreamweaver Article
Links and Hyperlinks for Beginners in Dreamweaver CS4 - Dreamweaver Article