hover over image

Hi,
How do you get a picture to move when hovering your mouse over it?(with html)

I have this but it has to reload the image every time

 
<img
border="0"
src="img/image1.jpg"
onmouseover="this.src='img/image2.jpg';" onmouseout="this.src='img/image1.jpg';"
/>

HTML:

Image1 & 2 would be combined into one so when someone hovers over it, the image would just move and reveal the other image.

Thanks

 

The following will hide an image when you hover over it and show it when you move the mouse away:

<img src="img/image1.jpg" border="0" id="image1" onmouseover="document.getElementById('image1').style.display='none';" onmouseout="document.getElementById('image1').style.display='inline';" />

Code (markup):

 

If the above hasn't helped you, please let me know. You will probably need to use some CSS to get one image to hide behind another, so let me know if you need help with that.

 

That's not what I'm looking for.
I saw one time a simple code in html with no css one time but don't remember when and how.

...I'm not sure if it had the onmouseover thing but you had to specify what when you hovered over it it would move in a certain direction x number of pixels

 

You could use the following code to move an image x and/or y pixels on hover over:

<script type="text/javascript">
function move_image(image,x,y) {
	image = document.getElementById(image);
	image.style.position = "relative";
	image.style.top = x+"px";
	image.style.left = y+"px";
}
</script>
<img src="image.jpg" id="image1" onmouseover="move_image('image1',100,100)" />

Code (markup):

 

i found the site where i first saw it
http://www.onderhond.com/blog/work/changing-html-images-on-hover

your script is good but it does not return the image to the original position and it does not hide part of the image
thanks though, i appreciate the help

 

Ah, I see. You're welcome for the help, I'm glad you found what you were looking for.