Update image while mouse hover
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Extreme Updates</title>
<style type='text/css'>
/* CSS Document */
body{
padding:0;
margin:0;
background:url(Extreme-Updates-images/main_bg.gif) 0 0 repeat-x #fff;
color:#000;
}
div, h1, h2, p, form, label, input, textarea, img, span{
margin:0; padding:0;
}
ul{
margin:0;
padding:0;
list-style-type:none;
font-size:0;
}
.spacer{
clear:both;
font-size:0;
line-height:0;
}
/*------------------------------------------------body--------------------*/
/*------------------------------------------------header--------------------*/
#headerMain{
width:100%;
}
#header{
width:961px;
height:319px;
background:url(Extreme-Updates-images/header_pic.jpg) 479px 57px no-repeat;
float:right;
position:relative;
}
#header ul.top{
background:url(Extreme-Updates-images/top_nav_bg.gif) 0 0 no-repeat;
width:237px;
height:18px;
position:absolute;
left:687px;
top:29px;
padding:0 0 0 15px;
}
#header ul.top li{
float:left;
display:block;
}
#header ul.top li.hover{
background:url(Extreme-Updates-images/home_icon.gif) 0 3px no-repeat;
padding:0 0 0 18px;
font:bold 10px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#000;
margin:0 21px 0 0;
text-transform:uppercase;
float:left;
display:block;
background-color:inherit;
}
#header ul.top li a.about{
background:url(Extreme-Updates-images/about_us_icon.gif) 0 3px no-repeat;
padding:0 0 0 19px;
font:bold 10px/17px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#000;
text-transform:uppercase;
text-decoration:none;
display:block;
margin:0 15px 0 0;
background-color:inherit;
}
#header ul.top li a.about:hover{
background:url(Extreme-Updates-images/about_us_icon_hover.gif) 0 3px no-repeat;
}
#header ul.top li a.contact{
background:url(Extreme-Updates-images/contact_icon.gif) 0 3px no-repeat;
padding:0 0 0 23px;
font:bold 10px/17px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#000;
text-transform:uppercase;
text-decoration:none;
display:block;
margin:0 15px 0 0;
background-color:inherit;
}
#header ul.top li a.contact:hover{
background:url(Extreme-Updates-images/contact_icon_hover.gif) 0 3px no-repeat;
}
#header img{
position:absolute;
left:0;
top:30px;
width:411px;
height:96px;
}
#header h1{
font:bold 24px/27px Verdana, Arial, Helvetica, sans-serif;
color:#fff;
background-color:inherit;
position:absolute;
left:0;
top:166px;
text-transform:uppercase;
}
#header p{
font:normal 17px/20px Verdana, Arial, Helvetica, sans-serif;
color:#FEEDB7;
background-color:inherit;
position:absolute;
left:24px;
top:198px;
text-transform:none;
text-align:center;
width:443px;
}
#header ul.nav{
width:730px;
height:39px;
position:absolute;
left:95px;
top:279px;
}
#header ul.nav li{
float:left;
margin:0;
padding:0;
}
#header ul.nav li a{
display:block;
padding:0 15px;
font:bold 11px/39px Verdana, Arial, Helvetica, sans-serif;
color:#fff;
background-color:inherit;
text-decoration:none;
}
#header ul.nav li a:hover{
color:#fff;
background-color:#0078AA;
}
/*------------------------------------------------header--------------------*/
/*------------------------------------------------bodyTop--------------------*/
#bodyTopMain{
width:100%;
background:url(Extreme-Updates-images/body_top_bg.gif) 0 0 repeat-x #FFFAE8;
color:#251C00;
padding:22px 0 0 0;
}
#bodyTop{
width:930px;
margin:0 auto;
background:url(Extreme-Updates-images/body_top_bg2.gif) 0 0 repeat-y;
}
/*------------------------------------------------left1--------------------*/
#left1{
width:447px;
margin:0 27px 0 0;
padding:0 0 35px 0;
float:left;
}
#left1 h2{
font:bold 34px/40px Georgia, "Times New Roman", Times, serif;
color:#202020;
background-color:inherit;
text-transform:uppercase;
margin:0 0 21px 0;
}
#left1 h2 span{
font:normal 30px/18px Verdana, Arial, Helvetica, sans-serif;
color:#970000;
background-color:inherit;
display:block;
}
#left1 p.leftText1{
font:normal 12px/17px Verdana, Arial, Helvetica, sans-serif;
color:#251C00;
background-color:inherit;
margin:0 0 24px 0;
display:block;
width:447px;
}
#left1 p.leftText1 span{
font:bold 12px/17px Verdana, Arial, Helvetica, sans-serif;
color:#006882;
background-color:#FFFEFA;
}
#left1 p.leftText1 a.link1{
font:normal 12px/17px Verdana, Arial, Helvetica, sans-serif;
color:#1B7D01;
background-color:inherit;
text-decoration:underline;
}
#left1 p.leftText1 a.link1:hover{
color:#1B7D01;
background-color:#F7F0D9;
text-decoration:none;
}
#left1 a.link2{
background:url(Extreme-Updates-images/left_link_bg.gif) 0 0 no-repeat #F0FFFF;
padding:0 0 0 54px;
font:bold 18px/39px Georgia, "Times New Roman", Times, serif;
color:#144848;
width:390px;
height:41px;
display:block;
text-decoration:none;
}
#left1 a.link2:hover{
background:url(Extreme-Updates-images/left_link_bg_hover.gif) 0 0 no-repeat;
}
/*------------------------------------------------left1--------------------*/
/*------------------------------------------------mid1--------------------*/
#mid1{
width:230px;
float:left;
background-color:#C58C00;
color:#000;
padding:0 0 0 0;
}
#mid1 p.mid1Top{
background:url(Extreme-Updates-images/mid1_top.gif) 0 0 no-repeat;
width:230px;
height:25px;
font-size:0;
}
#mid1 h2{
width:102px;
height:41px;
background:url(Extreme-Updates-images/importaint_service_pic.gif) 0 0 no-repeat;
padding:0 0 0 63px;
font:bold 14px/17px Verdana, Arial, Helvetica, sans-serif;
color:#fff;
background-color:inherit;
margin:0 0 15px 14px;
display:block;
}
#mid1 h2 span{
font:bold 24px/17px Verdana, Arial, Helvetica, sans-serif;
display:block;
}
#mid1 p.linkTop{
background:url(Extreme-Updates-images/mid1_link_top.gif) 0 0 no-repeat;
width:204px;
height:15px;
font-size:0;
margin:0 0 0 14px;
padding:0;
display:block;
}
#mid1 ul{
background:url(Extreme-Updates-images/mid1_link_bg.gif) left bottom no-repeat #FFE5A4;
width:188px;
margin:0 0 0 14px;
color:#000;
padding:0 0 22px 16px;
}
#mid1 ul li{
border-bottom:#886B21 dashed 1px;
height:20px;
padding:0;
margin:0;
}
#mid1 ul li.bdrNo{
border-bottom:none;
height:20px;
padding:0;
margin:0;
}
#mid1 ul li a{
background:url(Extreme-Updates-images/bullet_white.gif) 0 6px no-repeat;
padding:0 0 0 15px;
font:bold 11px/20px Verdana, Arial, Helvetica, sans-serif;
color:#910303;
background-color:inherit;
text-decoration:none;
display:block;
}
#mid1 ul li a:hover{
color:#000;
background:url(Extreme-Updates-images/bullet_blue.gif) 0 6px no-repeat #F0FFFF;
}
/*------------------------------------------------mid1--------------------*/
/*------------------------------------------------right1--------------------*/
#right1{
width:212px;
float:right;
}
#right1 a.jobBanner{
background:url(Extreme-Updates-images/job_banner.gif) 0 0 no-repeat;
width:212px;
height:87px;
display:block;
margin:0 0 22px 0;
}
#right1 a.jobBanner:hover{
background:url(Extreme-Updates-images/job_banner_hover.gif) 0 0 no-repeat;
}
#right1 h2{
width:137px;
background:url(Extreme-Updates-images/right_panel_div.gif) left bottom no-repeat;
height:45px;
padding:0 20px 0 19px;
font:normal 22px/21px Verdana, Arial, Helvetica, sans-serif;
color:#202020;
background-color:inherit;
display:block;
margin:0 0 13px 12px;
}
#right1 h2 span{
font:bold 26px/21px Georgia, "Times New Roman", Times, serif;
color:#0078AA;
background-color:inherit;
text-transform:uppercase;
display:block;
width:140px;
}
#right1 a.rightLogo{
background:url(Extreme-Updates-images/right_logo.gif) 0 0 no-repeat;
width:176px;
height:50px;
margin:0 0 25px 12px;
display:block;
}
#right1 a.rightLogo:hover{
background:url(Extreme-Updates-images/right_logo_hover.gif) 0 0 no-repeat;
}
#right1 a.viewMore{
background:url(Extreme-Updates-images/view_more_bg.gif) 0 0 no-repeat;
width:179px;
height:27px;
font:bold 15px/27px Georgia, "Times New Roman", Times, serif;
color:#144848;
background-color:inherit;
text-decoration:none;
text-align:center;
display:block;
margin:0 0 0 12px;
}
#right1 a.viewMore:hover{
color:#A41007;
background-color:inherit;
}
/*------------------------------------------------right1--------------------*/
/*------------------------------------------------bodyTop--------------------*/
/*------------------------------------------------bodyBot--------------------*/
#bodyBotMain{
width:100%;
background:url(Extreme-Updates-images/body_bot_bg.gif) 0 0 repeat-x #fff;
color:#000;
padding:0 0 15px 0;
}
#bodyBot{
width:930px;
margin:0 auto;
}
/*------------------------------------------------left2--------------------*/
#left2{
width:447px;
float:left;
margin:31px 27px 0 0;
}
#left2 h2{
width:441px;
height:17px;
background:url(Extreme-Updates-images/news_div.gif) 0 0 repeat-x;
margin:0 0 26px 0;
display:block;
}
#left2 h2 span{
font:bold 24px/17px Georgia, "Times New Roman", Times, serif;
color:#202020;
background-color:#fff;
width:67px;
}
#left2 p.newsPic{
display:block;
background:url(Extreme-Updates-images/news_pic.gif) 0 0 no-repeat;
margin:0 16px 29px 0;
padding:0;
float:left;
width:91px;
height:119px;
}
#left2 p.newsText{
font:normal 12px/17px Verdana, Arial, Helvetica, sans-serif;
color:#251C00;
background-color:#fff;
padding:0;
margin:0;
float:left;
display:block;
width:340px;
}
#left2 p.newsText span{
color:#006882;
background-color:#fff;
font:bold 12px/17px Verdana, Arial, Helvetica, sans-serif;
}
#left2 p.newsText a.linkNews{
font:normal 12px/17px Verdana, Arial, Helvetica, sans-serif;
color:#1B7D01;
background-color:inherit;
text-decoration:underline;
padding:0;
margin:0;
}
#left2 p.newsText a.linkNews:hover{
color:#1B7D01;
background-color:#F7F0D9;
text-decoration:none;
}
#left2 a.link3{
background:url(Extreme-Updates-images/bottom_link_bg.gif) 0 0 no-repeat #F0FFFF;
padding:0 0 0 54px;
font:bold 18px/39px Georgia, "Times New Roman", Times, serif;
color:#144848;
width:390px;
height:41px;
display:block;
text-decoration:none;
float:left;
}
#left2 a.link3:hover{
background:url(Extreme-Updates-images/bottom_link_bg_hover.gif) 0 0 no-repeat;
}
/*------------------------------------------------left2--------------------*/
/*------------------------------------------------mid2--------------------*/
#mid2{
width:204px;
float:left;
background-color:#C58C00;
color:#000;
padding:8px 13px 54px 13px;
margin:0;
}
#mid2 h2{
width:70px;
height:50px;
background:url(Extreme-Updates-images/member_login_bg.gif) 0 0 no-repeat;
padding:16px 73px 0 61px;
font:bold 14px/17px Verdana, Arial, Helvetica, sans-serif;
color:#fff;
background-color:inherit;
margin:0;
}
#mid2 h2 span{
font:bold 24px/17px Georgia, "Times New Roman", Times, serif;
color:#fff;
background-color:#543C00;
display:block;
}
#mid2 form{
width:188px;
padding:0 8px;
margin:0;
background-color:#543C00;
color:#000;
}
#mid2 form input.txtBox{
width:169px;
height:19px;
border-left:#808080 solid 1px;
border-top:#808080 solid 1px;
border-right:#D4D0C8 solid 1px;
border-bottom:#D4D0C8 solid 1px;
/*font:normal 11px/19px Arial, Helvetica, sans-serif;*/
color:#000;
background-color:#fff;
margin:0 0 14px 0;
padding:0 0 0 17px;
float:left;
}
#mid2 form label.yellow{
width:124px;
height:18px;
background-color:#EDBA3C;
color:#000;
padding:0 30px 0 34px;
margin:0 0 7px 0;
display:block;
float:left;
}
#mid2 form label.yellow a.register{
width:120px;
height:18px;
background-color:#EDBA3C;
color:#000;
font:bold 11px/18px Verdana, Arial, Helvetica, sans-serif;
text-align:center;
text-decoration:none;
}
#mid2 form label.yellow a.register:hover{
text-decoration:underline;
}
#mid2 form input.go{
background:url(Extreme-Updates-images/btn_go.gif) 0 0 no-repeat #543C00;
width:63px;
height:16px;
font:bold 12px/16px Verdana, Arial, Helvetica, sans-serif;
color:#144848;
float:right;
border:none;
cursor:pointer;
}
#mid2 p.memberBottom{
background:url(Extreme-Updates-images/member_login_bottom.gif) 0 0 no-repeat;
width:204px;
height:43px;
margin:0;
padding:0;
display:block;
}
/*------------------------------------------------mid2--------------------*/
/*------------------------------------------------right2--------------------*/
#right2{
width:212px;
float:right;
padding:36px 0 0 0;
}
#right2 h2{
background:url(Extreme-Updates-images/support_div.gif) 0 0 repeat-x;
width:202px;
height:22px;
display:block;
margin:0 0 16px 0;
}
#right2 h2 span{
font:bold 24px/17px Georgia, "Times New Roman", Times, serif;
color:#202020;
background-color:#fff;
width:106px;
}
#right2 ul{
width:212px;
padding:0;
margin:0;
font-size:0;
}
#right2 ul li{
padding:0;
margin:0;
height:24px;
}
#right2 ul li a{
display:block;
background:url(Extreme-Updates-images/arrow_green2.gif) 0 7px no-repeat #fff;
padding:0 0 0 15px;
font:normal 12px/24px Verdana, Arial, Helvetica, sans-serif;
color:#202020;
margin:0;
text-decoration:none;
}
#right2 ul li a:hover{
color:#202020;
background-color:#FFFAE8;
}
/*------------------------------------------------right2--------------------*/
/*------------------------------------------------bodyBot--------------------*/
/*------------------------------------------------footer--------------------*/
#footerMain{
width:100%;
height:137px;
background:url(Extreme-Updates-images/footer_bg.gif) 0 0 repeat-x;
}
#footer{
width:628px;
margin:0 auto;
height:137px;
position:relative;
}
#footer ul{
width:628px;
position:absolute;
left:0px;
top:20px;
}
#footer ul li{
float:left;
color:#FFFAE8;
background-color:inherit;
font:normal 11px/18px Verdana, Arial, Helvetica, sans-serif;
}
#footer ul li a{
color:#FFFAE8;
background-color:inherit;
font:normal 11px/18px Verdana, Arial, Helvetica, sans-serif;
padding:0 11px;
text-decoration:none;
}
#footer ul li a:hover{
color:#FFFAE8;
background-color:#C58C00;
}
#footer p.copyright{
font:normal 11px/18px Verdana, Arial, Helvetica, sans-serif;
color:#fff;
background-color:inherit;
position:absolute;
left:170px;
top:39px;
}
#footer a.xht{
width:66px;
height:15px;
background:url(Extreme-Updates-images/xhtml_bg.gif) 0 0 no-repeat;
font:bold 10px/15px Verdana, Arial, Helvetica, sans-serif;
color:#C58C00;
background-color:inherit;
position:absolute;
left:216px;
top:60px;
margin:0;
text-align:center;
text-decoration:none;
}
#footer a.xht:hover{
background:url(Extreme-Updates-images/xhtml_bg_hover.gif) 0 0 no-repeat;
color:#000;
background-color:inherit;
}
#footer a.cs{
width:66px;
height:15px;
background:url(Extreme-Updates-images/xhtml_bg.gif) 0 0 no-repeat;
font:bold 10px/15px Verdana, Arial, Helvetica, sans-serif;
color:#C58C00;
background-color:inherit;
position:absolute;
left:287px;
top:60px;
margin:0;
text-align:center;
text-decoration:none;
}
#footer a.cs:hover{
background:url(Extreme-Updates-images/xhtml_bg_hover.gif) 0 0 no-repeat;
color:#000;
background-color:inherit;
}
#footer p.design{
display:block;
width:203px;
height:12px;
padding:2px;
position:absolute;
left:182px;
top:84px;
font:bold 12px/12px Verdana, Arial, Helvetica, sans-serif;
color:#FFFAE8;
background-color:inherit;
text-transform:none;
}
#footer p.design a.link{
font:bold 12px/12px Verdana, Arial, Helvetica, sans-serif;
color:#FFFAE8;
background-color:inherit;
text-transform:none;
text-decoration:none;
padding:2px;
}
#footer p.design a.link:hover{
color:#fff;
background-color:#090909;
}
/*------------------------------------------------footer--------------------*/
</style>
</head>
<body>
<!--header start -->
<div id="headerMain">
<div id="header">
<a href="index.html"><img src="images/logo.gif" alt="extreme updates" width="411" height="96" border="0" /></a>
<h1>Morbi in turpis Nullavulputate</h1>
<ul class="top">
<li class="hover">home</li>
<li><a href="#" class="about">about us</a></li>
<li><a href="#" class="contact">contact</a></li>
</ul>
<p>Donec convallis nisl sed nequemauris vulputate leo sit Quisque consequat lacus nec nunc aenean</p>
<ul class="nav">
<li><a href="#">Blog</a></li>
<li><a href="#">Support </a></li>
<li><a href="#">Solutions</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Ideas</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<br class="spacer" />
</div>
<!--header end -->
<!--bodyTopMain start -->
<div id="bodyTopMain">
<!--bodyTop start -->
<div id="bodyTop">
<!--left1 start -->
<div id="left1">
<h2><span>Why</span>extreme updates...</h2>
<p class="leftText1">Extreme Updates is a <span>free, tableless, W3C-compliant</span> web design layout by Template World. This template has been tested and proven compatible with all major browser environments and operating systems. You are free to modify the design to suit your tastes in any way you like.</p>
<p class="leftText1">We only ask you to not remove <span>"Design by Template World"</span> and the link http://www.templateworld.com from the footer of the template.</p>
<a href="#" class="link2">Morbi vel nunc aecenas urna arcu</a>
<br class="spacer" />
</div>
<!--left1 end -->
<!--mid1 start -->
<div id="mid1">
<p class="mid1Top"></p>
<h2>Important<span>Services</span></h2>
<p class="linkTop"></p>
<ul>
<li><a href="#">Malesuada a, pretium</a></li>
<li><a href="#">Facinia, tincidunt id,</a></li>
<li><a href="#">Jigula. Aliquam nec Dm.</a></li>
<li><a href="#">Maecenas Aliquet.</a></li>
<li><a href="#">Vestibulum Non eninec</a></li>
<li><a href="#">AuguIortaconsequat</a></li>
<li><a href="#">Iacus nec nunc. Aenean </a></li>
<li><a href="#">placerat Vestibulum</a></li>
<li class="bdrNo"><a href="#">lobortis mollis .</a></li>
</ul>
<br class="spacer" />
</div>
<!--mid1 end -->
<!--right1 start -->
<div id="right1">
<a href="#" class="jobBanner"></a>
<h2>what should<span>best for</span></h2>
<a href="#" class="rightLogo"></a>
<a href="#" class="viewMore">View more</a>
</div>
<!--right1 end -->
<br class="spacer" />
</div>
<!--bodyTop end -->
<br class="spacer" />
</div>
<!--bodyTopMain end -->
<!--bodyBotMain start -->
<div id="bodyBotMain">
<!--bodyBot start -->
<div id="bodyBot">
<!--left2 start -->
<div id="left2">
<h2><span>News</span></h2>
<p class="newsPic"></p>
<p class="newsText"><span>Vestibulum ante ipsum primis in faucis</span>orci luctus et Pellentesque placerat. Sed neque. Nam eros dui, dapibus id, fermentum sit amet, ullamcorper vel, lacus. Etiam ultricies ligula sed<br />
<a href="#" class="linkNews">tincidunt id, ligula. Aliquam</a> turpis, lacinia id, sollicitudin vel, aliquet eu, tortor. Donec at erat et ipm porttitor consequat.</p>
<a href="#" class="link3">Quisque consequat lacus nec nunc</a>
<br class="spacer" />
</div>
<!--left2 end -->
<!--mid2 start -->
<div id="mid2">
<h2>Members<span>Login</span></h2>
<form name="memberLogin" action="#" method="post">
<input type="text" name="name" class="txtBox" value="-Enter your name-" />
<input type="password" name="password" class="txtBox" value="-Your Password-" />
<label class="yellow"><a href="#" class="register">Want To Register ?</a></label>
<input type="submit" name="go" value="Go" class="go" />
<br class="spacer" />
</form>
<p class="memberBottom"></p>
<br class="spacer" />
</div>
<!--mid2 end -->
<!--right2 start -->
<div id="right2">
<h2><span>Support</span></h2>
<ul>
<li><a href="#">Vestibulum ante ipsum primis</a></li>
<li><a href="#">in Faucis orci luctus et ultrices</a></li>
<li><a href="#">re Cubilia Curae; Cras vel dui.</a></li>
<li><a href="#">Vivamus lacinia est non ante.</a></li>
<li><a href="#">Phasellus elit tellus, condimid,</a></li>
<li><a href="#">Euismod</a></li>
<li><a href="#">Vestibulum ante ipsum prim in</a></li>
<li><a href="#">Faucibusorci</a></li>
</ul>
<br class="spacer" />
</div>
<!--right2 end -->
<br class="spacer" />
</div>
<!--bodyBot end -->
<br class="spacer" />
</div>
<!--bodyBotMain end -->
<!--footer start -->
<div id="footerMain">
<div id="footer">
<ul>
<li><a href="#">Blog</a>|</li>
<li><a href="#">Support</a>|</li>
<li><a href="#">Solutions</a>|</li>
<li><a href="#">Testimonials</a>|</li>
<li><a href="#">Developments</a>|</li>
<li><a href="#">Ideas</a>|</li>
<li><a href="#">Projects</a>|</li>
<li><a href="#">Contact Us</a></li>
</ul>
<p class="copyright">©Extreme Updates. All rights reserved.</p>
<a href="http://validator.w3.org/check?uri=referer" target="_blank" class="xht">XHTML</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank" class="cs">CSS</a>
<p class="design">Designed By: <a href="http://www.templateworld.com/" target="_blank" class="link">Template World</a>
| <a class="link" href="http://www.cssportal.com/">CSS Portal</a></p>
</div>
</div>
<!--footer end -->
</body>
</html>
Related examples in the same category