How to make an image change onmouseover? - HTML Forums

Help-my-html · 10-24-2009, 10:40 PM

Right now i'm trying to make it so that an image is on my webpage, and when someone rolls their mouse over it, it changes to another image. It's a simple image conversion, all I changed is the arrow's depth.

Thanks!
Help-my-HTML

ontherocks · 10-27-2009, 06:06 AM

Sample Code

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Image Change on MouseOver</title>
<meta name="" content="">
<script type="text/javascript">
function mouseover()
{
document.getElementById("id1").src ="image2.jpg";
}

function mouseout()
{
document.getElementById("id1").src ="image1.jpg";
}
</script>
</head>
<body>
<img border="0" src="image1.jpg" id="id1" onmouseover="mouseover()" onmouseout="mouseout()" />
</body>
</html>

hypertml · 11-09-2009, 11:02 PM

How would you create multiple image's changing cause i am trying to create a navigation bar and i want it to change when my mouse goes over it.

coothead · 11-10-2009, 09:21 AM

Hi there hypertml,

and a warm welcome to these forums.

Please show us the code for you navigation and the images that are to be used for it.

hypertml · 11-11-2009, 11:40 AM

How to you create multiple onmouseover images not just one
here is the code

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Image Change on MouseOver</title>
<meta name="" content="">
<script type="text/javascript">
function mouseover()
{
document.getElementById("id1").src ="image2.jpg";
}

function mouseout()
{
document.getElementById("id1").src ="image1.jpg";
}
</script>
</head>
<body>
<img border="0" src="image1.jpg" id="id1" onmouseover="mouseover()" onmouseout="mouseout()" />
</body>
</html>