Hi everyone
I am building a website for a school project . I drew some pictures which will be used as link buttons. I want them to change into another picture when someone hovers over the image so they know it is click able. I also want to display a little note when they are over the image with the mouse. I can't use Flash to create this so it has to be pure html and javascript only. Please help me.

Hi -
You can use css-only, too. Make your link image and the hover image below it and note the width and 1/2 height of this combined image. Links are often displayed as list items, so try them in an unordered list.

As for the css, if each link img. is a diff. size, you'll have to create a unique id for each. For the a:link and a:visited states, the background image position will be different then the a:focus and a:hover ones - which will be moved up by the amt. of px in 1/2 the image's height.

[Sorry not to write it all out, but I was just checking-in before bedtime!
If you still need some help tomorrow, maybe there'll be some time ]

Good luck,
El

LJK is right, you can use css to make link have hover effect.

HTML

<span class="rollover">
<a href="htp://link.whatever"><img src="pic.png" />
</a>
</span>



CSS

.rollover a {
display:block;
width: 100px;
height:50px;
background: url("pic-link.png") 0 0 no-repeat;
text-decoration: none;
border-width:0;
}
.rollover a:hover {
background: url("pic-hover.png") 0 0 no-repeat;
}

.rollover a:active {
background: url("pic-link.png") 0 0 no-repeat;color:#fff;
}


css technique is valid but as we know, IE have bugs that make flickring in this method.

there are other methods, one of popular technique is suckerfish (use javascript), you can find it somewhere by google