Changing image if user go over Link

@toplisekNov 16.2005

I have cod eif user goes over Link and Image changes. But it will not be there if user goes away (not over link). How to do that image will be there all the time if user goes over Link?

Need help :rolleyes:

[code=html] <SCRIPT LANGUAGE=”JavaScript”> <!–

IMAGE01 = “on.gif” IMAGE02 = “off.gif”

function imgover(imgname){ imgname.src = IMAGE01 }

function imgout(imgname){ imgname.src = IMAGE02 } //–> </SCRIPT> [/code]

and code for image:

[code=html] <IMG NAME=”IMAGE01″ SRC=”off.gif” WIDTH=10 HEIGHT=10 BORDER=0> <A HREF=”http://www.Mywebsite.com” onMouseOver=”imgover(IMAGE01)” onMouseOut=”imgout(IMAGE01)”>Altavista</A> [/code]

to post a comment

JavaScript

22 Comments(s) _↴

@konithomimoNov 16.2005 — #your code should be:

<i>
 </i>&lt;SCRIPT type="text/javascript"&gt;
 
 function imgover(imgname)
 {
 document.getElementByName(imgname).src = "on.gif";
 }
 
 function imgover(imgname)
 {
 document.getElementByName(imgname).src = "off.gif";
 }
 &lt;/SCRIPT&gt;

@konithomimoNov 16.2005 — #Or you can just change your link code:

<i>
 </i>&lt;IMG NAME="IMAGE01" SRC="off.gif" WIDTH=10 HEIGHT=10 BORDER=0&gt; 
 &lt;A HREF="http://www.Mywebsite.com" onMouseOver="javascript:document.getElementByName('IMAGE1').src = 'on.gif';
 " onMouseOut="javascript:document.getElementByName('IMAGE1').src = 'off.gif';
 "&gt;Altavista&lt;/A&gt;

@toplisekauthorNov 16.2005 — #I have put JavaScript:

[code=html]
 <SCRIPT LANGUAGE="JavaScript">
 IMAGE01 = "image14.gif"
 IMAGE02 = "off.gif"
 function imgover(imgname){ imgname.src = IMAGE01 }
 function imgout(imgname){ imgname.src = IMAGE02 }
 
 </SCRIPT>
 [/code]

and your last code:

[code=html]
 <IMG NAME="IMAGE01" SRC="off.gif" WIDTH=10 HEIGHT=10 BORDER=0> <A HREF="http://www.Mywebsite.com" onMouseOver="imgover(IMAGE01)" onMouseOut="imgout(IMAGE01)">Altavista</A>
 
 
 [/code]

It does not work. What do you think, but I have changed name

IMAGE1 to IMAGE01.Did you make mistake? I need also more links where the same image changes.

@konithomimoNov 17.2005 — #If you had looked at my code you would see that you can't just have:

imgname.src

you have to find the element first. That is why I put:

document.getElementByName(imgname).src = "on.gif";

in your case it should be:

document.getElementByName(imgname).src = IMAGE01;

Which would make your entire script:

<i>
 </i>&lt;SCRIPT type="text/javascript"&gt;
 IMAGE01 = "image14.gif"
 IMAGE02 = "off.gif"
 function imgover(imgname){ document.getElementByName(imgname).src = IMAGE01; }
 function imgout(imgname){ document.getElementByName(imgname).src = IMAGE02; }
 &lt;/SCRIPT&gt;

@KravvitzNov 18.2005 — #getElementByName() does not exist.

You want getElementsByName(), note the 's'.

Thus
document.getElementByName(imgname).src
should be
document.getElement[b]s[/b]ByName(imgname)[b][0][/b].src

@toplisekauthorNov 18.2005 — #I kindly ask you to write me the whole script that will work.

@redfoxNov 18.2005 — #try this, it work, but you have to assign the pictures okay, hope this help

<html>

<head><title></title>

<script language="javascript">

if(document.images)

{

//img1 and img2 are variable

img1=new Image

img2=new Image

//picture1.gif and picture2.gif is the picture you will store in the variable

img1.src="picture1.gif"

img2.src="picture2.gif"

}

else

{

img1=""

img2=""

document.buttonchange= ""

}

</script>

</head>

<body>

<a href="www.somesite.com" onmouseover="document.buttonchange.src=img2.src" onmouseout = "document.buttonchange.src =

img1.src"><img src="picture1.gif" border="0" name="buttonchange" /></a>

<body>

</html>

@konithomimoNov 18.2005 — #Just use the code below. You wont need a script or anything, just put it where you have your link and image at:

<i>
 </i>&lt;IMG NAME="IMAGE01" id="IMAGE01" SRC="off.gif" WIDTH=10 HEIGHT=10 BORDER=0&gt; 
 &lt;A HREF="http://www.Mywebsite.com" onMouseOver="javascript:document.getElementById('IMAGE1').src='image14.gif';
 " onMouseOut="javascript:document.getElementById('IMAGE1').src='off.gif';
 "&gt;Altavista&lt;/A&gt;

