Javascript mouse over help

[k++]

I have an image, a map of the world. All land areas are the same colour, green. The size is about 1200x800 at the moment.

My goal is to allow the user to scroll over specific countries and for that country to change colour, there will be more functionality but this will do for now.

I am new to this web development thing but I have no problem reading things myself, the problem I have is that I don't know what I should be googling for

I figure there are two ways to do this:

1) Multiple 1200x800 images, each with a different county in the highlighted colour. I need to detect the co-ordinates of the mouse over and load the appropriate image.

I don't really want many of these images, despite being about 20KB each it doesn't seem very efficient to me.

2) Multiple smaller images, size appropriate to the size of the country. On a mouse-over of a country, I overlay the smaller image onto the larger image, creating the effect of a rollover.

There are a few things I need help with:

Which solution would be best, if neither then what is recommended?

I can do simple javascript mouse-overs but I have no idea what the specific technique I'm trying to use is called. I have followed plenty of examples, but all are for mouse-overs of whole images, not particular sections. Therefore what are some keywords I could google?

How would I determine which county has been selected by the mouse, co-ordinates seem over-complicated because of the irregular shape.



Thanks

 

[k++]

Really appreciate that code mate. I had already made my own maps so spent a frustratingly large amount of time adjusting positions etc.

It can also get a bit fiddly with some continents and countries running into others, but as it stands it works great, now I need to work out how to determine which country has been selected so I can display some information.

Should I use javascript for this or can I use css again?

Much appreciated

Karl

 

[k++]

No server side unfortunately.

I have done this for now, but it's useless at the moment because I actually want some text to appear in a cell in my table.

<li id = "Oceania" class = "OCE" onmouseover="mouseOver(Oceania)">

I remember reading somewhere tables were bad, and css is the way forward. Thing is I have already implemented the tables so if I could get that going for now, then a full css conversion could be on the cards.

So the class is there for a server-side implementation only I gather? I'll remove them if so.

 

[k++]

I have just discovered how to modify html elements by id using javascript

And, even cooler. I did it using css rather than tables.