PDA

View Full Version : onclick change image with url



mdrawdy
09-27-2007, 08:27 PM
Hello - I'm trying to swap an image when a link is selected; however, I'd like the swapped image to have a link, as well. I've been able to accomplish the image swap like such:

<script type="text/javascript">
function changeIt(imageName,objName)
{
var obj = document.getElementById(objName);

var imgTag = "<img src='"+imageName+"' border='0' />";

obj.innerHTML = imgTag;

return;
}
</script>

<p><a href="../examples/example.html" target="ExampleIframe"
onclick="changeIt('../images/logo.gif','image1','http://www.example.com');">
Example 1</a></p>

I've defined "image 1" and placed it on the top of my page. My problem is that I want the changed images to have an href, as well. So, I want to click on text "Example 1", have the associated html display in my Iframe, while at the same time, changing an image at the top of my page (not the Iframe) and have that image clickable.
Any help is greatly appreciated.
Thanks!

Mr Moo
09-28-2007, 06:42 AM
But then just add the additional html required to the image and set the iframes src:


<script type="text/javascript">
function changeIt(imageName,objName,url)
{
var obj = document.getElementById(objName);

var imgTag = "<a href='" + url + "'><img src='"+imageName+"' border='0' /></a>";

obj.innerHTML = imgTag;

document.getElementById("iframe_id").src = url;
return;
}
</script>

mdrawdy
09-28-2007, 04:56 PM
...and if I wanted the image to link to an external page rather than the iframe?

Thanks!

tech_support
09-29-2007, 09:15 AM
Change this line:


document.getElementById("iframe_id").src = url;
to this for a popup:

window.open(url);
and this for the same page:

window.location=url;

mdrawdy
10-01-2007, 05:07 PM
I see what this does and thanks. Is it possible to have the image clickable but not open the link automatically. I would like to have my page load in the iframe and have an active clickable image at the top of the main page but only have it open if a user clicks on the image.