[thelist] Simple code for thumbnail imagemap?

Keith cache at dowebs.com
Mon Jul 16 23:09:45 CDT 2001


> My index.html has a bunch of links that look like this:
> 
> <AREA SHAPE=RECT COORDS="31,6,87,70" HREF="./pic1.jpg">
> 
> I would like to change all those HREFs to something like: 
> ...HREF="./show.html?pic1">  Why?  The idea is that show.html
> does a few nice things in addition to simply displaying the
> image, e.g.:
> I only have to do this once assuming I find out how to get from
>?pic1 in the invocation to $PARAMETER.  That is my question!

If I understand your problem(?) it is not on your index page but on 
how to get "show.html" to display the image that is being passed in 
the query "show.html?pic5" 

Since you are passing it to an html page I assume you do not have 
server dynamic capabilities. That leaves you with client dynamic 
capabilities, javascript. You just need to dynamically generate the 
image tag on show.html from the location field. Where you want the 
image appearing on show.html use:

<script language=javascript>
document.write('<img src='+location.search.substring(1)+'.jpg>')
</script>

or to get bgColor and background image fancy send the desired of 
each with the param. Like:
HREF="./show.html?pic1=000000=bgimage1"

Then put this in the head section to split the query string

<script language=javascript>
params = new Array()
params = location.search.substring(1).split("=")
</script>

then doc.write the body tag

<script language=javascript>
document.write('<body bgcolor='+params[1]+' 
background='+params[2]+'.jpg>')
</script>

and finally doc.write the image tag

<script language=javascript>
document.write('<img src='+param[0]+'.jpg>')
</script>

If you were passing this to show.cgi?pic1=000000=bgimage1
to make it available to all browsers you would do pretty much the 
same thing, only it's a lot easier easier:

#!/usr/bin/perl
@params=split(/=/,$ENV{'QUERY_STRING'});
print "Content-type: text/html\n\n";
print qq~<html>
<body bgcolor=$params[1] background=$params[2].jpg>
<img src=$params[0].jpg>
</body></html>~;

keith




More information about the thelist mailing list