473,394 Members | 1,701 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,394 software developers and data experts.

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 44069
Banfa
9,065 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,065 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

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

Similar topics

1
by: Julius Mong | last post by:
Dear all, according to the ASV3 manual known problem section, to make an <a> execute some Javascript onclick: ...
1
by: lawrence | last post by:
This PHP function prints out a bunch of Javascript (as you can see). This is all part of the open source weblog software of PDS (www.publicdomainsoftware.org). We had this javascript stuff...
2
by: Kevin Lyons | last post by:
Hello, Can anyone assist me with what I am trying to do with the following code (six different scenarios to try to make the functionality work correctly)? I want to always (and ONLY) display...
1
by: Muhammad Abdullah | last post by:
Hi am having some problems with the javascript confirm. i have it working fine on one page and it doesnt even pop up at the other. The code on the working page is, private void...
9
by: tshad | last post by:
This is from my previous post, but a different issue. I have the following Javascript routine that opens a popup page, but doesn't seem to work if called from an asp.net button. It seems to work...
0
by: Guest | last post by:
I'm working with a .hta file that uses javascript to produce 3checkboxes. If any checkbox is checked, a corresponding text boxappears. I'd like to be able to pass the data entered in thetext boxes to...
24
by: firstcustomer | last post by:
Hi, Firstly, I know NOTHING about Javascript I'm afraid, so I'm hoping that someone will be able to point me to a ready-made solution to my problem! A friend of mine (honest!) is wanting to...
3
by: safiratec | last post by:
Hi, I want to show a div depending of the value of a <select> option, using 2 functions hidediv() and showdiv() - it is working fine in firefox, but not in IE (tested with IE 6 and 7). <body...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.