@toplisekauthorNov 19.2005 — #thanks for all replies.

I will be accurate. There are images for Image1, Image2, Image3, Image4.

Main.gif should change when user goes over link which is shown as image1, Image2, Image3, Image4.

and the code is the following:

[code=html]
 
 <img src="Image1" /><img src="Image2" /><img src="Image3" /><img src="Image4" />
 <table>
 <tr>
 <td><img name="" src="main.gif" border="2" width="250" height="125"
 align="middle" alt=""></td>
 </tr>
 </table>
 [/code]

Please help me with script to do this? Need help... ?

@KravvitzNov 20.2005 — #Give <img src="main.gif" ...> an ID. For example, I'll call it "mainimg".

&lt;a href="" onmouseover="document.getElementById('mainimg').src=this.href;" onmouseour="document.getElementById('mainimg').src='main.gif';"&gt;&lt;img src="Image1" alt="short description of image" /&gt;&lt;/a&gt;

@toplisekauthorNov 20.2005 — #I have in Main Image 4 different kind of images. How to do this?

If mouse goes over image1.gif it will be shown mainimage1a.gif

If mouse goes over image2.gif it will be shown mainimage2a.gif

If mouse goes over image3.gif it will be shown mainimage3a.gif

If mouse goes over image4.gif it will be shown mainimage4a.gif

Can you suggest me all script for this? Need help.

@konithomimoNov 20.2005 — #You can do it with an array, through hardcoding into variables in a function, or just by hardcoding into the onmouseover and onmouseout functions of the images:

<i>
 </i>function switchGIF(ID)
 {
 var i;
 var baser = "http://mysite/html/"
 var myarray=new Array('image1.gif','mainimage1a.gif','image2.gif','mainimage2a.gif','image3.gif','mainimage3a.gif','image4.gif','mainimage4a.gif');
 
 
 for(i=0;i&lt;myarray.length;i++)
 {
 if ((document.getElementById(ID).src==(baser + myarray[i])) &amp;&amp; ((i%2)==0))
 {
 document.getElementById(ID).src=myarray[i+1];
 i= myarray.length;
 }
 
 else if ((document.getElementById(ID).src==(baser + myarray[i])) &amp;&amp; ((i%2)==1))
 {
 document.getElementById(ID).src=myarray[i-1];
 i= myarray.length;
 }
 }
 }
 
 &lt;/script&gt;

