innerHTML IE issues

mboso · Apr 4, 2005

I have a function that works in firefox, but is having some issues in
IE. What it does is place an image in a specified cell, when an icon in
the adjacent cell is clicked. I have to click the link half a dozen
times for the full size image to load in the adjacent cell. It appears
to load %20 of the image then stops. In firefox, I click once and it
works. any ideas?

Here is the offending code, and well at the HTML. I don't know if it
matters, but I put all my javascript functions in a separate file.

function changeContent(id,shtml) {
if (document.getElementById || document.all) {
var repl = document.getElementById? document.getElementById(id):
document.all[id];
if (repl && typeof repl.innerHTML != "undefined") repl.innerHTML
= shtml;
}
}

var s1='<img src="images/large/scan0001_c.jpg">'
var s2='<img src="images/large/scan0002_c.jpg">'
var s3='<img src="images/large/scan0003_c.jpg">'
var s4='<img src="images/large/scan0004_c.jpg">'
var s5='<img src="images/large/scan0005_c.jpg">'
var s6='<img src="images/large/scan0006_c.jpg">'

*************************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Sheila Turner</title>

<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">

<script language="javascript" type="text/javascript"
src="../../scripts/generate_address_script.js"></script>
<link href="../../css/style.css" rel="stylesheet" media="all"
type="text/css" title="Main stylesheet">
</head>

<body>

<div align="center" id="padtable">
<table id="frametable">
<tr>
<td id="rtd">
Sheila Turner
</td>

<td>
<div id="vericons1"><a href="javascript:;"
onclick="changeContent('rtd',s1)"><img
src="images/small/scan0001_i_sq.jpg"></a></div>
<div id="vericons"> <a href="javascript:;"
onclick="changeContent('rtd',s2)"><img
src="images/small/scan0002_i_sq.jpg"></a></div>
<div id="vericons"><a href="javascript:;"
onclick="changeContent('rtd',s3)"><img
src="images/small/scan0003_i_sq.jpg"></a></div>
<div id="vericons"><a href="javascript:;"
onclick="changeContent('rtd',s4)"><img
src="images/small/scan0004_i_sq.jpg"></a></div>
<div id="vericons"><a href="javascript:;"
onclick="changeContent('rtd',s5)"><img
src="images/small/scan0005_i_sq.jpg"></a></div>
<div id="vericons"><a href="javascript:;"
onclick="changeContent('rtd',s6)"><img
src="images/small/scan0006_i_sq.jpg"></a></div>
</td>

</tr>
</table>
</div>
</body>
</html>

Randy Webb · Apr 4, 2005

mboso said:
I have a function that works in firefox, but is having some issues in
IE. What it does is place an image in a specified cell, when an icon in
the adjacent cell is clicked.

No, what it does is change the innerHTML of a specified cell. It is far
more efficient (and cross-browser) to simply change the source of the image.

I have to click the link half a dozen times for the full size image
to load in the adjacent cell. It appears to load %20 of the image then
stops. In firefox, I click once and it works. any ideas?

Give your image a name attribute, change its .src property via the
document.images collection.

Here is the offending code, and well at the HTML. I don't know if it
matters, but I put all my javascript functions in a separate file.

function changeContent(id,shtml) {
if (document.getElementById || document.all) {
var repl = document.getElementById? document.getElementById(id):
document.all[id];
if (repl && typeof repl.innerHTML != "undefined") repl.innerHTML
= shtml;
}
}
var s1='<img src="images/large/scan0001_c.jpg">'
var s2='<img src="images/large/scan0002_c.jpg">'
var s3='<img src="images/large/scan0003_c.jpg">'
var s4='<img src="images/large/scan0004_c.jpg">'
var s5='<img src="images/large/scan0005_c.jpg">'
var s6='<img src="images/large/scan0006_c.jpg">'

var imageList = new Array()
imageList[1]='scan0001_c.jpg';
imageList[2]='scan0002_c.jpg';
imageList[3]='scan0003_c.jpg';
imageList[4]='scan0004_c.jpg';
imageList[5]='scan0005_c.jpg';
imageList[6]='scan0006_c.jpg';

var path = 'images/large/';

function changeImage(newImage){
if (document.images){
document.images['myImage'].src = path + imageList[newImage];
}
}

And then have your html as such:

<img src="something.jpg" name="myImage".....>

And then your links look something like this:

<a href="noJS.html"
onclick="changeImage('');return false">
Change the Image</a>

Sort by number of characters	1	Nov 2, 2023
Help with code	0	Jun 12, 2022
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
JQuery hover error	3	Aug 28, 2023
Help with Visual Lightbox: Scripts	2	May 3, 2023
Only one table shows up with the information	2	Mar 29, 2023
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
I am trying to detect Which image id="" was clicked ?	22	Jan 3, 2023

innerHTML IE issues

mboso

Randy Webb

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads