Switching Images with Javascript

[letsgetsilly]

I have what I hope is a fairly easy question, but I've been out of Java for a while and I don't know how to do it. I use the following script to change images on mouseover and onmouseout to change the image when it is hovered over.

function movepic(img_id,img_src)
{
var e = document.getElementById(img_id).src = img_src;
}

I would like to load the images in javascript instead of sending the location of the images repeatedly in my html.

If possible, I'd like to have an over(img_id) and out(img_id) function that will replace the image on its own. My images are all named 'name.jpg' 'name-over.jpg' and 'name-out.jpg'.

In java I know it is possible to add on an "over" or "out" to the image name, but I can't get it to work. Any help is greatly appreciated. I'll put my current code calling below:

<a href="Index.aspx" onmouseover="javascript:movepic('Home','Images/Home-over.jpg')" onmouseout="javascript:movepic('Home','Images/Home.jpg')">

Ideal would be:

<a href="Index.aspx" onmouseover="javascriptver('Home')" onmouseout="javascript:movepic('Home')">

[oxbaker]

try this link out:

[javascripter.net...]

thanks,

[rocknbil]

What's wrong with

<a href="Index.aspx" onmouseover="Home.src='Images/Homeover.jpg';" onmouseout="Home.src='Images/Home.jpg';"><img src="Home.jpg" name="Home.jpg" id="Home.jpg"></a>

?

If you're having trouble try removing or escaping the dash, in some situations it may give you grief. (\-)

[texmex]

You would be better off doing this with CSS. Then the mouse over effect would work EVEN if your users have javascript disabled.

for instance

<style type="text/css">
A.name
 {width:yourimagewidthhere px;
 background:url("name-over.jpg");
 }
A.name:hover
 {background:url("name-out.jpg");
 
 }
</style>

Then in your html you would just have:
<a id="name" href="index.html"></a>

Although you would have to include a separate style definition for each of your links, this could be easily achieved, programatically, if you are producing your document using server side scripting.