PDA

View Full Version : Associate an element hyperlink to an image in a slideshow.



QPISCES
02 Dec 2010, 01:07 AM
Hi all, and thanks for reading!

I am trying to set up a site which has six separate slide-shows, where each image in those slide-shows is hyperlinked to a different page element (such as "#img_expand_1a"). The element will be a hidden div that displays on click vi a 'zoom.js' script. I have the whole thing working in two separate pages, but can't figure out how to associate the separate elements with the individual slides (images).

I put together a simplified example:

<html>
<head>
<title>Example</title>
<script type="text/javascript">
function swapImage(id, path)
{
var el = document.getElementById(id);
el.count = el.count || 0;
el.src = path[el.count];
el.count = (el.count + 1) % path.length;
}
function slideshow() {
setInterval(function () {
swapImage('slide1', [
"images/1a.jpg",
"images/1b.jpg",
"images/1c.jpg"
]);
swapImage('slide2', [
"images/2a.jpg",
"images/2b.jpg",
"images/2c.jpg"
]);
swapImage('slide3', [
"images/3a.jpg",
"images/3b.jpg",
"images/3c.jpg"
]);
swapImage('slide4', [
"images/4a.jpg",
"images/4b.jpg",
"images/4c.jpg"
]);
swapImage('slide5', [
"images/5a.jpg",
"images/5b.jpg",
"images/5c.jpg"
]);
swapImage('slide6', [
"images/6a.jpg",
"images/6b.jpg",
"images/6c.jpg"
]);
}, 3000);
}
onload = slideshow;
</script>
</head>
<body onload="slideshow()">
<img name="slide1" alt="" id="slide1" height="300" width="300" src="images/1a.jpg" />
<img name="slide2" alt="" id="slide2" height="300" width="300" src="images/2a.jpg" />
<img name="slide3" alt="" id="slide3" height="300" width="300" src="images/3a.jpg" />
<img name="slide4" alt="" id="slide4" height="300" width="300" src="images/4a.jpg" />
<img name="slide5" alt="" id="slide5" height="300" width="300" src="images/5a.jpg" />
<img name="slide6" alt="" id="slide6" height="300" width="300" src="images/6a.jpg" />
</body>
</html>

What I need to know is this:

How do I
hyperlink "1a.jpg" from "slide1" to "#img_expand_1a" (which I will add)
and
hyperlink "1b.jpg" from "slide1" to "#img_expand_1b" (which I will add)
etc.

I could set it up to link "slide 1" itself to an element, but this is not what I want. I want each image to link to a different element.

Any ideas? I'm stuck.

Thanks in advance!