Sorry for the title, I really have no idea how to describe what I want other than to show you, but first I'll try and explain.
What I'm trying to do is apply a hover effect to each island from GTA San Andreas' map. The problem with this is that I can't just slice them into rectangles, because some bits overlap each other vertically.
Example Map: http://myepsilon.org/maps/gtasa_empty_map.jpg
So how do I cut it into 4 images (Island 1, 2 and 3, remaining water) and then put them back together on a web page fitting together perfectly?
The only other way I've been able to do it is to use an image map, and javascript for the image to change to one of 3 pre-hover effect images, but this means loading 4 sets of the image every time the page loads.
Example of this (No Pre-Load, bottom two island only): http://cyphergaming.co.uk/map.html
Is there a better way? Cheers!
What I'm trying to do is apply a hover effect to each island from GTA San Andreas' map. The problem with this is that I can't just slice them into rectangles, because some bits overlap each other vertically.
Example Map: http://myepsilon.org/maps/gtasa_empty_map.jpg
So how do I cut it into 4 images (Island 1, 2 and 3, remaining water) and then put them back together on a web page fitting together perfectly?
The only other way I've been able to do it is to use an image map, and javascript for the image to change to one of 3 pre-hover effect images, but this means loading 4 sets of the image every time the page loads.
Example of this (No Pre-Load, bottom two island only): http://cyphergaming.co.uk/map.html
Is there a better way? Cheers!
