CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Michael
Michael

Reputation: 309

on hover show image but at the same time don't hide background

I am making a map and I want that when i hover a continent, he appears but also at the same time not to hide background.

this is my code :

<img id="Image-Maps-Com-image-maps-2015-08-31-103251" src="http://www.image-maps.com/m/private/58808/60863-ue1h8277se3mkfllaet1lledi0_worldmap.png" border="0" width="908" height="494" orgWidth="908" orgHeight="494" usemap="#image-maps-2015-08-31-103251" alt="" />
<map name="image-maps-2015-08-31-103251" id="ImageMapsCom-image-maps-2015-08-31-103251">
	
<area  alt="North America" title="North America" href="http://www.google.com" shape="poly" coords="178,249,117,207,98,156,46,104,121,59,158,61,240,41,396,22" style="outline:none;" target="_blank" onclick="window.open("http://www.google.com");" onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-08-31-103251').src= 'http://i.imgur.com/B9N2Zbv.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-08-31-103251').src= 'http://www.image-maps.com/m/private/58808/60863-ue1h8277se3mkfllaet1lledi0_worldmap.png';"  />

I am not using any css, and this is only code. North America (black pic) is a .png and its transparent by default.

Thanks, Michael

Upvotes: 0

Views: 55

Answers (2)

slashsharp
slashsharp

Reputation: 2833

The trick is to set the world map on a divider as a background image.

And mapping a transparent png the image map.

Example

<div style="width:908;height:494px;background: url(http://www.image-maps.com/m/private/58808/60863-ue1h8277se3mkfllaet1lledi0_worldmap.png) no-repeat top center">

<img id="id-of-the-image" src="path-to-transparent-image-with-the-same-size-of-themap" border="0" width="908" height="494" />

Here's a link to the fiddle based on your html,

Stretch the fiddle result container for better display .....

Upvotes: 1

sam
sam

Reputation: 2033

The problem is here: 

onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-08-31-103251').src= 'http://i.imgur.com/B9N2Zbv.png';

You are replacing the image source with the updated one so it is going to display the new image of the continent. Similarly with onmouseout

Upvotes: 0

Related Questions