469,266 Members | 2,023 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,266 developers. It's quick & easy.

Javascript onclick command not working in IE

I've just uploaded this page http://www.locallearning.org.uk/timeline.html
the onclick command should change the displayed images in the boxes on the left hand side of the window. The onclick command works on my home PC in IE 6 and they work on Firefox and Netscape, though not with IE 6 now it's on line.

This is a simplified bit of the first image script in question that I've tried to play around with, but if anyone can help I'd greatly appreciate it.

<A HREF="javascript:void(0);" onclick="document.concimage.src='images/conc1.jpg';" NAME="concimage" img src="images/conc1">
<img src="images/pm.jpg" alt="pm.jpg thumbnail" height="116" width="500" border="1" img src="images/conc1.jpg" NAME="concimage"></A>

Many thanks,

Pete
Feb 23 '06 #1
5 43678
Banfa
9,064 Expert Mod 8TB
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="javascript:void(0);" onclick="document.concimage.src='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:

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function SetImageImage( id, file )
  3. {
  4.   var element = document.getElementById( id );
  5.  
  6.   if ( element && element.src )
  7.   {
  8.     element.src = file;
  9.   }
  10. }
  11. </script>
  12.  
  13. <a href="javascript:void(0);" onclick="SetImageImage( 'concimage', 'images/conc1.jpg');return FALSE;" >
  14. <img id="concimage" src="images/pm.jpg" alt="pm.jpg thumbnail" height="116" width="500" border="1" ></a>
  15.  
Feb 23 '06 #2
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="javascript:void(0);" onclick="document.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
Feb 23 '06 #3
Banfa
9,064 Expert Mod 8TB
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

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. <!--
  3.     if (document.images)
  4.     {
  5.         image1 = new Image(500, 116);
  6.         image1.src = "conc1.jpg";
  7.     }
  8. //-->
  9. </script>
  10.  
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.
Feb 23 '06 #4
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
Feb 24 '06 #5
I found the following solution:

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

// this function does the job
function showPreview(imgname,imgurl) {
tempImage.onload=function setImage() {document.getElementById(imgname).src = tempImage.src;}
// set the source of the tempImage - the onload-function does the rest.
tempImage.src = '/_images/' + f.value;
}

<a href="javascript:void(0);" onclick="showPreview('concimage','images/conc2.jpg');">
<img name="concimage" id="concimage" src="images/conc1">
</a>
Oct 5 '06 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Julius Mong | last post: by
1 post views Thread by Muhammad Abdullah | last post: by
reply views Thread by Guest | last post: by
24 posts views Thread by firstcustomer | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.