Dreamweaver Tutorial logo Dreamweaver Tutorial Home Page
A value is required.Invalid format.A value is required.Invalid format.
Social Networks Our YouTube.com Channel Facebook Page

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:

example 1 of an image hotspot

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.

example 2 of an image hotspot

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:

image map hotspot tools

  1. The rectangle tool which is used for drawing squares or rectangles
  2. The oval tool which is used for drawing ovals or circles on difficult to map images
  3. The polygon tool which is used for more intricate detailing of a hotspot like drawing around a country or shape.
  4. 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 links for the image hotspot


Setting the Image Hotspot link Target

Clicking the taget pop-up underneath the link box will give you the following link options:

  1. _blank. Will open the link page into a new browser tab.
  2. _parent. Will open the link into the frameset of the current document. (If any)
  3. _self. Loads the link into the same browser tab and is also the default option.
  4. _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



blog comments powered by Disqus

Web Hosting Plans That I Use

  • GoDaddy.com Hosting Plans!Godaddy Hosting
  • Unlimited Hosting at HostGatorHostGator Hosting
  • JustHost.com Unlimited DomainsJustHost Hosting
  • Hosting just $4.88/month! - PowwebPow Web Hosting

Dreamweaver Website Templates

Email Marketing - Recommended links

CSS Drop Down Menu - Dreamweaver

Floating Menu - Dreamweaver

Tabbed Navigation Menu

CSS Text Boxes in Dreamweaver

CSS 3 in Dreamweaver

J Query in Dreamweaver

Transparent Overlays Dreamweaver

CSS in Adobe Dreamweaver

All Types of Links In Dreamweaver

Positioning Elements in Dreamweaver

Unordered List Images Dreamweaver

Create an RSS Feed in Dreamweaver

Website Typography in Dreamweaver

Expanding Text Boxes - Dreamweaver

Make a Donation

Donate for Dreamweaver Tutorials