7 replies [Last post]
rocketscience
Offline
Regular
Calgary, AB
Last seen: 17 years 16 weeks ago
Calgary, AB
Joined: 2003-08-07
Posts: 16
Points: 0

I posted this in "Newbies" but decided this area is more relevant.

I have a map [literally] with links using an image map. I would like to use CSS to display some sort of rollover functionality - whether it be a border, cursor change, background change, anything to let the user know something is there. Anyone have any ideas?

the CSS I tried:

#map a { border: 1px solid red; }
#map a:hover { border: 1px solid red; }

the HTML:
<map name="Map" id="map">
<area shape="rect" coords="447,84,456,93" href="#">
</map>

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 43 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

CSS &amp; Image Maps

The problem there is that in the CSS you're asking for an achor ('A') tag within the id #map, and there isn't one. What would be 'right' is:

#map area:hover { blah }
(note you only want the area to active the hover, not the whole map!

but that won't work.

I'm sure someone could knock up some javascript to be used in the AREA tag, that will do just what you want - I'm not a javascript person though!

Hope that helps...

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

rocketscience
Offline
Regular
Calgary, AB
Last seen: 17 years 16 weeks ago
Calgary, AB
Joined: 2003-08-07
Posts: 16
Points: 0

CSS &amp; Image Maps

Yes, thanks. I wish it could be done without JS . Crying

Huggy
Offline
newbie
Edinburgh, Scotland
Last seen: 17 years 6 days ago
Edinburgh, Scotland
Joined: 2003-11-26
Posts: 4
Points: 0

CSS &amp; Image Maps

I have seen something like this before where an <A> tag was embedded within the main tag.

I will have a hunt around and see if I can find it again.........

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 6 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

CSS &amp; Image Maps

Hi Huggy,
I have been doing something similar recently without image maps.
Instead I used absolutely positioned divs over the image with the link inside the div.

<div style="position:relative; width:300px; height:300px;">  
<img src="image.gif" style="width:300px; height:300px;" />  
   <div style="position:absolute; z-index:5; top:50px; left:75px;">  
      <a href="#" style="text-decoration:none; border:solid-red;">&nbsp; &nbsp;</a> 
   </div>  
</div>

You may be able to just position the link but I had more success this way.

Hope that helps

Huggy
Offline
newbie
Edinburgh, Scotland
Last seen: 17 years 6 days ago
Edinburgh, Scotland
Joined: 2003-11-26
Posts: 4
Points: 0

CSS &amp; Image Maps

Yeah, that sounds familiar...

Although I am a little wary of using absolutely positioned elements because they may impact upon accessibility - it is virtually impossible to accommodate every permutation of browser out there: 800x600, WAP, TV.....

JohnO
Offline
Regular
Rochester NY
Last seen: 16 years 49 weeks ago
Rochester NY
Timezone: GMT-5
Joined: 2003-12-18
Posts: 16
Points: 0

CSS &amp; Image Maps

you are in luck.. there is an article here on exactly that subject:

http://www.alistapart.com/articles/imagemap/

danielslcosta
Offline
newbie
Last seen: 16 years 31 weeks ago
Joined: 2004-04-29
Posts: 1
Points: 0

Placing onMouseOver effects over Maps

I realized just today the solution to our problem. My suggestion is..

1. Create one layer, which will have the map of the region as background, and will contain these two layers:
1.2. Create several layers with the images of the regions with glow or any other effect of your choice. All this layers will have zIndex = 1 and visibility = hidden;
1.3. Create another layer, with the same size of the image of layer 1, using a image 1x1 pixel wide, with transparent background (that will cost you about 3 bytes). In the img properties, change the size accordingly to the size of the containing layer. In this img, put your map, and in the areas, put a onmouseover that will set the property of the relative 1.2 layer to visible.

So, you'll have 3 layers of layers:

1st: ------------------- ( transparent with a map )
2nd: -- ---- ------ ---- ( several layers only with the regions glowed )
3rd: _____________ (the map itself, and image, as background, i.e.)

That's it.. worked perfectly.

- Daniel
Brasil