PDA

View Full Version : Can I hyperlink to a second generation image?



effpeetee
Aug 29th, 2007, 06:31 PM
http://www.exitfegs.co.uk/aaind.html

First, let me apologise for my aborted post recently.
If you go to the URL above, you will be in a page that is randomly selected using a javascript code. When this script was first written, I realised that I had not supplied a way out. I could have made the javascript to select an html page, but I already have over two hundred such pages on my site and I do not want to add to them.

Just by trial and error, I found that putting the hyperlink into the html, on to the image container, that it would then allow any image selected to return to the index page without putting the image on it's own html.

I just wanted to find a way to do this with or without using a javascript. So that I could make it work with a manually selected image, to return to the thumbs menu for a fresh choice.

REMEMBER - NO carrier html page to be used.

Am I reaching for the Moon here?

Frank

HTML & Javascript


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Random image display</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

body { background: #ffffff;
color: #000000;}
a:link { color: #ff0000; }
a:visited { color: #0000cc; }
a:active { color: #ffff00; }

</style>
<script type="text/javascript">

function showImage(){
var r_text = new Array();
r_text[0] = "Steven relaxing on the Watercress Line.";
r_text[1] = "The Museum of the Tolpuddle Martyrs, Dorchester, Dorset.";
r_text[2] = "An ornamental bridge at 'Mapperton' A stately home in Dorset.";
r_text[3] = "The front view of 'Mapperton' A stately home in Dorset.";
r_text[4] = "Higher Came Farm. Our holiday 'digs' on several occasions.";
r_text[5] = "A formal garden at 'Mapperton' A stately home in Dorset.";
r_text[6] = "A lawn at 'Mapperton' A stately home in Dorset.";
r_text[7] = "A beautiful Japanese picture. Downloaded from the Internet.";
r_text[8] = "A lovely country road.";
r_text[9] = "In the grounds of 'Mapperton' in Dorset.";
r_text[10] = "A bridge. Somewhere in Australia. Answers on a postcard please.";
r_text[11] = "In the grounds of 'Mapperton' in Dorset.";
r_text[12] = "Inside St.Nicholas' Church - Moreton. Laurence of Arabia is buried here.";
r_text[13] = "The Bell Hotel at Alresford on the Watercress Line. ";
r_text[14] = "Horsted Keynes Station.";
r_text[15] = "Higher Came Farmhouse. Our holiday 'digs' on several occasions.";
r_text[16] = "The sea front at Swanage.";
r_text[17] = "Horsted Keynes Station.";
r_text[18] = "Steven, Mum Taylor and Betty.";
r_text[19] = "You should have turned left at the cross-roads.";
r_text[20] = "Winchester Cathedral";
r_text[21] = "Road up! Weymouth, - 2005.";
r_text[22] = "This way to 'Higher Came' farmhouse.";
r_text[23] = "Topiary at Mapperton";
r_text[24] = "Footsteps' Our lodging in the Welsh Marches. Very nice.";
r_text[25] = "A lovely country road.";
r_text[26] = "A view from the tower of Salisbury Cathedral.";
r_text[27] = "Books Afloat, a favourite bookshop in Weymouth, Dorset.";
r_text[28] = "Mark & Steven at the Museum of the Tolpuddle Martyrs, Dorchester, Dorset.";
r_text[29] = "A view from the 'London Eye'. Courtesy of Desmond Anderson.";
r_text[30] = "A pond at 'Mapperton' in Dorset.";
r_text[31] = "A view from the 'Footsteps' guest house.";
r_text[32] = "Devil's Bridge station.";
r_text[33] = "On the Welsh Highland Railway at Waunfawr.";
r_text[34] = "Messing about in boats!";
r_text[35] = "Llanfair Railway Station.";
r_text[36] = "Alresford Railway Station, on the Watercress line.";
r_text[37] = "Horsted Keynes Station, on the Bluebell line.";
r_text[38] = "A very weedy stream at 'Mapperton'.";
r_text[39] = "A beautiful Japanese picture. Downloaded from the Internet.";
r_text[40] = "Alresford High Street.";
r_text[41] = "The Brecon Mountain Railway Station.";
r_text[42] = "Ah! But will you get an answer?";
r_text[43] = "A Japanese landscape.";
r_text[44] = "An Australian Gum Tree.";
r_text[45] = "Ayres Rock Australia.";
r_text[46] = "Duke Street Brighton, England. April 2006..";
r_text[47] = "Duke Street Brighton,England. April 2006.";
r_text[48] = "Sea Front, Brighton England. April 2006.";
r_text[49] = "A Coffee house in Russia.";
r_text[50] = "Aquila Heights Dorchester. May 2006";
r_text[51] = "Sleepy koala.";
r_text[52] = "The London Eye on the bank of the River Thames.";
r_text[53] = "Stuck in the sand somewhere in Australia.";
r_text[54] = "Bodo airdrome Norway.";
r_text[55] = "Derwent Water. In the English 'Lake District'";
r_text[56] = "Lake Locarno Switzerland.";
r_text[57] = "Winchester High St - July 2006";
r_text[58] = "An Asian street market";
r_text[59] = "Frank's office where it all begins.";
r_text[60] = "A pleasant day out on the Bluebell Railway - Spring 2006.";
r_text[61] = "The London Eye from afar.";
r_text[62] = "The early morning Sun reflected from a glass fronted building.";
r_text[63] = "Winchester High Street.";
r_text[64] = "Dr Beeching has been here";
r_text[65] = "A road in Japan.";
r_text[66] = "It's a long road................in Australia";
r_text[67] = "Where have all the people gone?.";
r_text[68] = "Steve, some time in the past.";
r_text[69] = "Steve, a few years ago.";
r_text[70] = "A Family get together at the Harvester pub at Hemel Hempstead.";
r_text[71] = "A street in Worthing - Autumn 2006.";
r_text[72] = "A street in Worthing - Autumn 2006.";
r_text[73] = "A street in Worthing - Autumn 2006.";
r_text[74] = "The 'Prince of Wales' at Devil's Bridge - September 2006.";
r_text[75] = "The Sea Front at Eastbourne - September 2006.";
r_text[76] = "The Sea Front at Eastbourne - September 2006.";
r_text[77] = "Bognor street market - September 2006.";
r_text[78] = "O'Connell Bridge Dublin.";
r_text[79] = "St.Albans market - October 2006";
r_text[80] = "A street in Serbia.";
r_text[81] = "Frank in a garden at Mapperly.";
r_text[82] = "Photo taken near Queenstown, on the South Island of New Zealand.";
r_text[83] = "Sweet Dreams Mum; Madge Taylor.";
r_text[84] = "A Fjiord in Norway. Taken by Steve on holiday there.";
r_text[85] = "A Fjiord in Norway. Taken by Steve on holiday.";
r_text[86] = "Eastbourne sea front - September 2006.";
r_text[87] = "Many years ago.";
r_text[88] = "Frank in Mapperton Gardens.";
r_text[89] = "On Tour - From the car window.";
r_text[90] = "A street in Beijing.";
r_text[91] = "Steven relaxing in Eastbourne - Sept. 2006.";
r_text[92] = "Steven in Hove, April 2007.";
r_text[93] = "Museum in Jaipur.";
r_text[94] = "Just before the storm - Sept. 2006.";
r_text[95] = "Maremma_on_the_road_Italy.";
r_text[96] = "Mevagissey shops.";
r_text[97] = "At a cross-roads - somewhere in Australia..";
r_text[98] = "We're only here for the beer.";
r_text[99] = "Summit of Liatach, Torridon, Highland. Taken by Steve on holiday.";
r_text[100] = "The Cuillins. Taken by Steve on holiday.";
r_text[101] = "A Norwegian Fjiord. Taken by Steve on holiday."
r_text[102] = "Frank's keyboard.";
r_text[103] = "Eddie King. A family friend";
r_text[104] = "Smile please!";
r_text[105] = "George Street,Hove. April 2007.";
r_text[106] = "The Magic Cafe Oxford, England.";
r_text[107] = "Ali fan bazaar-Tehran ";


setTimeout("location.reload(true)", 45000);
var i = Math.round((r_text.length-1)*Math.random());
document.getElementById('caption_container').innerHTML=r_text[i];
var img_rnd = new Array ("Steve6.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg", "11.jpg", "12.jpg", "13.jpg", "14.jpg", "15.jpg", "16.jpg", "17.jpg", "18.jpg", "19.jpg", "20.jpg", "21.jpg", "22.jpg", "23.jpg", "24.jpg", "25.jpg", "26.jpg", "27.jpg", "28.jpg", "29.jpg", "30.jpg", "31.jpg", "32.jpg", "33.jpg", "34.jpg", "35.jpg", "36.jpg", "37.jpg", "38.jpg", "39.jpg", "40.jpg", "41.jpg", "42.jpg", "43.jpg", "44.jpg", "45.jpg", "46.jpg", "47.jpg", "48.jpg", "49.jpg", "50.jpg", "51.jpg", "52.jpg", "53.jpg", "54.jpg", "55.jpg", "56.jpg", "57.jpg", "58.jpg", "59.jpg", "60.jpg", "61.jpg", "62.jpg", "63.jpg", "64.jpg", "65.jpg", "66.jpg", "67.jpg", "68.jpg", "69.jpg", "70.jpg", "71.jpg", "72.jpg", "73.jpg", "74.jpg", "75.jpg", "76.jpg", "77.jpg", "78.jpg", "79.jpg", "80.jpg", "81.jpg", "82.jpg", "83.jpg", "84.jpg", "86.jpg", "87.jpg", "88.jpg", "dadingardens.jpg", "carwindow.jpg", "Beijing.jpg", "93.jpg", "Hove1.jpg", "95.jpg", "96.jpg", "97.jpg", "mevagissey-shops.jpg", "106.jpg", "100.jpg", "101.jpg", "img090.jpg", "img163.jpg", "102.jpg", "107.jpg", "smileplease.jpg", "Hove2007.jpg", "108.jpg", "109.jpg");

document.getElementById('image_holder').innerHTML='<IMG alt="Use full screenF11. Click for Home Page" SRC="' + img_rnd[i] + '"style="Z-INDEX: 100; LEFT: 0px; WIDTH: 1024px; POSITION: absolute; TOP: -12px; HEIGHT:768px" height=800 >';
}
window.onload=showImage;

</script>
</head>
<body>

This is where I put the hyperlink.

<a href="index.html"><div id="image_holder"></div>
<span id="caption_container"
style="position:absolute;
{padding: 2px 8px}
border-style: solid;
border-width: thin;
border-color: #ffffff;
border-width: 1px;
margin-top: 7px;
margin-left:20px;
z-index:1000;
font-size: 20px;
color: #ffffff;
background-color: gray;">
</span></a>

</body>
</html>

effpeetee
Aug 29th, 2007, 06:33 PM
I have highlighted the piece of code that I added.

Frank

kansel
Aug 29th, 2007, 11:48 PM
Frank

I'm trying to get my head around your question. Are you asking (1) how to build this random slideshow without Javascript? Or are you asking (2) how to link into the slideshow at a specific image? I'd love to help but I'm not sure exactly what help you need.

1. discarding Javascript would require using a server side script like PHP

2. entering at a specific image would involve adding a query to the end of the URL specifying an index number, then modifying the script to check for a query string - if there is one, use that index number, else generate a random number

Here is how to do number 2:
query example: http://www.exitfegs.co.uk/aaind.html?i=57
this would bring up the photo with this caption: "Winchester High St - July 2006"

code modification:
replace this line
var i = Math.round((r_text.length-1)*Math.random());

with this
var i = null;
var q = location.search.toString();
if(q.indexOf("i=")!=-1){
i = parseInt(q.substr(q.indexOf("i=")+2));
}
else
i = Math.round((r_text.length-1)*Math.random());

effpeetee
Aug 30th, 2007, 12:20 AM
Frank

I'm trying to get my head around your question. Are you asking (1) how to build this random slideshow without Javascript? Or are you asking (2) how to link into the slideshow at a specific image? I'd love to help but I'm not sure exactly what help you need.

Please re-read my original page - It has been modified.

Sorry to be obtuse.

What I want to do, is to use a thumbnail to select and load a jpeg image and that jpeg image (on its own without a html page to carry it) to be hyperlinked back to the original menu, as it is in aaind.html.

This will save a multitude of html pages which at present are just used as picture carriers.

This works with the aaind program by hyperlinking to the container, but I cannot find a way to do it with self selected images.

I hope that makes sense. I know that I can do it by pre selecting the variable (i) but I want to do it from the selected thumbnail.

1. Click thumbnail.
2. Full size image on scree, with caption.
3. Click image and get back to thumbnails for further choices.

as in aaind.

http://www.exitfegs.co.uk/aaind.html

Frank

effpeetee
Aug 30th, 2007, 09:56 PM
Please re-read my original page - It has been modified.

Frank

effpeetee
Sep 2nd, 2007, 11:37 AM
Quote:
Frank

I'm trying to get my head around your question. Are you asking (1) how to build this random slideshow without Javascript? Or are you asking (2) how to link into the slideshow at a specific image? I'd love to help but I'm not sure exactly what help you need.

Please re-read my original page - It has been modified.

Sorry to be obtuse.

What I want to do, is to use a thumbnail to select and load a jpeg image and that jpeg image (on its own without a html page to carry it) to be hyperlinked back to the original menu, as it is in aaind.html.

This will save a multitude of html pages which at present are just used as picture carriers.

This works with the aaind program by hyperlinking to the container, but I cannot find a way to do it with self selected images.

I hope that makes sense. I know that I can do it by pre selecting the variable (i) but I want to do it from the selected thumbnail.

1. Click thumbnail.
2. Full size image on scree, with caption.
3. Click image and get back to thumbnails for further choices.

as in aaind.

http://www.exitfegs.co.uk/aaind.html

Frank