27 users online (1 members and 26 guests)  


  Results 1 to 4 of 4

Related

  1. Swap Image then Open Lightbox    Forum: Javascript Forum
    Replies: 0
  2. open iframe from other page link    Forum: Javascript Forum
    Replies: 0
  3. Open Program from HTML Link    Forum: HTML Forum
    Replies: 10
  4. Open A Directory With A Link    Forum: HTML Forum
    Replies: 5
  5. Link in web page won't open    Forum: HTML Forum
    Replies: 8
  1. #1
    iamhugo's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2010
    Posts
    2

    image link to open url in iframe

    Hi, can anyone help me solve this.

    I am trying to build a website using iframes.

    I would like to have a page with images at the top or to the left of the iframe. When the customer clicks on the images, it opens up the url of an outside webpage within the iframe.

    a coder on the learning curve


    hugo

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: image link to open url in iframe

    Hi there Hugo,

    and a warm welcome to these forums.

    Here is an example that may suit your requirements....
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title></title>
    
    <style type="text/css">
    #datamain {
        width:1024px;
        height:400px;
     }
    #nav {
        list-style-type:none;
     }
    #nav a {
        color:#000;
     }
    #nav a:hover {
        color:#f00;
     }
    #nav img {
        width:84px;
        height:35px;
        border:0;
     }
    </style>
    
    <script type="text/javascript">
    function goThere() {
    links=document.getElementById('nav').getElementsByTagName('a');
    for(c=0;c<links.length;c++) {
       links[c].onclick=function(){
       document.getElementById('datamain').src=this.href;
       return false;
       }
      }
     }
    
    if(window.addEventListener){
       window.addEventListener('load',goThere,false);
     }
    else { 
    if(window.attachEvent){
       window.attachEvent('onload',goThere);
      }
     }
    </script>
    
    </head>
    <body>
    
    <ul id="nav">
      <li><a href="http://www.bbc.co.uk/iplayer/"><img src="http://t0.gstatic.com/images?q=tbn:lhsAohqx81R-XM:http://www.supportchester.co.uk/images/bbc-logo%20small.jpg" alt="bbc logo"></a></li>
      <li><a href="http://www.w3schools.com/"><img src="http://t2.gstatic.com/images?q=tbn:55BO8MfF10-46M:http://www.mousetrax.com/images/Logo_w3schools.jpg" alt="w3schools logo"></a></li>
      <li><a href="http://www.w3c.org/"><img src="http://t2.gstatic.com/images?q=tbn:I2Rm63WtNmwHTM:http://www.usedcarsindevon.co.uk/img/w3c-logo.jpg" alt="w3c logo"></a></li>
      <li><a href="http://www.google.com/"><img src="http://www.soft-go.com/blog/wp-content/uploads/2007/11/google_logo_small.jpg" alt="google logo"></a></li>
    </ul>
    
    <div>
      <iframe id="datamain" src="http://www.google.com/" frameborder="1" scrolling="auto"></iframe>
    </div>
    
    </body>
    </html>
    
    Note:-
    The images used in this example are hot linked and should be discarded for your own images as soon as possible.

  3. #3
    iamhugo's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2010
    Posts
    2

    Re: image link to open url in iframe

    thanks for this, just what i needed

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: image link to open url in iframe

    No problem, you're very welcome.