473,549 Members | 2,670 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Javascript onclick command not working in IE

3 New Member
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="javascrip t:void(0);" onclick="docume nt.concimage.sr c='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 44071
Banfa
9,065 Recognized Expert Moderator Expert
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:

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
Locallearning
3 New Member
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
Feb 23 '06 #3
Banfa
9,065 Recognized Expert Moderator Expert
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
Locallearning
3 New Member
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
AndiZett
1 New Member
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>
Oct 5 '06 #6

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

Similar topics

1
2000
by: Julius Mong | last post by:
Dear all, according to the ASV3 manual known problem section, to make an <a> execute some Javascript onclick: http://www.google.co.uk/search?q=cache:OPDjMJfL50sJ:www.adobe.com/svg/indepth/pdfs/ReadMewin.pdf+adobe+svg+javascript+problem&hl=en&ie=UTF-8#5 4. Due to design limitations of Netscape, avoid using HTML with the following form: <a...
1
2692
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 working, but it only worked for IE. You can see a working version here: http://www.publicpen.com/designer/mcControlPanel.php username: designer...
2
9150
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 in the status bar 'Symantec Corporation' whenever anyone mouses over (onMouseOver) my image or link OR when one clicks while holding the left mouse...
1
2640
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 Page_Load(object sender, System.EventArgs e) { if(! Page.IsPostBack)
9
4894
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 fine from a link. The button does bring up the popup window, but when I press the links on the page, it doesn't return or close the window. ...
0
1050
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 a single memo field in an Oracle db. The functionality of the .hta is working, but I'm having troublefiguring out how to pass the text to the db....
24
6297
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 have on his site, a Javascript Calculator for working out the cost of what they want, for example: 1 widget and 2 widglets = £5.00
3
7761
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 onload="javascript:hidediv()"> DOES work in IE, but the rest does not. Any ideas? Thanks a lot Tim here is the code ----------------------------
0
7451
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7720
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
6044
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5369
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5088
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3501
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3483
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1061
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
764
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

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.