Saturday, January 12, 2008

Having cursor change when on an image map

This took quite a bit of time to find out since there wasn't much information or help online. Creating a simple image map on a graphic for use on the web is fairly simple. Using Dreamweaver for example, you can just drag the area on the image you want to map, then fill in the required information such as: Link, Target, and Alt.

When the mouse is over an image map it will by default change into a hand cursor, usually.

If you want more advance functions out of your image map, say to open a browser window when you click on it, you can utilize the "Open Browser Window" Behavior in Dreamweaver. However, when you do this, you will notice that the cursor no longer changes when the mouse is over the image map. If you have the Link property filled out for the image map with the about Behavior, then you will notice the cursor does change, but when you click on it, it will open two windows. One for the Link property and one for the Behavior.

What I noticed, is that when the Link property is used, then the cursor will change.

So how do I put something into the Link property that won't be used when clicked on?

You have to trick the image map into believing that the Link property is filled in but not utilize the Link. You do this by entering into the Link property, "Javascript:"

Here's a more detailed example:


Software:
Dreamweaver CS3

2 comments:

seb said...

Hi G

I was wondering if you can help me...I'm having this exact same problem in Dreamweaver. I'm using a java behaviour to launch a customised new window from an image map hotspot, but the cursor fails to change as it would with a normal link.

So I found your blog and modified my code, but although the cursor started to change, no new window was launching. So I've gone back to the old code...

I can't copy/paste my code here for you to have a look, but take a look at www.sebmusic.com (it's the bottom right 'gallery, purchase and biog' links that are the culprits).

Any ideas?

Best

Seb

seb said...

Actually mate I just fixed it...I dropped in "href=Javascript:" and took out a redundant target="_blank" tag, all working fine now!

Anyway updated website is at sebmusic.com, check it out!

Best

Seb