www.webdeveloper.com
Results 1 to 4 of 4

Thread: Linking to same page different image

  1. #1
    Join Date
    Jan 2008
    Posts
    42

    Linking to same page different image

    Hi,

    I have over 100 images I would like to display on their own page, but link to them from an index page.

    Rather than have over 100 seperate pages can anyone think of a way to link to the same page but call the required image. This is an over simplification of what i'd like to do:
    <a href = 'index.html' = 1.jpg></a> - Will open index.html and show 1.jpg.
    <a href = 'index.html' = 2.jpg></a> - Will open index.html and show 2.jpg.

    Is this possible?

    Many thanks in advance.

    Martin

  2. #2
    Join Date
    Jul 2007
    Location
    Wisconsin
    Posts
    468
    By using the name anchor, you can specify where on a page an href link should point.

    Directory:
    HTML Code:
    <a href="index.html#1">Go To Image 1</a>
    <a href="index.html#2">Go To Image 2</a>
    <a href="index.html#10">Go To Image 10</a>
    Index:
    HTML Code:
    <a name="1"><img src="image1.jpg" /></a>
    <a name="2"><img src="image2.jpg" /></a>
    <a name="10"><img src="image10.jpg" /></a>

  3. #3
    Join Date
    Jan 2008
    Posts
    42

    Thanks for your help

    But I decided to do it the hard way

    Martin

  4. #4
    Join Date
    Mar 2010
    Posts
    2,803
    maybe use this as a guide.

    It will open each image, as you click its link, in the same new window.

    I haven't included any validation to check if an image name has been passed correctly.

    The page with the image links: The clicked image name is sent to showPic.php


    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title></title>
    <
    script type="text/javascript">
    <!--

    //assuming your pic names are pic1.jpg, pic2.jpg, pic3.jpg etc

    //get the pic names into an array
    var numPics 4;
    var 
    picNames = new Array();
    for(var 
    i=0numPicsi=i+1) {
        
    picNames[i] = 'pic'+(i+1)+'.jpg';
    }
     
    //-->
    </script>

    <style type="text/css">
    <!--

    #linksContainer a {
    display: block}
    -->
    </style>
     
    </head>
    <body>
     
    <div id="linksContainer">

    <script language="JavaScript" type="text/javascript">
    <!--

    var str1,str2,newWin;

    //build the links to the image pages
    for(var i=0; i < picNames.length; i=i+1) {
        str1 = 'showPic.php?picName='+picNames[i];
        str2 = '<a href="#" onclick="window.open('+"'"+str1+"','newWin'"+');return false;" > Show '+picNames[i]+'</a>';
        document.write(str2);   
    }
     
    //-->
    </script>
     
    </div>
     
    </body>
    </html> 
    The page that display the sent image name: showPic.php

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    </head>
    <body>
     
    <div>
       <img src="<?php echo $_GET['picName'?>" alt="" />
    </div>
     
    </body>
    </html>
    Last edited by tirna; 07-20-2010 at 08:39 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles