Multiple swap image fails in IE - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Multiple swap image fails in IE

swap image fails in ie

jamo101

6:02 pm on May 14, 2006 (gmt 0)

10+ Year Member

Hello, I'm having trouble getting a multiple swap image to work in IE.

A example page is @ (bottom of the page)

First use the CLICK HERE TO SHOW HIDE THE GALLERY link, then the Show Image link beside it. The links will be combined if I can get it to work.

It works for me in Firefox as intended (the images are swapped and the new images downloaded once the link is clicked) However in IE5, 5.5 and 6* the browser fails to download the new images.
The new images are drawn from the database when the page is called which replace a 1X1.jpg allowing optional viewing of the gallery.

Any ideas why it wont run in internet explorer?

Basic script below

<head>
<script type="text/javascript">
function changeSrc()
{
document.getElementById("no_1").src="gaggle_gallery/thumbnails/9__img_120x0."
document.getElementById("no_2").src="gaggle_gallery/thumbnails/9__img_120x0."
document.getElementById("no_3").src="gaggle_gallery/thumbnails/9__img_120x0."
document.getElementById("no_4").src="gaggle_gallery/thumbnails/9__img_120x0."
}
</script>
</head>
<body>

<a href="javascript:;" onclick="changeSrc()" value="Change image">Show Image</a>

<img src="site_images/1x1.gif" border="0" id="no_1" />
<img src="site_images/1x1.gif" border="0" id="no_2" />
<img src="site_images/1x1.gif" border="0" id="no_3" />
<img src="site_images/1x1.gif" border="0" id="no_4" />
</body>

[edited by: jatar_k at 2:37 pm (utc) on May 15, 2006]
[edit reason] no urls thanks [/edit]

siMKin

8:13 am on May 15, 2006 (gmt 0)

10+ Year Member

the only thing i can see is wrong is that you don't end with a semicolon (;) at the end of every line.
If that doesn't solve it, try to debug it with alerts, try to see what internet explorer does with the url by going there with a location.href for example, that sort of stuff.
For example:

<script type="text/javascript"> 
function changeSrc() 
{ 
var el = document.getElementById("no_1"); 
alert(el); 
var imgSrc = "gaggle_gallery/thumbnails/9__img_120x0."; 
alert(imgSrc); 
el.src = imgSrc; 
alert('we are going to check out the image now'); 
location.href = imgSrc; 
} 
</script>

jamo101

10:43 am on May 15, 2006 (gmt 0)

10+ Year Member

Thank you for taking the time to reply to my problem.
The error was a missing return false; statement at the end of the function. It should read:

<head>
<script type="text/javascript">
function changeSrc()
{
document.getElementById("no_1").src="gaggle_gallery/thumbnails/9__img_120x0."
document.getElementById("no_2").src="gaggle_gallery/thumbnails/9__img_120x0."
document.getElementById("no_3").src="gaggle_gallery/thumbnails/9__img_120x0."
document.getElementById("no_4").src="gaggle_gallery/thumbnails/9__img_120x0."
}
return false;
</script>
</head>
<body>

<a href="javascript:;" onclick="changeSrc()" value="Change image">Show Image</a>

<img src="site_images/1x1.gif" border="0" id="no_1" />
<img src="site_images/1x1.gif" border="0" id="no_2" />
<img src="site_images/1x1.gif" border="0" id="no_3" />
<img src="site_images/1x1.gif" border="0" id="no_4" />
</body>

Thanks again

siMKin

10:59 am on May 15, 2006 (gmt 0)

10+ Year Member

well, it might solve your problem, but it is not the (proper) solution. The return false you added is meaningless, since you put it outside of the function.
It does, however, add a ; to the whole javascript part. So i think that if you remove the return false; and write the js-code like this:

<script type="text/javascript">
function changeSrc()
{
document.getElementById("no_1").src="gaggle_gallery/thumbnails/9__img_120x0.";
document.getElementById("no_2").src="gaggle_gallery/thumbnails/9__img_120x0.";
document.getElementById("no_3").src="gaggle_gallery/thumbnails/9__img_120x0.";
document.getElementById("no_4").src="gaggle_gallery/thumbnails/9__img_120x0.";
}
</script>

your problem will be solved too (but in a proper way)

jamo101

11:39 am on May 15, 2006 (gmt 0)

10+ Year Member

Tried this solution but it went back to the old error again sorry.

Cheers