Linking to same page different image

**martin_b14** · 07-16-2010 01:19 PM

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

**OctoberWind** · 07-16-2010 04:10 PM

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>

**martin_b14** · 07-20-2010 05:08 PM

But I decided to do it the hard way

Martin

**tirna** · 07-20-2010 08:34 PM

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=0; i < numPics; i=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>

Thread: Linking to same page different image

Thread Tools

Display

Linking to same page different image

Thanks for your help

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions