PDA

Click to See Complete Forum and Search --> : Download Script

reeses
05-13-2006, 05:58 PM
Hi,

I have a website that I use to display my photos. I use JAlbum to create the webpages and it does a great job. For viewing the photos I resize them to have maximum diminsion of 600 ppi. My problem is, I want to allow the viewer to download the image at full resolution, they can't just "right click" and do "save as" as that get them the resized image. I would like a script that when they run the mouse over the image it would present them with a button to download the full size image which is stored in another folder on the site. I have searched many site looking for such a script but haven't found one, does anyone know of such a script?

Thanks
Webnerd
05-15-2006, 04:23 PM
Like this?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html><!--xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"//-->
<head>
<title> new document </title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Expires" content="Mon, 26 Jul 1997 05:00:00 GMT">
<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate">
<meta http-equiv="Cache-Control" content="post-check=0, pre-check=0">
<meta http-equiv="Pragma" content="no-cache">

<style type="text/css" media="all">
/*<![CDATA[*/
/*]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

window.onload=function(){
var ims=document.getElementsByTagName("IMG");
for(i=0;i<ims.length;i++){
if(ims[i].className=="largeScale"){
document.all ? ims[i].attachEvent("onmouseover",showButton) : ims[i].addEventListener("mouseover",showButton,false);

}
}

}

var mt=null;

function showButton(e){

clearTimeout(mt);

e=window.event ? window.event : e;
var el=window.event ? window.event.srcElement : e.target;

if(document.getElementById("imb")){
var myimb=document.getElementById("imb")
}else{
var myimb=document.createElement("BUTTON");
myimb.style.position="absolute";
myimb.style.visibility="hidden";
myimb.id="imb";
var tn=document.createTextNode("Download");
myimb.appendChild(tn);
document.body.appendChild(myimb);
}
myimb.style.top=el.offsetTop+"px";
myimb.style.left=el.offsetLeft+"px";
myimb.style.visibility="visible";
mt=setTimeout("document.getElementById('imb').style.visibility='hidden'",2000);

}


//]]>
</script>
</head>

<body lang="en">
<img src="/images/somdeimage.gif" width="200" height="200" class="largeScale">
<img src="/images/somdeimage.gif" width="200" height="200" class="largeScale">
</body>
</html>
David Harrison
05-15-2006, 04:48 PM
A CSS solution would be a lot more accessible, but it really depends on how much control you have over the markup that JAlbum generates. For example, if you could do this for each thumbnail, then a pure CSS solution would be very easy to implement.<a href="/big/image/path/01.jpg">
<img src="/small/image/path/01.jpg" alt="Something descriptive." width="100" height="100">
<span></span>
</a>However, if you don't have any control over the markup generated, if you can't even add a class to each of the thumbnails, then a JavaScript solution is the only option, and it would depend on what the markup looks like.

Webnerd, you seem to be a bit confused between HTML and XHTML there.