once clicked - change button image and link to display in iframe

eliecer · 04-11-2012, 02:58 AM

Hi guys,

I've been breaking my brains for few hours, I already searched online and I found nothing so far.

What I wanna do....

I have 5 different images linked to 5 different websites. Once the image is clicked, the first link will be displayed in an iframe, and the image will change to the second one. Once we click on the second image, the second link will be displayed using the same iframe, and so on.

The code changes the images,but I dunno how to deal with the link to the websites.

This is the code:

Code:

<html>
<head>
<title>Testing...</title>
</head>

<script type="text/javascript">
	imgs=Array("1.png","2.png","3.png","4.png","5.png");
	links=Array("www.vbct.ca","www.cnn.com","www.castanet.net","www.yahoo.com","www.cubaweb.cu");
	
	var x=0;

	function change() {
		document.getElementById("changes").src=imgs[++x];
		if (x==4) {
		x=-1;
		}
	}
	
	if (!imgs[x+1]) {
	x=-1;
	}
</script>

<body>

<div>
	<iframe src="http://www.vbct.ca" style="border: 0; position:relative; top:0; left:0; right:0; bottom:0; width:100%; height:400px;" name="page" width="100%"></iframe>
</div>
<br /><br />

<div>
<a href="#" target="page"><img src="1.png" id="changes" alt="alttext" onmousedown="change()" style="cursor: pointer;" /></a>
</div>

</body>
</html>

And this is the link to the test page:

http://www.virtualbc.ca/sites/test/

xelawho · 04-11-2012, 04:44 AM

I assume that those links you have in the example are just examples, otherwise you will run into cross-domain problems...

Code:

<html>
<head>
<title>Testing...</title>
</head>

<script type="text/javascript">
	imgs=Array("1.png","2.png","3.png","4.png","5.png");
	links=Array("www.vbct.ca","www.cnn.com","www.castanet.net","www.yahoo.com","www.cubaweb.cu");
	
	var x=0;

	function change() {
	y=++x%imgs.length;
		document.getElementById("changes").src=imgs[y];
		document.getElementById("theframe").src="http://"+links[y];
	}
	
</script>

<body>

<div>
	<iframe id="theframe" src="http://www.vbct.ca" style="border: 0; position:relative; top:0; left:0; right:0; bottom:0; width:100%; height:400px;" name="page" width="100%"></iframe>
</div>
<br /><br />

<div>
<a href="" target="page" onclick="change(); return false"><img src="1.png" id="changes" alt="alttext"/></a>
</div>

</body>
</html>

eliecer · 04-11-2012, 08:12 AM

Yes, those are only examples to illustrate the problem.

eliecer · 04-11-2012, 09:23 AM

Thanks xelawho!

Once I finish the project, I will post the link here to show the results.

Once again, thanks man, you saved my day.