Grow your CSS skills. Land your dream job.

[Solved] Changing Image on Mouseover

  • # November 13, 2009 at 3:46 pm

    I’m in a web design class and am currently working on a personal portfolio website. I am stuck on making my images which are also links change to another image on mouseover. I’ve been trying so many things and nothing seems to work. Please help!

    HTML CODE:

    Code:


    CSS CODE:

    Code:
    body{
    background-image: url(stripes.png);
    background-repeat: repeat;
    }

    #container{
    margin: 0 auto;
    width: 980px;
    height: 900px;
    background-color: white;
    }

    #hello{
    background-repeat: no-repeat;
    background-image: url(hello.png);
    width: 783px;
    height: 259px;
    margin-left: 80px;
    padding-bottom: 10px;
    }

    #aboutme{
    background-image: url(aboutme.png);
    background-repeat: no-repeat;
    width: 235px;
    height: 294px;
    float: left;
    margin-left: 80px;
    }

    #aboutme: hover{
    background-image: url(aboutmesmall.png);
    background-repeat: no-repeat;
    }

    #mywork{
    background-image: url(mywork.png);
    background-repeat: no-repeat;
    width: 283;
    height: 319px;
    float: left;
    margin-top: 100px;
    }

    #contact{
    background-image: url(contact.png);
    background-repeat: no-repeat;
    width: 286px;
    height: 259px;
    float: left;
    postition: relative;
    }

    #fbook{
    background-image: url(fbook.png);
    background-repeat: no-repeat;
    width: 131;
    height: 111;
    float: left;
    margin-top: 225px;
    position: relative;
    right: 200px;
    }

    #mspace{
    background-image: url(mspace.png);
    background-repeat: no-repeat;
    width: 131;
    height: 117;
    float: left;
    margin-top: 225px;
    position: relative;
    right: 200px;
    }

    #twitter{
    background-image: url(twitter.png);
    background-repeat: no-repeat;
    width: 131;
    height: 115;
    float: left;
    margin-top: 262px;
    position: relative;
    bottom: 380px;
    margin-left: 255px;
    }

    Thanks so much! :)

    # November 13, 2009 at 4:47 pm

    I didn’t have time to copy and paste your code to test. But one thing jumped out at me that could be causing your problem.

    #aboutme: hover{
    background-image: url(aboutmesmall.png);
    background-repeat: no-repeat;
    }

    Try changing the selector to #aboutme:hover

    Removing the space will help the browser know what you want. I think all pseudo selectors like that can’t have a space.

    Another thing I noticed, you currently are using DIVs with an onclick as a link. I mean this works I guess but I have never seen it done like this. A more common markup approach would be to do an unordered list. The markup you have now is useless to someone who is blind or uses a screen reader. There is no text on the page to say there is a link.

    <ul id="navigation">
    <li><a href="#">About Me</a></li>
    <li><a href="#">My Work</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Fbook</a></li>
    </ul>

    Watch this screencast for a standard way of doing image rollovers with css.
    http://css-tricks.com/video-screencasts/7-three-state-menu/

    I hope this helps you out.

    # November 13, 2009 at 4:52 pm

    it worked! thank you so much!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".