Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Image map with hover-over image icons.

    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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.

    ...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •