Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Changing Image on Mouseover

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #26751
    arg816
    Participant

    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:

    Final Project

    Ashley’s Portfolio


    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! :)

    #66531
    gooflett
    Member

    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.

    #66532
    arg816
    Participant

    it worked! thank you so much!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.