That is it with an array. Just replace the value of baser (http://mysite/html/) with the path for your images, and then call the function from the onmouseover function of your image.

onmouseover="switchGIF(this.id)"

Here is is with just hardcoding into the onmouseover and onmouseout functions:

<i>
 </i>&lt;img name="img1" id="img1" src="mainimage1a.gif" onmouseover="this.src=image1.gif;" onmouseout="this.src=mainimage1a.gif;"&gt;
 &lt;img name="img2" id="img2" src="mainimage2a.gif" onmouseover="this.src=image2.gif;" onmouseout="this.src=mainimage2a.gif;"&gt;
 &lt;img name="img3" id="img3" src="mainimage3a.gif" onmouseover="this.src=image3.gif;" onmouseout="this.src=mainimage3a.gif;"&gt;
 &lt;img name="img4" id="img4" src="mainimage4a.gif" onmouseover="this.src=image4.gif;" onmouseout="this.src=mainimage4a.gif;"&gt;

@toplisekauthorNov 21.2005 — #I have put the following in body and it does not work. Please give me suggestion what I should change in code in body.

I have given path for images:

var baser = "http:.../images1"

My code is in body:

[code=html]
 <img name="img1" id="img1" src="mainimage1a.gif" onmouseover="switchGIF(this.id)" onmouseout="this.src=mainimage1a.gif;">
 <img name="img2" id="img2" src="mainimage2a.gif" onmouseover="switchGIF(this.id)" onmouseout="this.src=mainimage2a.gif;">
 <img name="img3" id="img3" src="mainimage3a.gif" onmouseover="switchGIF(this.id)" onmouseout="this.src=mainimage3a.gif;">
 <img name="img4" id="img4" src="mainimage4a.gif" onmouseover="switchGIF(this.id)" onmouseout="this.src=mainimage4a.gif;">
 [/code]

@konithomimoNov 22.2005 — #If you are going to use switchGIF() then you don't need all of that in your body. Just do something like this:

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;script type="text/javascript"&gt;
 function switchGIF(ID)
 {
 var i;
 var baser = "http://www.mysite.com/html/"
 var myarray=new Array('image1.gif','mainimage1a.gif','image2.gif','mainimage2a.gif','image3.gif','mainimage3a.gif','  image4.gif','mainimage4a.gif');
 
 
 for(i=0;i&lt;myarray.length;i++)
 {
 if ((document.getElementById(ID).src==(baser + myarray[i])) &amp;&amp; ((i%2)==0))
 {
 document.getElementById(ID).src=myarray[i+1];
 i= myarray.length;
 }
 
 else if ((document.getElementById(ID).src==(baser + myarray[i])) &amp;&amp; ((i%2)==1))
 {
 document.getElementById(ID).src=myarray[i-1];
 i= myarray.length;
 }
 }
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;img name="img1" id="img1" src="mainimage1a.gif" onmouseover="switchGIF(this.id)" onmouseout="switchGIF(this.id)"&gt;
 &lt;img name="img2" id="img2" src="mainimage2a.gif" onmouseover="switchGIF(this.id)" onmouseout="switchGIF(this.id)"&gt;
 &lt;img name="img3" id="img3" src="mainimage3a.gif" onmouseover="switchGIF(this.id)" onmouseout="switchGIF(this.id)"&gt;
 &lt;img name="img4" id="img4" src="mainimage4a.gif" onmouseover="switchGIF(this.id)" onmouseout="switchGIF(this.id)"&gt;
 &lt;input type="text" id="one" size="80"&gt;
 &lt;/body&gt;
 &lt;/html&gt;

And replace baser with whatever URL is necessary. For example, if your images have a direct URL like:

http://www.mysite.com/images/mainimage1a.gif

then baser is:

http://www.mysite.com/images/

@toplisekauthorNov 23.2005 — #Hi,

I have tested. There are no image shown. Are you sure that

var baser = "http://..." works? It seems that there are no images.

@konithomimoNov 24.2005 — #As long as you put in your site address as baser. You can't leave it as "http://..." it has to be "http://www.yoursite.com/" or whatever the path is that holds your images.

@toplisekauthorNov 27.2005 — #I'm maybe wrong as I tested but baser does not work. What do you think?

It seams that images lpath is wrong.

@konithomimoNov 27.2005 — #It works, I even tried it on some free online html editors and other online programs. Try using it at this location:

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables3

Try the code like this. I added in code to display the src in the textbox so that you can see that it changes . . . so you must have your paths wrong:

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;script type="text/javascript"&gt;
 function switchGIF(ID)
 {
 var i;
 var baser = "http://www.w3schools.com/html/"
 var myarray=new Array('image1.gif','mainimage1a.gif','image2.gif','mainimage2a.gif','image3.gif','mainimage3a.gif','    image4.gif','mainimage4a.gif');
 
 
 for(i=0;i&lt;myarray.length;i++)
 {
 if ((document.getElementById(ID).src==(baser + myarray[i])) &amp;&amp; ((i%2)==0))
 {
 document.getElementById(ID).src=myarray[i+1];
 i= myarray.length;
 }
 
 else if ((document.getElementById(ID).src==(baser + myarray[i])) &amp;&amp; ((i%2)==1))
 {
 document.getElementById(ID).src=myarray[i-1];
 i= myarray.length;
 }
 }
 document.getElementById('one').value = document.getElementById(ID).src;
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;img name="img1" id="img1" src="mainimage1a.gif" onmouseover="switchGIF(this.id)" onmouseout="switchGIF(this.id)"&gt;
 &lt;img name="img2" id="img2" src="mainimage2a.gif" onmouseover="switchGIF(this.id)" onmouseout="switchGIF(this.id)"&gt;
 &lt;img name="img3" id="img3" src="mainimage3a.gif" onmouseover="switchGIF(this.id)" onmouseout="switchGIF(this.id)"&gt;
 &lt;img name="img4" id="img4" src="mainimage4a.gif" onmouseover="switchGIF(this.id)" onmouseout="switchGIF(this.id)"&gt;
 &lt;input type="text" id="one" size="80"&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@toplisekauthorNov 28.2005 — #Hi

thanks. It works link for each image as you quoted. Problem is now just that images are not visible.

@toplisekauthorNov 28.2005 — #Hi

thanks. It works link for each image image1 image2, image3, image4 as you quoted.

1. Problem is now that images image1 image2, image3, image4 are not visible. I have moved them to directory as file and it works,

2. What is && ((i%2)==0)) Meant to be doing?

3. when I go e.g. over image4.gif it will be shown in text box

http://www....mainimage4a.gif.

[B]Directory[/B] is the same as location of file where is your code. So, the path when you go over images 1 to 4 is wrong. This is not the path where are images

for example: /images

@konithomimoNov 28.2005 — #that is saying that if i/2 has no remainder then do whatever. Basically it was used to see whether you had an even or odd numbered image loaded (as in the array). If it was an even number then you would load the next image in the array, but if i was odd then you would load the image before it in the array.

@toplisekauthorNov 30.2005 — #thanks

Please help also with 1 and 3.

Also in #JavaScript _↴

Can't get JavaScript output to display I need to use this slideshow more than once modifying values in cookies

Success!

Help @toplisek spread the word by sharing this article on Twitter...

Tweet This

Changing image if user go over Link

22 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Changing image if user go over Link

22 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

22 Comments(s) _↴

Also in #JavaScript _↴