Image map not working in chrome

[neo]

Hallp!

My image map works fine in Firefox and Internet Explorer, but it doesn't even look like there are links in google chrome :(

http://skyblade.org/

Code: Select all

<img id="light" src="images/Image6.png" usemap="#hero" style="position: fixed; bottom: 0px; left: 0px;" border="0">

<iframe name="eternalhero" width="565" height="328" src="main.php" style="position: fixed; bottom: 84px; left: 365px;" frameborder="0" scrolling="auto" allowtransparency="true">
</iframe>

<map id="hero" name="navigation">
<area shape="rect" coords="391,544,476,617" href="main.php" target="eternalhero" onMouseOver="if(document.images) document.getElementById('light').src= 'images/home.png';" onMouseOut="if(document.images) document.getElementById('light').src= 'images/Image6.png';" / >

<area shape="rect" coords="481,541,609,616" href="domain.php" target="eternalhero"  onMouseOver="if(document.images) document.getElementById('light').src= 'images/domain.png';" onMouseOut="if(document.images) document.getElementById('light').src= 'images/Image6.png';" / >

<area shape="rect" coords="614,541,766,612" href="network.php" target="eternalhero"  onMouseOver="if(document.images) document.getElementById('light').src= 'images/network.png';" onMouseOut="if(document.images) document.getElementById('light').src= 'images/Image6.png';" / >

<area shape="rect" coords="769,541,872,610" href="exit.php" target="eternalhero"  onMouseOver="if(document.images) document.getElementById('light').src= 'images/exit.png';" onMouseOut="if(document.images) document.getElementById('light').src= 'images/Image6.png';" / >

</map>

[Mikari]

I generally use relative positioned divs instead of image maps and they work fine, so maybe you can give that a try as an alternative? Just put the empty divs with width and height where the clicking would be inside the link tags. You can also do mouse over effects like this by putting the second image in the hover of the divs' css as the background. I did that on Fantasy Bit and Confetti, I have images this time but I've also done it with empty divs before.

[neo]

Do you mind if I look at your source code (right click > view source)? I haven't seen that before.
Does each link have its own image and you have to position them accordingly?
I can chop mine up but for right now, it is all one image :0

[Mikari]

You have to position the links, but they don't need their own image unless you want a mouse over effect. If it's just the image as is, then you can put an empty div on top of it. BTW that's a really beautiful layout. :)

This is the HTML:

<div id="navi">

<a href="home.php"><div id="home">&nbsp;</div></a>

<a href="network.php"><div id="network">&nbsp;</div></a>

<a href="fandom.php"><div id="fandom">&nbsp;</div></a>

<a href="links.php"><div id="links">&nbsp;</div></a>

</div>

I like to put spaces inside the divs so that they're not entirely empty, but that's not a must.

Here's the CSS:

div#navi { width:584px; height:509px; background-image:url(enter/miku1.png); padding:0px;
margin:0px auto 0px auto; border:0px none; }

div#home { background-image:url(enter/home1.png); width:315px; height:458px; padding:0px; float:left; position:relative; left:0px; top:0px; z-index:2; background-repeat:no-repeat; margin:0px; border:0px none; }

div#network { background-image:url(enter/network1.png); width:197px; height:184px; padding:0px; float:left; position:relative; left:-195px; top:150px; z-index:3; background-repeat:no-repeat; margin:0px; border:0px none; }

div#fandom { background-image:url(enter/fandom1.png); width:200px; height:82px; padding:0px; float:left; position:relative; left:-195px; top:150px; z-index:4; background-repeat:no-repeat; margin:0px; border:0px none; }

div#links { background-image:url(enter/links1.png); width:144px; height:68px; padding:0px;
float:left; position:relative; left:-107px; top:150px; z-index:5; background-repeat:no-repeat; margin:0px; border:0px none; }

This is all you need if you don't want it to change on mouse over. Also if you're not doing a mouse over you don't need the background-image tags above, those are the chopped images in green and pink that change on mouse over. If you want that effect, just add this next code with the mouse over pics.

div#home:hover { background-image:url(enter/home2.png); }

div#network:hover { background-image:url(enter/network2.png); }

div#fandom:hover { background-image:url(enter/fandom2.png); }

div#links:hover { background-image:url(enter/links2.png); }

For the relative positioning on top and left, positives move down/right and negatives move up/left. the first link starts out at position 0 0, but the second starts next to it and so on. I have an old tutorial, but it's outdated. Ignore the java script, CSS is better for this, it at least gives you an example of the position calculations.

You can look around my code if you want. I don't mind if you copy+paste it and modify it. I also have a bunch of notes about coding, though they are more about the codes themselves rather than the tricks they can do.

[Camy]

If all else fails, you can do CSS Sprites: http://css-tricks.com/css-sprites. There's a site to make them online so you don't have to worry about open up a graphic software: http://wearekiss.com/spritepad

I use those when I have a horizontal menus and it works like a charm :D

[neo]

You have to position the links, but they don't need their own image unless you want a mouse over effect. If it's just the image as is, then you can put an empty div on top of it. BTW that's a really beautiful layout. :)

......

For the relative positioning on top and left, positives move down/right and negatives move up/left. the first link starts out at position 0 0, but the second starts next to it and so on. I have an old tutorial, but it's outdated. Ignore the java script, CSS is better for this, it at least gives you an example of the position calculations.

You can look around my code if you want. I don't mind if you copy+paste it and modify it. I also have a bunch of notes about coding, though they are more about the codes themselves rather than the tricks they can do.

HOLY STINKING COW. YOU ARE A GENIUS. I had no idea you could do this with divs ;-;!!!
So much easier than image maps, AMG.

I can't tell you how much I appreciate your help and patience in explaining to me what you did! The only things I changed are position and top to bottom like this:

div#network { background-image:url(images/lnetwork.png); width:149px; height:54px; padding:0px; float:left; position:absolute; left:648px; bottom: 23px; background-repeat:no-repeat; margin:0px; border:0px none; }
div#network:hover { background-image:url(images/lnetwork2.png); }

Again, thanks a bunch! ^___^

If all else fails, you can do CSS Sprites: http://css-tricks.com/css-sprites. There's a site to make them online so you don't have to worry about open up a graphic software: http://wearekiss.com/spritepad

I use those when I have a horizontal menus and it works like a charm :D

Oh wow, that is another thing I am not familiar with! :D It really helps exxperimenting too when you can make it on there as well! I am going to have to take some extra time to look at it, thank you so very much for suggesting it!!!

[Mikari]

You're welcome ^^ Happy to be of help. I love the mouse over effect with the Link silhouette, it looks awesome. :D