Add Mouseover and link to image

[Coreper]

ive got this image [Header_Logo.png] and i want to add a mouseover image [Header_Logo_Active.png] and a hyperlink [index.htm] to it

does anyone know how to do this?

here is my image code:

<img border="0" src="../images/header/Header_Logo.png" width="280" height="260">

note: i dont want to use javascript, i would really like to use NO scripts and simple codes...

thanks in advance

[Mike567]

CSS a:hover{background-image:header.jpg;height:xxxpx;width:xxxpx;}

you want to put it in a style tag

[ɹəuəllıʍ ʇɐb]

Doesn't the alt text in the img tag automatically create mouse-over text?

[img=../images/header/Header_Logo.png]

[Mike567]

He wants the image to change on a mouse hovering over it.

[Coreper]

indeed

but how do i exactly need to do that:

i dont really get what you said in your first post, Mike...

[Mike567]

Goes in head tag

<style type="text/css">

.hoverlink a:hover{

background-image:url('hoverpic.png');

width:xxxpx;

height:xxxpx;

}

.hoverlink a{

background-image:url('nonhoverpic.png');

width:xxxpx;

height:xxxpx;

}

</style>

your link

<a href="anotherpage.html" class="hoverlink"></a>

[Coreper]

it doesnt work

here is what i did:

i added to the body:

<a href="home.htm" class="hoverlink">
<img border="0" src="../images/header/Header_Logo.png" width="280" height="260"></a>

i added to the header:

<style type="text/css">
.hoverlink a:hover{
background-image:url('../images/header/Header_Logo_Active.png');
width:280px;
height:260px;
}
.hoverlink a{
background-image:url('../images/header/Header_Logo.png');
width:280px;
height:260px;
}
</style>

the image does show a hyperlink [in the status bar], but the image doesnt change when the mouse hovers above it...

[Mike567]

you dont need the img tag

[Coreper]

but then it doesnt show anything...

[Mike567]

hmmm been a while try this

<a href="site.html"><div class="hoverlink"></div></a>

[Coreper]

still nothing...

[Mike567]

Have you actually got it up on the web if so send me a link and I will look at it.

[Coreper]

no i havent got it up yet

but

a friend of mine told me another, much easier way:

<img border="0" name="Logo" src="../images/header/Header_Logo.png"
onmouseover="Logo.src='../images/header/Header_Logo_Active.png'"
onmouseout="Logo.src='../images/header/Header_Logo.png'" width="280" height="260">

Thats exactly what i was looking for!!!

thanks for the help though!