How is this done: USA Map roll over images?

I am trying to put together a locater map that covers the USA.

Desired effect: When a user mouses over a project link. a corresponding image appears on the map of the USA.

I have found the look that I am going for:

http://www.thomasent.com/properties/properties.asp

not to concerned with the project description that shows below the map.
Mainly want the dot to expand when you mouse over the corresponding project link.


What is the best technology for this?
How did they create this effect?

Thanks!

 

If you need cool effects, you'll either have Flash or Javascript.

However, if you want the most common way, it's an image map.

If you want the most accessible way (meaning, if this map is made of things which you cllick and they'll take you somewhere), then you want a list covered by a map.

Something like this?
http://stommepoes.nl/Menus/maphover.html

It's a list, hidden in a map. The links would normally go to pages about the various continents.

The code is open for you to look at. If you're not a coder, I can (later) walk you through it. The hover effect I'm using, you could have an image with a bigger ball or whatever but if you want something fancier you might want this:

never mind they're having a Microsoft Moment so I won't post the URL... but it's a nice Flash map.

 

Oops! Ignore most of what I said above-- I had to turn on Javascript to see what you were talking about!

So, the answer is, they're using Javascript. But why limit the effect to those with Js?

You can have a large image (the map and the thing on the bottom) and then simply have images, text, whatever placed absolutely upon hover using something similar to what Eric's done here:
http://meyerweb.com/eric/css/edge/popups/demo2.html

For the dots, you'd have an image (of the larger dot) which does not appear until :hover... then the imjage appears, in relation to the MAP and not the list. You'd need trial and error to set the coords so it sits precisely over the old dot (which is just part of the map image underneath).

Hope this answers your question better. : )

 

Thanks so much for your reply!

I think I have seen that eric meyer page before or at least something similar.

If I can get it worked out using CSS is that the better solution?

Are you aware of any javascript scripts that are available for this type of effect?



I am going to give it a try.

I will post back here with my finished page.

Thanks!

 

Thanks again for the reply.

Not sure if this will work for me.

I will need all the images to appear in different places and I do not think absolute positioning will work since I am centering the web page in the browser.

Is there something that I am missing?

Thanks so much!

 

Okay, so I have learned lots from my last post!

I have been able to work out several of the elements.

Here is my development site:

http://cypress.intownwebdesign.com/map.html

Currently the only the top two links on the right have images associated.


I learned that if I add position: relative; to my wrapper div then I can use absolute positioning inside the site and have the site still be centered correctly.

#wrapper {
text-align: left;
width: 900px;
height: 550px;
position: relative;
overflow: hidden;
margin-left: auto;
margin-right: auto;
border: solid #000000 1px;
}

This now allows me to position elements absolutely in a div I call map.

Positioning the different images
I was able to work out placing the images in different places by using span tags around the links.

For each link I have created a class that will position the element.


.map-gilbert a img {height: 0; width: 0; border-width: 0;}

.map-gilbert a:hover img {
position: absolute;
top: 290px;
left: 82px;
width: 11px;
height: 12px;
}


The images appear to display correctly in all browsers except IE6.

Does my approach and code to this page appear to be correct?

Any Ideas on how to work out the problems for IE6?

Thanks so much!

 

I just ran in and only got a real quick look at your site, but there's a thread around here at DP where someone had a similar problem in IE6 and it was Haslayout and we had to "set it off". I'll have to take a better look when I've got more time but you can go back to the link I posted (the maphover one) to see one way I got it. Eric's demo is pretty old. I never did the height: 0 width: 0 thing. Also, I zero all my images right at the get-go-- at the top of my CSS sheet...

I'll be back : )

 

After lots of testing I found what was causing the problem IE6. I needed to add one more css statement:

a:hover {border-right: 0px solid none;}

Even thought the statement does not display anything it is needed for the mouseover image to appear in IE6. Go figure.

Thanks for the help!

 

It doesn't look like a Haslyout trigger but that might be what that was doing. Sometimes changing text colour or background colour does it too.