|
|
hi, i'm designing a new website for my band, www.infiniteclarity.com
i'm working in frames, one on the left, one on the right.
the left frame holds thumbnails for our picture section.
the right frame will display the full sized picture.
right now i'm using :
(a href="/forum/pic_full_size.jpg" target="right-frame")(img src="/forum/pic_thumbnail.jpg")(/a)
but as you may know, when the picture loads in the right frame, the background in the default white. is there a way to change that bgcolor without having to create an html file for every picture i want viewable?
please help, thanks in advance
dave
|
|
|
|
OK, here is a solution that I think you'll like. This is a stripped down version of my generic "Image Viewer" script. This script was originally designed to work in a popup window that would automatically resize to exactly fit the image. But for your FRAMES version, you don't want the resizing part...so I removed it.
Just copy this code into a new HTML file. Call it ShowImg.html. I did not write the Querystring parsing functions. I "leveraged" them from the Internet. Once you have this page on your webserver, your links to it will be, for example,
<a target="right-frame" src="/forum/ShowImg_img_full_size_pic.jpg.html"><img src="/forum/thumbnail.jpg"></a>
|
|
<HTML>
<style>
body { padding:10px; background-color:#000000; }
</style>
<BODY>
<table cellspacing=0 cellpadding=0 border=0 height="100%" width="100%">
<tr>
<td align=center valign=middle>
<img id="img01" src="JavaScript:document.getElementById('img01').src=QueryString('img');" border=0>
</td>
</tr>
</table>
<script language=JavaScript1.2>
function QueryString(key)
{
var value = null;
for (var idx=0;idx<QueryString.keys.length;idx++)
{
if (QueryString.keys[idx]==key)
{
value = QueryString.values[idx];
break;
}
}
return value;
}
QueryString.keys = new Array();
QueryString.values = new Array();
function QueryString_Parse()
{
var query = unescape(window.location.search.substring(1));
var pairs = query.split("&");
for (var idx=0;idx<pairs.length;idx++)
{
var pos = pairs[idx].indexOf('=');
if (pos >= 0)
{
var argname = pairs[idx].substring(0,pos);
var value = pairs[idx].substring(pos+1);
QueryString.keys[QueryString.keys.length] = argname;
QueryString.values[QueryString.values.length] = value;
}
}
}
QueryString_Parse();
</script>
</BODY>
</HTML>
|
|
One note: If you try to test this HTML code by just double clicking on it in your filesystem and adding a querystring to it, it won't work. You have to open the link from a webserver. Your filesystem will think you are trying to open a file literally named "/forum/ShowImg_img_full_size_pic.jpg.html". Your webserver will understand that "?img=full-size-pic.jpg" is a querystring to pass to "ShowImg.html".
Notice the "<style>" section. You can edit that to be whatever you want -- adjust the margin, padding, background color, etc. I set it to a black background with 10 pixels of padding. You could also use this script to put a default style-formatted border around your photos.
|
|
|
|
|
|
|
|
|
// |
etsd311
Troy Wolf
