- This topic is empty.
-
AuthorPosts
-
November 13, 2009 at 3:46 pm #26751arg816Participant
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! :)
November 13, 2009 at 4:47 pm #66531gooflettMemberI 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 #66532arg816Participantit worked! thank you so much!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.