Javascript onclick command not working in IE

**Banfa** · Feb 23 '06, 01:33 PM

Looks like you have the achor code wrong I don't think this bit

NAME="concimage " img src="images/conc1"

should be in it just

<A HREF="javascrip t:void(0);" onclick="docume nt.concimage.sr c='images/conc1.jpg';" >

You also have a repeated img src="images/conc1" in you image tag.

Try using the HTML validator at www.w3c.org

Personally I would not access the image in the way you have, I would give the img an id rathe than a name and use the method getElementById to access it thus:

Code:

<script type="text/javascript">
function SetImageImage( id, file )
{
  var element = document.getElementById( id );

  if ( element && element.src )
  {
    element.src = file;
  }
}
</script>

<a href="javascript:void(0);" onclick="SetImageImage( 'concimage', 'images/conc1.jpg');return FALSE;" >
<img id="concimage" src="images/pm.jpg" alt="pm.jpg thumbnail" height="116" width="500" border="1" ></a>

**Locallearning** · Feb 23 '06, 08:14 PM

Thanks for the help, but I just tried your script and the same problem occurs - you still need to left click the box then right click and choose show picture.

The same thing happens for all the boxes on the page that have the same code.
I've now put the code back the way I originally had it
<A HREF="javascrip t:void(0);" onclick="docume nt.images[0].src='images/conc1.jpg';">
on the page http://www.locallearning.org.uk/timeline.html

And you can see your suggestion at http://www.locallearning.org.uk/timeline3.html

If you or any one else can help, I'd love to hear about it. I've asked several people now without success.

Pete

**Banfa** · Feb 23 '06, 11:37 PM

OK I have got home now and now that I can try you page in both IE and Firefox the actual problem is more obvious.

I have the solution too :D

The problem is that when you change image[n].src the new image is not loaded, Firefox and Netscape in response to this seem to load the image where as IE does nothing. The reason it works at home is that nothing needs loading, it is already there.

The solution to you problem is to preload the images, you can do this with this code

Code:

<script type="text/javascript">
<!--
    if (document.images)
    {
        image1 = new Image(500, 116);
        image1.src = "conc1.jpg";
    }
//-->
</script>

Which I inserted into the head.

I have uploaded a cut down example of your page to http://www.puttingdownroots.me.uk/~e.../timeline.html with this modification and it appears to work.

On a styling issue if you are hand writing you pages then you should probably lay out you files in a more readable format. This makes find problems know and future maintenance. The sort of layout I use is
[html]
<html>
<head>
<title>Page title</title>
<meta ... >
</head>
<body>
<table>
<tr>
<td>
content
</td>
</tr>
</table>
</body>
</html>
[/html]

Using tabs instead of spaces stops the whitespace taking too much actual space, I don't stick rigerously to this but putting in enough whitespace to make the code reable is worth it in the long run.

Of course if you used a wysiwyg editor to create your page ignore all that waffle.

If you are dabbling with CSS then put a DOCTYPE at the top of your HTML files. This will force browsers into standards complient mode and make the all act morte similarly in the way the interpret the CSS. Without it they all run in quirks mode (and if it's IE it's very quirky) where the tend to implement there own individual behaviour.

You can find examples of all the normal DOCTYPEs at http://www.w3.org/QA/2002/04/valid-dtd-list.html. I would recomend HTML 4.01 or XHTML 1.0 TRANSITIONAL to start with as they are the loosest specifications and allow you to get away with the most. Move onto the STRICT doctypes later.

While your at W3C site why not use there HTML validator at http://validator.w3.org. Unfortunately you current page has 94 validation errors.

**Locallearning** · Feb 24 '06, 08:44 AM

Many thanks,
You're actually the second person to come back with this solution, though your code is simpler.
And thanks also for the other tips,

Pete

**AndiZett** · Oct 5 '06, 02:30 PM

I found the following solution:

// load the image in this temporay object
var tempImage = new Image();

// this function does the job
function showPreview(img name,imgurl) {
tempImage.onloa d=function setImage() {document.getEl ementById(imgna me).src = tempImage.src;}
// set the source of the tempImage - the onload-function does the rest.
tempImage.src = '/_images/' + f.value;
}

<a href="javascrip t:void(0);" onclick="showPr eview('concimag e','images/conc2.jpg');">
<img name="concimage " id="concimage" src="images/conc1">
</a>

Javascript onclick command not working in IE

Javascript onclick command not working in IE

Comment

Comment

Comment

Comment

Comment