Pops link over an image

I want to make a map and with alert window and link when hover link over certain areas
How can i do it?
Thanks in advance

I imagine that the best way to do this would be to slice the image up and display it in a table format or something like this. There are ways to use hover effects to display a <span> that has been previously hidden.

I actually used the code in a project yesterday. I can provide if you want it. Mention or quote me or pm me to get my attention (I’m not in this forum a lot).


Yes of course if you want to share your code
Thanks a lot

Sure. I’ll post when I get home - don’t have it right here. It’s really pretty simple, at first setting a span to display:none; and then changing it on hover.



Right. I’ve got it. Like I explained above, you essentially display:none; the span and then have it show on hover.


<a href="#" class="onhover"><img src="blahblah.jpg" alt="a blah blah blah" /><span>Check out this cool picture and cool hover effect!</span></a>


a.onhover span {display:none;}

a.onhover:hover span	{display:block;
				 border:1px solid #050505;

You can change all of the other stuff, just make sure you have a width, the display:block, and something inside the span for it to work.

Again, not my code. If you made this (specific piece of code), let me know, or just post!

I can explain exactly what everything does if you wish.


A CSS image map might be a better solution. There are links to various tutorials here.

You need to remember that “hover” won’t work on some mobile and/or touchscreen devices. It also requires the use of a mouse, so it excludes anybody navigating via a keyboard. I believe you can use focus to make it accessible to keyboarders. Not all the image maps in the above link are keyboard-accessible, although the first one is. (I didn’t test them all.)

Yeah. You’d need to balance what you want. Even though you can use focus to help people with touchscreens and keyboard navigation, most people don’t click when there’s a hover effect. The best way would be to include both:

a.onhover:hover span, a.onhover:focus span


You shouldn’t use display:none/block. That’s a poor technique and outdated.

A better method which has been shown to be more accessible, is (make it position;absolute of course, coordinates etc) to hide it via a huge negative left margin, and upon hover, or focus, bring it back in :).

It also avoids an IE7 bug.

I don’t know how much focus helps with touchscreens - you’d need a method of tabbing through the links, which not all touchscreens have.

Well it gives them some interactivity potential - although usually when I use a touchscreen I don’t expect much interactivity - this might be a good thing.

If you hooked it up with a cool animation transition (CSS3), it would be a really nice site.