Dynamic Photo Link Creation [Archive]

anderson8

04-25-2008, 10:56 PM

Ok, bit of a novice and not entirely sure if this is the best way of doing what i want but here goes...

I would like a user to be able to select from a drop down menu one of (location 1, location 2 or location 3) and then select the date they wish to view from a calendar.

I would then like to dynamically create the following:

<a href="Photos/[location]/[date]/HQ/1.jpg"><img src="/Photos/[location]/[date]/TN/1.jpg"</a>

for a specific e.g. choice location 1, date 21/04/08

<a href="Photos/location1/210408/HQ/1.jpg"><img src="/Photos/location1/210408/TN/1.jpg"</a>

And so a dynamic photo is created with a thumbnail and a link to a HQ version of the image.

Is this possible or am I in the wrong place/dream world.

Any help much appreciated.

shyam

04-26-2008, 05:29 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test</title>
<script type="text/javascript">
function showThumbnail() {
var location = document.getElementById('location').value;
var date = document.getElementById('date').value;
if ( date.length > 0 && location.length > 0) {
var a = document.createElement('a');
a.href = 'Photos/' + location + '/' + date + '/HQ/1.jpg';
var img = document.createElement('img');
a.appendChild(img);
img.src = '/Photos/' + location + '/' + date + '/TN/1.jpg';
var thumbnail = document.getElementById('thumbnail');
while ( !!thumbnail.firstChild ) {
thumbnail.removeChild(thumbnail.firstChild);
} // endwhile
thumbnail.appendChild(a);
}
return false;
}
</script>
</head>
<body>
<form method="post" action="">
<label for="location">location</label>
<select id="location" name="location">
<option value=""> - select - </option>
<option value="location 1">location 1</option>
<option value="location 2">location 2</option>
<option value="location 3">location 3</option>
</select>
<label for="date">date</label>
<input type="text" id="date" name="date" value="" />
<button id="show" name="show" onclick="showThumbnail()">show</button>
</form>
<div id="thumbnail">
</div>
</body>
</html>