Image Map – Mouse Over Info Box

@MorgawrNov 07.2007

Hey guys I am new here so please be patient. I have looked on google for awhile and haven’t seen any information on doing exactly what I want and I am totally confused on how to do it.

This is what I want to do. I want to take an image say for all our purposes an image with 4 squares of red, blue, black, yellow. And when someone mouses over the black square starting at the pointer I would like a solid information box to appear with information about that black box to appear. Consequently I want it to change whats in the box if you mouse over the other squares in the image.

Does anyone know how to do this or point me in the direction of an article that explains this?

Thank I appreciate your help guys!

to post a comment

CSS

24 Comments(s) _↴

@dtm32236Nov 07.2007 — #i'm not exactly sure i fully understand what you're looking to accomplish here, but I've recently done something similar [url=http://www.foremostgroups.com/dev/2007corporate/global_sourcing_map.shtml]here[/url] using an [url=http://www.htmlcodetutorial.com/images/images_famsupp_220.html]image map[/url] (i'm sure there are better tutorials out there) and [url=http://www.netlobo.com/div_hiding.html]hidden/visible divs[/url]

@MorgawrauthorNov 07.2007 — #Oh btw if this can't be done in CSS plz let me know and I can take this to another forum. Thanks.

@dtm32236Nov 07.2007 — #it uses a combination of CSS and JavaScript. i'm sure that posting here (in CSS) is fine.

@MorgawrauthorNov 07.2007 — #Uh yeah something really similar to that. But instead of the information coming into a box on the side what about a box appearing near the mouse cursor?

@dtm32236Nov 07.2007 — #that would require some javascript - it would have to read the position of the mouse, and then position the div absolutely in relation to where the cursor is...

but that's a little advanced for me - i'm not that great with JS.

edit: if you want the box to appear in a FIXED position, that's a lot easier - you just set the position to absolute, then specify the top and left pixel offset.

@MorgawrauthorNov 07.2007 — #easier said that done haha. I have only really done css for links. :-) mind if I take a look at your websites source code? and is there any program that I can use that will let me i guess the word is "draw" the image maps on the image I want?

@dtm32236Nov 07.2007 — #dreamweaver makes creating an image map very easy - you really just draw hotspots in certain areas of the image, and it writes the code for you. i'm not sure if there are other applications that help creating image maps, but i'm sure they're out there.

and you can look at my code and use any part of it you'd like - after all, a lot of the script i've used was found online via site that offer free scripts (then customized, of course, to fit my needs).

@MorgawrauthorNov 07.2007 — #question though on your website you know in the right DIV table. the one where the information comes up. Is there a way to pad the text so it doesn't rest against the left edge of the border?

@CentauriNov 07.2007 — #Don't use image maps - they are not accesiible to non-visual browsers.

This can be done entirely with css - an example here.

@MorgawrauthorNov 07.2007 — #okay so I looked at the balloon source and well what if I want it to go to the information box on the side of the screen. How do I define an area with the css like multiple areas on the same image.

@CentauriNov 08.2007 — #To just get information to popup in another location, it is simply a matter of embedding that info in, say, a span tag within the image link (it could be done without an actual <a> link, but a bit a javascript would be required to help IE6 here) which would be absolutely positioned and normally hidden or positioned off the page. The link hover would then display the span at the required location.

I used this technique here and here for such information display - check out the coding of these.

@MorgawrauthorNov 08.2007 — #would it matter though ive tested image maps on IE and firefox and from that I would assume safari works and netscape so what other browsers are there that would make it so image maps dont work?

@CentauriNov 08.2007 — #Image maps work as far as visual browsers go, but screen readers or search engine spiders cannot navigate them.

@dtm32236Nov 08.2007 — #will a search engine follow the links within the map?

<area shape="circle" coords="416,128,8" href="page.html">

will it follow, and index page.html?

@CentauriNov 08.2007 — #No, from what I have seen, the spiders will not follow image map links (the Googlebot at least).

