Simple Image swapper needs more functionality

[marco]

Hi everyone,
I would like to add hyperlinks to the text appearing or another when
working with the onClick event. Unfortunately this version is pulling
the text from the (title) attribute withing the <a> tag. Is there a
way to display linkable text in addition to the text and image that are
showing.

Does anyone know how to make this work with the script or another
method of tagging? Please help!

Here is a link to what I'm talking about.
http://www.freshoffshoots.com/gallery_exp/swapper.html


-------------The code--------------------------------

function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue =
whichpic.title;

} else {
document.getElementById('desc').childNodes[0].nodeValue =
whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}
</script>
<!--These are the links -->
<div>
<ul>
<li><a onclick="return showPic(this)" href="fullsize/B&H35cam.jpg"
title="B&H 35cam" > <img src="thumb/B&H35cam_thumb.jpg" width="45"
height="42" border="0"></a></li>
<li><a onclick="return showPic(this)" href="fullsize/cinelin.jpg"
title="Cinema scene" ><img src="thumb/cinelin_thumb.jpg" width="45"
height="46" border="0"></a></li>
<li><a onclick="return showPic(this)" href="fullsize/devrycam.jpg"
title="devrycam is one good camera"><img src="thumb/devrycam.jpg"
width="45" height="31" border="0"></a></li>
</ul>

<!-- this is the description -->
<div id="display">
<div id="summary">
<p id="desc">Start with default text or the text of the image
showing</a></p>
</div>

<!-- this is the image -->
<div id="picbox">
<img id="placeholder" src="fullsize/B&H35cam.jpg" alt="Isn't it lovely"
/>
</div>
</div><!--end summary-->
</div><!--end display-->
</body>
</html>

 

[plato]

I would like to add hyperlinks to the text appearing or another when
working with the onClick event. Unfortunately this version is pulling
the text from the (title) attribute withing the <a> tag. Is there a
way to display linkable text in addition to the text and image that are
showing.

To understand you better, you've got a picture and a caption that you
want to change when a text hyperlink is clicked? Or you want the
caption to be a hyperlink? Or something else?

-plato

 

[marco]

Hi plato,
You are close on both but the caption to be hyperlinked seems the
closest.
My Ideal would be by sampling through each thumbnail three parts are
present, a picture, a caption and a link.
The how to introduce the hyperlink to the present format is my
question.

marco

 

[plato]

I guess what I'm asking is this:

What is static? What is dynamic? What on the static side initiates
the dynamic side to change?

-plato

 

[marco]

The small thumbnails on top are the static part. Inside the <a> tag of
each thumbnail you will see the onClick command and after it, the href
and the title. The href and the title are the static parts.

The dynamic parts are desc and placeholder. Both of these are css
layout id's e.g. <div id="desc"> and <div id="placeholder">.

You can see in the actual javascript how (desc) is related to the
(title) attribute and (placeholder) is related (href).

This is the best I can do to describe the parts. If this doesn't make
sense I may have to scrap using this script.
What I do know is the limitations to it are based on using the
attributes of the <a> to create the replacement parts. It isn't
possible to add an additional <a href=""> withing any attribute. I
believe an all new script would have to be created in order to expand
beyond the boundaries of this one.

If you see a way to create linking text to this script I would be
grateful, if not don't knock yourself out. It may not be possible in
the current form of the script.