img and iframes

here is my code snippet

<img src="images/home.jpg" height="40" width="150" /> <img src="images/contact.jpg" height="40" width="150" /> 

and

<iframe src="aboutseels.php" scrolling="auto" width="100%" height="360" ></iframe> 

now, i was wondering if there is a way that when the client clicks one of the images, the src of the iframe will change??

for example if i click on the second image the src of the iframe will be src="contactus.php"

2 Answers

I think you set a name attribute on the iframe and wrap the images in an a tag with the target attribute to be the same name.

<iframe name="foo" ...></iframe> <a href="newlink" target="foo">...</a> 

you could use the javascript library jQuery and then use the click event to capture clicks on the images it could look something like this

$(function(){ $('img').click(function(){ iframeSrc = this.attr('title'); $('iframe').attr('src',iframeSrc); }); }); 

and the html could look like this then

 <img src="images/home.jpg" height="40" width="150" title="" /> <img src="images/contact.jpg" height="40" width="150" title=""/> <iframe src="aboutseels.php" scrolling="auto" width="100%" height="360" ></iframe> 

Or use regular html and use target

<a target="iframe" href=""><img src="images/home.jpg" height="40" width="150" title="" /></a> <a target="iframe" href=""><img src="images/contact.jpg" height="40" width="150" title=""/></a> <iframe src="aboutseels.php" scrolling="auto" width="100%" height="360" ></iframe>