@MorgawrauthorNov 08.2007 — #okay im getting this together finally and i decided to stay with image raps as it doesnt bother me if people who dont use IE, firefox, etc cant view it. but i have an section of an image on the imagemap and i want it to load an image when i mouse over and also toggle the layer that it is suppost to post to.

i guess basically i want the image map to change colors is that possible? without having to create 100s of images to color in the section of the image map.

@MorgawrauthorNov 08.2007 — #I should really clarify it more.

onmouseover="imgChange(

so i know i can change the image but i cant seem to get it to change the image AND onMouseOver="togLayer('text1')

@CentauriNov 08.2007 — #it doesnt bother me if people who dont use IE, firefox, etc cant view it[/QUOTE]

And it doesn't matter if only the first page ever gets indexed on search engines ?

You would have to call a javascript fiunction which will then call the other two functions. Seems like a lot of mucking around and javascript, when the effect can be done all in css if not using an image map....

@MorgawrauthorNov 08.2007 — #well if i could just understand those css things and i would be using a ton of image maps so i have no idea how to get the cords right in css anyway its just for a good friend of mine that wanted some help so he isnt too picky if the first page is only done. keep in mind and super noob in css, javascript, etc.

so anyway should this bit of script work cause its no tlol.

 <img src="images/map_global_sourcing.jpg" alt="" width="500" height="301" usemap="#map_global_sourcingMap" id="map_global_sourcing">
   <map name="map_global_sourcingMap" id="map_global_sourcingMap">
   <area shape="circle" coords="113,90,17" alt="" onMouseOver="togLayer('text1'); image2.src='images/map2.gif'; return false">
   <area shape="circle" coords="225,64,18" alt="" onMouseOver="togLayer('text2'); return false">
   <area shape="circle" coords="414,127,15" alt="" onMouseOver="togLayer('text3'); return false">
   <area shape="circle" coords="417,93,16" alt="" onMouseOver="togLayer('text4'); return false">
   </map>

its just the first image map im trying to load an image to replace the first image but im not sure what to do.

My goal is that I have an image with about 6 sections that when you mouse over I want it to tog to another layer and show text and also make that area IE map of florida turn from grey to black to show that you are moused over that area.

@dtm32236Nov 08.2007 — #making an area on the image change is a little more complicated. now your talking about floating a new, and separate piece of the image over the image itself. that's going to be tough to accomplish (maybe).

why not use flash to get this effect?

edit: using flash on a website (especially for navigation) is very un-suggestible (for accessibility, scalability, and SEO reasons)... but if it's for one little part of your site it should be okay.

@MorgawrauthorNov 08.2007 — #well i don't have flash i guess what im trying to do is complicated and im trying to do it in nothing but text file lol.

@MorgawrauthorNov 08.2007 — #hmm i guess is it possible to change the image on mouse over but keep the same image maps? arg this is giving me such a headache its like i need a class in this stuff.

@MorgawrauthorNov 08.2007 — #so i found this website

http://www.cssplay.co.uk/menu/imap.html

and it does something like what I would want to do but I have no idea even where to begin. in truth I made 6 images and I want for every time you mouse over Florida it turns black so i guess it loads the image with Florida black and then for every time you mouse over Georgia it makes Georgia black and Florida is white again.

@MorgawrauthorNov 08.2007 — #ooh weeee!!!!!! figured out one of the things i wanted to do! I got it so when you mouse over one thing the image changes now to figure out how so it will post to the tog layer thing as well! :-)

Also in #CSS _↴

Equal spacing between DIV elements...How?Firefox 1.5 spoiling Bootstrap width for overlay div

Success!

Help @Morgawr spread the word by sharing this article on Twitter...

Tweet This

Image Map – Mouse Over Info Box

24 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Image Map – Mouse Over Info Box

24 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

24 Comments(s) _↴

Also in #CSS _↴