problems with images using innerhtml in ie

[Ben]

Hi all
I have a problem with a page I'm working on. It's a cateloge with a
collection of thumbnails which, when clicked on display a larger
picture in the middle. The problem that I have with internet explorer
is that sometimes it works, sometimes it loads part of the image and
sometimes it doesn't load the image at all. is there any way I can get
this to work without preloading the images (there are a lot of images
on the page and it would take ages to preload them all, and most of
them probably won't need to be loaded). Any advice would be greatly
appreciated. Below is the code I'm using with an html stub.

<script type="text/javascript">
<!--


function changeImgContent(id,image_src)
{
var before = "<img src='";
var after = "' height='255' width='470'>";
var el = document.getElementById(id);
el.innerHTML = before+image_src+after;
}
function changeTxtContent(id,desc) {
var el = document.getElementById(id);
el.innerHTML = desc;
}
function doublechange(image_src,description)
{
changeImgContent('image_cell',image_src);
changeTxtContent('desc_cell',description);
}
-->
</script>

<table>
<tr>
<td id='image_cell'>image goes here</td>
<td id='desc_cell'>description here</td>
</tr>
</table>
<a href='javascript:;' onclick='doublechange("one.jpg","image
one")'>one</a>
<a href='javascript:;' onclick='doublechange("two.jpg","image
two")'>two</a>
<a href='javascript:;' onclick='doublechange("three.jpg","image
three")'>three</a>

 

[Julian Turner]

Hi all
Hi

[snip]
<a href='javascript:;' onclick='doublechange("one.jpg","image
one")'>one</a>

Your problem may lie with href='javascript:;', why have you included
this?

Try replacing with:

<a href='#' onclick='doublechange("one.jpg","image one")'>one</a>

Or use something else, e.g.:-

<span onclick='doublechange("one.jpg","image one")'>one</span>

Regards

Julian

 

[Matt Kruse]

I have a problem with a page I'm working on.

I suspect the root cause of your problem is that you do not return false
from your onClick event.
Also, I'm not sure why you want to change the innerHTML of the image cell,
rather than just changing the src attribute of an image tag within the cell.

But overall, I would recommend changes like the following:

<script type="text/javascript">
function changeImgContent(id,image_src) {
var el = document.getElementById(id);
el.innerHTML = '<img src="'+image_src+'" height="255" width="470">';
}
function changeTxtContent(id,desc) {
var el = document.getElementById(id);
el.innerHTML = desc;
}
function doublechange(image_src,description) {
changeImgContent('image_cell',image_src);
changeTxtContent('desc_cell',description);
}
</script>

<table>
<tr>
<td id='image_cell'>image goes here</td>
<td id='desc_cell'>description here</td>
</tr>
</table>
<a href="one.jpg" target="_blank"
onclick="doublechange(this.href,'image one');return false;">one</a>
<a href="two.jpg" target="_blank"
onclick="doublechange(this.href,'image one');return false;">two</a>
<a href="three.jpg" target="_blank"
onclick="doublechange(this.href,'image one');return false;">three</a>

 

[Ben]

thank you for your help, I tried changing the src instead of the
innerhtml and it works perfectly now, should have thought of that in
the first place. Thanks again.