HTML/CSS mouse hover image hides
I have 2 images, 1 shows the word "home" and another shows "home" with some arrows pointing to it from above.. basically a little thing to spice up my website that im working on as part of my studies.
What would be the easiest way to transition from the blank image to the arrow' image? without using fancy JavaScript? i don't like javascript and would prefer not to use it.
My HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>This is my website :D</title>
</head>
<body>
<div id="banner"><img id="logo" src="images/logo.png" />
<div id="menucontainer">
<div class="menulink" id="menu1"><a href="index.html"><img border="0" id="arrow1" src="images/arrow1blank.png" /><img border="0" id="arrow1popup" src="images/arrow1.png" /></a></div>
<div class="menulink" id="menu2"><a href="#">About Us</a></div>
<div class="menulink" id="menu3"><a href="#">Services</a></div>
<div class="menulink" id="menu4"><a href="#">Account</a></div>
</div>
</div>
</body>
</html>
and CSS:
#banner {
background-color:#000000;
height:100px;
position:absolute;
top:0;
left:0;
right:0;
}
#logo {
position:absolute;
left:350px;
}
#menucontainer {
position:relative;
left:750px;
top:0px;
right:350px;
height:100px;
}
#menu1 {
float:left;
text-align:center;
width:120px;
height:100px;
}
#menu2 {
float:left;
width:120px;
text-align:center;
height:100px;
}
#menu3 {
float:开发者_Python百科left;
text-align:center;
width:120px;
height:100px;
}
#menu4 {
float:left;
width:120px;
text-align:center;
height:100px;
}
Thanks in advance guys :)
There are many ways to do this but sprites + css is the best. Reduces number of requests, requires no reload of image on hover so on slow connections you won't get that 1 second black area while the roll over image loads.
This is popular concept, you will find plenty of tutorials on it like this one.
Its all about the image :)
Simply add this snippet would work.
.menulink:hover { background-img:url('images/arrow1blank.png'); }
.menulink:hover a { display:none; }
Try this:
.menulink img#arrow1popup { display: none; }
.menulink:hover img#arrow1popup { display: inline; }
.menulink:hover img#arrow1 { display: none; }
加载中,请稍侯......
精彩评论