onclick picture won’t show

@i-ZappDec 28.2004

I’ve created a page that has three hyperlinks, with the intention that when the link is clicked, an image will swap. Pretty rudimentary javascript, i’d imagine.

Problem is, that sometimes (?) the image doesn’t appear, especially on a ‘fresh’ computer. You can however get it to show by right-clicking the image and selecting ‘Show Picture’. Then it works. Not a very desireable requirement. Any ideas on how to correct it?

Here’s my page- ~~[URL]~~http://www.off-road.com/atv/kidskorner/suspension4.html[/URL]

And the hyperlink code (javascript is actually not two words)-

[CODE] <a href=”javascript:” onclick=”document.MyImage.src=’images/suspen2.gif’;”> here</a>to show table, or <a href=”javascript:” onclick=”document.MyImage.src=’images/suspen1.gif’;”> here</a> to show gragh, or <a href=”javascript:” onclick=”document.MyImage.src=’images/PC160001_small.JPG’;”> here</a>to show the tires [/CODE]

to post a comment

JavaScript

13 Comments(s) _↴

@CharlesDec 28.2004 — #This would be a great deal easier and work a great deal better if you just used an [url=http://www.w3.org/TR/html401/present/frames.html#edef-IFRAME]IFRAME[/url].

@CharlesDec 28.2004 — #And see http://validator.w3.org/check?verbose=1&uri=http%3A//www.off-road.com/atv/kidskorner/suspension4.html .

@i-ZappauthorDec 28.2004 — #geese. what took you so long! :rolleyes:

i'll take a look, but would like to know why the original didnt work.

@CharlesDec 28.2004 — #[i]Originally posted by i-Zapp [/i]

[B]geese. what took you so long! :rolleyes:

i'll take a look, but would like to know why the original didnt work. [/B][/QUOTE] What you have shouldn't work at all. You're asking for the image to be loaded just before the whole page is swapped out.

@i-ZappauthorDec 28.2004 — #regarding the IFRAME, do i essentially just replace the <a> tags with the <IFRAME> tags?

the validator is cool. re the images, it only tells me that the ALT parameter was missing. i can't imagine that would cause the problem.

since this is the javascript forum, i thought there'd be some "duh!" wisdom about why simple script doesnt work.

@i-ZappauthorDec 28.2004 — #What you have shouldn't work at all.[/QUOTE]

did you try my page? what happens when you 'show picture'?

any ideas on how to FIX it? i suppose i'm game for abandoning my original approach, but would like to really learn why it didnt work or how to make it work.

@CharlesDec 28.2004 — #[font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">

<head>

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

<meta name="Content-Script-Type" content="text/javascript">

<meta name="Content-Style-Type" content="text/css">

<title>Example</title>

<base href="http://www.off-road.com/atv/kidskorner/suspension4.html">

</head>

<body>

<iframe name="frame" height="263" width="330"></iframe>

<ul>

<li><a href="images/suspen2.gif" target="frame">Table</a>,</li>

<li><a href="images/suspen1.gif" target="frame">TGraph</a>,</li>

<li><a href="images/PC160001_small.JPG" target="frame">Tyres</a>.</li>

</body>

</html>[/font]

Yours is just too messed up to explain.

@KorDec 29.2004 — #I got you Charles! But what about the DTD strict? Your target woun't work, as you just said recently in another thread...

? ? :p

@Warren86Dec 29.2004 — #i-Zapp:

Using your table and changing name="MyImage" to id="MyImage":

<HTML>

<Head>

<Script Language=JavaScript>

var tableImg = "suspen2.gif"
  var graphImg = "suspen1.gif"
  var tiresImg = "PC160001_small.JPG"
  var imgPath = "images/"
 
  function swapImg(currImg){
 
   document.getElementById('MyImage').src = imgPath+currImg;
  }

</Script>

</Head>

<Body>

<table border="0" width="40%" align="right" bgcolor="#000000">

<tr>

<td width="100%" align="center">

<img border="0" src="images/suspen1.gif" id="MyImage" width="361" height="263">

</td>

</tr>

<tr>

<td width="100%">

click



<a href=javascript:swapImg(tableImg)>here</a> to show table, or



<a href=javascript:swapImg(graphImg)>here</a> to show gragh,  

or 

<a href=javascript:swapImg(tiresImg)>here</a> to show

the tires (shown in order)

</td>

</tr>

</table>

</Body>

</HTML>

@i-ZappauthorDec 29.2004 — #thanks to all.

admittedly, i am no js programmer. it's just something that helps me do my job more effectively.

i adopted Warren's approach, only because it was a slam-dunk, ready to go solution. thanks bud!

i also tried Chas solution, which although worked, required additioanl manipulation to get it look the way i wanted, which i lack the experience and time to figure out. thanks anyway. when i have some time, maybe i'll give it a go.

@Warren86Dec 29.2004 — #You're welcome. Good luck with your project.

@CharlesDec 29.2004 — #[i]Originally posted by Kor [/i]

[B]I got you Charles! But what about the DTD strict? Your target woun't work, as you just said recently in another thread...

? ? :p [/B][/QUOTE] Please note, I've used the transitional DTD. [i]From the HTML 4.01 Transitional DTD:[/i]

[b][font=monospace]This is the HTML 4.01 Transitional DTD, which includes presentation attributes and elements that W3C expects to phase out as support for style sheets matures. Authors should use the Strict DTD when possible, but may use the Transitional DTD when support for presentation attribute and elements is required.[/font][/b]

[i] http://www.w3.org/TR/html401/sgml/loosedtd.html [/i][/quote]This happens to be the one case where there is no real alternative to using the "target" attribute and so is the last place where the transitional DTD is appropriate.

@KorJan 03.2005 — #I know Chrales... I was just teasing u...?

Also in #JavaScript _↴

How to select ending tags JavaScript Money Thing...begginer: how can I get a TD width?

Success!

Help @i-Zapp spread the word by sharing this article on Twitter...

Tweet This

onclick picture won’t show

13 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

onclick picture won’t show

13 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #JavaScript _↴