I want to change the header image onmouseover -
Is some javascript method possible
Presently have used this method to make it a link
----------header.php-------------
<div id="header">
<div class="headerimg_1" onclick="location.href='http://abc';" style="cursor: pointer; ">
</div>
<div class="headerimg_2" onclick="location.href='http://xyz';" style="cursor: pointer; ">
</div>
</div>
------following in css----------
.headerimg_1{
height: 300px;
width: 314px;
background: url(images/1.gif);
}
#headerimg_2 {
height: 300px;
width: 222px;
background: url(images/2.gif);
}
---------------<<>>-----------
Also an unrelated doubt-
if I do not give header image in css and inside the tag give <img...> - It won't work. Why is it so?
TIA
it was <a...> <img...> </a>
Did it like this but still a issue
(here i am using a:hover property to change the header image but when
it is over link1 i want different image and diff for link2 - which am not able to achieve with this method... I can possibly achieve by cutting my header into 2 parts but if it can be done using only single header image will prefer that)
changed css -----
#header {
background-color: #73a0c5;
margin: auto;
padding: 0;
height: 300px;
width: 960px;
background: url(images/sky.gif)
}
#header a:hover{
background-color: #73a0c5;
margin: auto;
padding: 0;
height: 300px;
width: 960px;
background: url(images/3.gif)
}
#link1 {
float: left;
position:absolute;
width : 314px;
height: 300px;
margin-left: 0px;
margin-top: 0px;
}
#link2 {
float: left;
position:absolute;
width : 222px;
height: 300px;
margin-left: 314px;
margin-top: 0px;
}
php....
<div id="header">
<a id="link1" href="http://as.com" title="Subscribe with RSS"></a>
<a id="link2" href="http://as.com" title="Subscribe with RSS"></a>
lahoti