...

View Full Version : Pictures



Arbitus
10-09-2003, 09:33 PM
How can I make it so I have a colum or links, and when it clicks on it it will bring u to a page with a picture. I dont want to have to create a hole new html document for each image, I want so I only have one html document called pictures, and when u click on any of those links, it takes you to that page with the image u picked.

Thnx

Danne
10-09-2003, 09:55 PM
Something like this:

The link:
<a href="image.html?image=imgName.gif" target="_blank">Image</a>


In image.html:


<html>
...

function getParams(){
var params = [];
if (document.location.search!="") {
params=document.location.search.slice(1).split("&");
for (var i=0;i<params.length;i++) {
params[i]=params[i].split("=");
var prop=params[i][0];
var value=params[i][1];
params[prop]=value;
}
}
return params;
}

function showImage() {
var p = getParams();
if (p.length > 0) {
document.getElementById("theImage").src=p.image;
}
}

</script>
<body onload="showImage();">
<img id="theImage" src="defautlImage.gif">

...

Arbitus
10-09-2003, 10:00 PM
hmmm, so how exacly do I do it? Meaning what do I do with that other html document, and do I put:
<html>
...

function getParams(){
var params = [];
if (document.location.search!="") {
params=document.location.search.slice(1).split("&");
for (var i=0;i<params.length;i++) {
params[i]=params[i].split("=");
var prop=params[i][0];
var value=params[i][1];
params[prop]=value;
}
}
return params;
}

function showImage() {
var p = getParams();
if (p.length > 0) {
document.getElementById("theImage").src=p.image;
}
}

</script>
<body onload="showImage();">
<img id="theImage" src="defautlImage.gif">


And where do I put the link?

Danne
10-09-2003, 10:12 PM
Well, you put the link where you want the user to click to see the image.


<a href="image.html?image=imgName.gif" target="_blank">Image</a>


As for the html you create it as a new file and save it as image.html (to fit the link. Change the link if you prefer another name). The parameter sent to this page is the path to the image. If all your images are in the same folder, you only need the filename. And if all of them are gif, or jpg, you can cut that too, and add it in image.html:


function showImage() {
var p = getParams();
if (p.length > 0) {
document.getElementById("theImage").src="images/"+p.image+".gif";
}
}


The getParams is just a function to put the paramters inside an object - easier to handle, and no need to edit. :thumbsup:

Arbitus
10-09-2003, 11:34 PM
im sorry, but I am soooo confussed. I dont know anything about javascript, I just knew I would need it 4 dis.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum