Image map with hover-over image icons.

[azizalmudhaf]

Hi guys. I'm trying to achieve an effect of substituting the squares in this logo as icons that link to different projects when you hover over them, and they would turn back to black squares when you hover away from them:

www.11by8.com

So far I've tried doing hover-changing image icons, and laid them over the base image's top-right four squares by using coordinates:

www.11by8.com/test.html

It's working well on my screen's resolution and it delivers the effect I'm trying to achieve, but the squares go out of place when I zoom in or out of my screen. This also happens when I view the page in other devices such as phones and iPads,

I've tried working with an image map generator (http://www.image-maps.com/) but it didn't quite work with what I wanted, since it replaced the image of the logo with an enlarged image of the icon as soon as I hover over it:

www.11by8.com/test2.html


Could someone please guide me on which solution would be best to fix the problem, and implement the effect I have in mind?

-Aziz

[Excavator]

Hello azizalmudhaf,
Invalid code, deprecated <center> tag, mis-using the <br> tag for positioning elements and unpositioned container are all part of your problem.

Instead of putting your image and positioned elements in that <center>, use <div id="wrapper"> and position it relative. That will stop things from moving around.

Check you code in the validator too, that will help you with the other issues. See the links about validation in my signature line below.

A different approach here, I've used this before and liked the end results.

...