Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

    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/

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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>

  • Users who have thanked xelawho for this post:

    eliecer (04-11-2012)

  • #3
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yes, those are only examples to illustrate the problem.

  • #4
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •