Newbie Javascript problem...

typk · 15 May 2008 at 09:19

Hi i am trying to use this code provided below but insted of using word links i want to use images. So i have been given some code which is ment to allow what i am doing but i am confused on how to implement it.
I have really never used javascript before so please help.
Original Code:
http://www.pageresource.com/jscript/jhover3.htm

Given Code:

<body>
<script>
function change1(NewImage){
var x=document.getElementById("ThisIsTheImgToChange")
x.src=NewImage
}
</script>

<img src="/path/to/image" onMouseover="change1('new/path/to/pic')" onMouseout="change2('old/path/to/pic') />
<img src="/path/to/image" onMouseover="change1('new/path/to/pic')" onMouseout="change2('old/path/to/pic') />
<img src="/path/to/image" onMouseover="change1('new/path/to/pic')" onMouseout="change2('old/path/to/pic') />

<img id="ThisIsTheImgToChange" src="/path/to/OriginalImage" />
</body>

I just want to know how i will use it and maybe an example.

Ladforce · 15 May 2008 at 09:46

Im not really sure what you are asking for here? All i can see thats missing is that you need to add a function "change2" to revert the image when the mouse leaves the img. You just need to change the 'new/path/to/pic' to an actual image location and the image "ThisIsTheImgToChange" will change to it on a onmouseover event.

ChrisB · 15 May 2008 at 09:55

just rename change2 to change1 and substitute '/path/to/image' 'new/path/to/pic' '/path/to/OriginalImage' with the images you want to use.

I believe this monstrosity of code was something I posted in another thread.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
function change1(NewImage){
var x=document.getElementById("ThisIsTheImgToChange");
x.src=NewImage;
}
//]]>
</script>
<img src="./Pic1.jpg" onmouseover="change1('./Pic1.jpg')" onmouseout="change1('./Original.jpg')" />
<img src="./Pic2.jpg" onmouseover="change1('./Pic2.jpg')" onmouseout="change1('./Original.jpg')" />
<br/>
<img id="ThisIsTheImgToChange" src="./Original.jpg" alt="#########" />
</body>
</html>

It can be dumbed down further, but I tried to do it in a way that was easy to follow

typk · 15 May 2008 at 12:44

oh i get it now, its so simple.
Im sorry for posting this when it must have seemed so easy .
Thanks for clearing it up though.