PDA

Click to See Complete Forum and Search --> : Changing an image and text "onclick"

climberusa
11-12-2004, 12:28 AM
I'm very new to javascript and i came across a script on this forum that changes an image when you click on a corresponding link. My purpose for this is to show a product. That part was easy. What I'm trying to figure out now is how to also have some text appear below the image that describes the product. I tried to just put the text in the image but the quality was too low to be acceptable. Here is the script I am using:

<script type="text/javascript"><!--
function switchImg(i){
document.images["image1"].src = i;
}
//--></script>

<a onclick="switchImg('image.jpg');">product xyz</a>

<img src="images/blank.gif" alt="Image 1" name="image1" width="300" height="600">

So, below the image I would like for there to appear text describing the image/product.
Anyone that can help me out here would be saving me thousands of braincells. Thanks in advance!
BonRouge
11-12-2004, 02:24 AM
This should do it :

Add this to your css:

<style type="text/css">
<!--
.visible {display:block;}
.hidden {display:none;}
-->
</style>

And add a few lines to your javascript :

<script type="text/javascript"><!--
function switchImg(i){
document.images["image1"].src = i;
var option=['wine.jpg','beer.jpg','whisky.jpg'];
for(var t=0; t<option.length; t++)
{ obj=document.getElementById(option[t]);
obj.className=(option[t]==i)? "visible" : "hidden"; }
}

//--></script>

And in the html give the text ad id which is the same as the image name. The text will automagically appear below the image when you click on the link.
</head>

<body>
<div><a onclick="switchImg('wine.jpg');">wine</a></div>
<div><img src="images/blank.gif" alt="Image 1" name="image1" width="300" height="300" />
<div id="wine.jpg" "class="hidden">This is some wine.</div>
<div id="beer.jpg" "class="hidden">This is some beer.</div>
<div id="whisky.jpg" "class="hidden">This is some whisky.</div>
</div>
</body>
</html>

This works - I've tested it. If you have any problems - please let me know.

Cheers
climberusa
11-12-2004, 11:56 AM
Thank you very much for your help! I really appreciate it. No more headaches
Jeff
climberusa
11-13-2004, 02:38 PM
Well, now that i've checked i realized that in IE the text isn't hidden at all. it does work fine in mozilla though. any ideas?
BonRouge
11-13-2004, 06:13 PM
I'm really sorry - small typing error.

This :

<div id="wine.jpg" "class="hidden">This is some wine.</div>
<div id="beer.jpg" "class="hidden">This is some beer.</div>
<div id="whisky.jpg" "class="hidden">This is some whisky.</div>
</div>

should be thiis :

<div id="wine.jpg" class="hidden">This is some wine.</div>
<div id="beer.jpg" class="hidden">This is some beer.</div>
<div id="whisky.jpg" class="hidden">This is some whisky.</div>
</div>

(there should be no quotation mark before -class-).
Try it again - it should be fine.

Sorry again.
climberusa
11-13-2004, 07:02 PM
i really appreciate all of your help and time in responding. i changed the code as you said but to no avail. perhaps i'm doing something wrong. i'll check on it i guess. thanks again
jeff
climberusa
11-13-2004, 07:19 PM
ok, i had forgotten to remove one set. thanks for all of your help!!!
jeff
BonRouge
11-13-2004, 07:29 PM
Check it out (http://cheers-sendai.com/test/climber-switch.htm)
climberusa
11-18-2004, 09:32 PM
well, i've been working on this site and today realized that in IE, the images don't appear anymore unless i right click and click "show image". the weird thing is, when i test it on my computer (i am using dreamweaver by the way) it works fine but when i put it on the server it no longer shows the images. it does work perfectly in mozilla. i should check a few other browswers i suppose but too many people use Ie to overlook this. anyways, does anyone have any ideas what this "bug" could be"
jeff
BonRouge
11-19-2004, 01:13 AM
That is weird. Can I see it?
climberusa
11-19-2004, 12:00 PM
here is the url:
http://www.2ndtonone.net/starters/starters.html
and by the way i am now recreating the whole site via CSS thanks to this forum
jeff
BonRouge
11-20-2004, 03:49 AM
Hey Jeff,
I don't know what the problem is/was, but I've simplified the javascript and now it seems fine (though you may have to sort out the alignment (I think I deleted your align="center"))
Before, you seemed happy with your image changing, so I thought if you changed the text too it would be OK. I was actually thinking it might be better to just have the image and text of each in a div and have the divs being shown and hidden. So now I've done that and it seems OK. (Am I making sense here?). This won't be changing the address of one image and then adding the text div - it'll just be adding the div - the appropriate image is in the div.
Anyway, have a look here (http://cheers-sendai.com/test/starters.html) and I hope you'll see what I mean.
Any problems or questions - I'll see what I can do.
As for changing to CSS - is this page an example of that? I hope not, because well... it's a table. One thing I do notice is that your menu seems to kind of jump up and down - that'll be because of your table...Good luck with the change-over. It'll be frustrating but worth it.
Cheers,
Steve
climberusa
11-20-2004, 01:48 PM
Steve,
I'm amazed you have gone to such a seemingly great length to help. i appreciate it. no, i obviously haven't finished the css change-over, but i'm determinied to do it. anyways, yes it seems to work now so i'll change my code to reflect your changes. thanks again!!
jeff