onclick setAttribute href from a src
I'm working on a project to swap thumbnail images to a larger image when the thumbnail is selected and it's working ok however, I would now like the end users to be able to click on the larger image to show it in jquery.lightbox-0.5. The problem is that after selecting the thumbnail the loaded image does not have a href. I was hoping that I could pass the images src to the href using an onclick event, but I can't figure out how to make this work.
Here's my code
<script type="text/javascript">
function swaphref(image) {
document.getElementById('image').setAttribute('href', this.src);
//window.alert(document.getElementById('image').src);
}
</script>
<body>
<div class="productimage" id="gallery"><a onclick="swaphref(this)"><img id="image" img src="product_images/<?php echo $targetID; ?>/<?php echo $targetID; ?>.jpg" width="253" height="378" border="0" /></a></div>
</body>
Answer
Ok. I got this working. The 'a' was missing an id.
Here's the code.....
<script type="text/javascript">
function swaphref(imagehref) {
document.getElementById('imagehref').setAttribute('href', image.src);
//window.alert(document.getElementById('image').src);
//window.alert(document.getElementById('imagehref').href);
}
</script>
<body>
<div class="productimage" id="gallery"><a href="#" id="imagehref" onclick="swaphref(this)"><img id="image" img src="product_images/<?php echo $targetID; ? >/<?php echo $targetID; ?>.jpg" width="253" height="378" border="0" /></a></div>
</body>
Thank you to everyone who tried to help.