Panna
08-31-2004, 05:10 AM
Hi
I’m trying to enhance a javascript program. The original program works like a charm. What it does, is as follows. I have six thumbnails on a webpage. When you click on a thumbnail, a larger version of the thumbnail is displayed next to it, in other words in a table cell on the same page, not in a new window. When I click on another thumbnail, its corresponding image replaces the previous large image in the same table cell. And so on. So you have the disjoint rollover effect, just achieved by an onClick event.
But what I want to do now is this: when the larger version is displayed, I want the visitor to be able to click on it and THEN a much larger version is displayed in a new window.
Here is the source code of my original program:
<SCRIPT LANGUAGE = "javascript">
<!--
<!--script to switch between the thumbnails in the gallery
var currentSubOn = "blank";
if(document.images)
{
var sub_blank = new Image();
sub_blank.src = "gallery_first_thumb.jpg";
var sub_thumb1 = new Image();
sub_thumb1.src = "towerkop1_thumb.jpg";
var sub_thumb2 = new Image();
sub_thumb2.src = "towerkop2_thumb.jpg";
var sub_thumb3 = new Image();
sub_thumb3.src = "towerkop3_thumb.jpg";
var sub_thumb4 = new Image();
sub_thumb4.src = "winesales_thumb.jpg";
var sub_thumb5 = new Image();
sub_thumb5.src = "parmalat_thumb.jpg";
var sub_thumb6 = new Image();
sub_thumb6.src = "kramer_thumb.jpg";
}
function highlightSub(img)
{
if(currentSubOn != img)
{
// Change Title
document['sub'].src = eval("sub_" + img + ".src")
}
}
function unhighlightSub(img)
{
if(currentSubOn != img)
{
// Change Title
document['sub'].src = eval("sub_" + currentSubOn + ".src")
}
}
//-->
</script>
Then the HTML code of the first thumbnail:
<td><img src="towerkop_mini_thumb2.jpg" width="75" height="79" onClick="highlightSub('thumb1')"/></td>
And the HTML code for the table cell where my larger versions are displayed:
<td><img src="towerkop1_thumb.jpg" width="250" height="210" name="sub" /></td>
Any ideas on how I can achieve this? I could of course make a Flash app, but I want to avoid this at all costs.
Thanks,
Panna
I’m trying to enhance a javascript program. The original program works like a charm. What it does, is as follows. I have six thumbnails on a webpage. When you click on a thumbnail, a larger version of the thumbnail is displayed next to it, in other words in a table cell on the same page, not in a new window. When I click on another thumbnail, its corresponding image replaces the previous large image in the same table cell. And so on. So you have the disjoint rollover effect, just achieved by an onClick event.
But what I want to do now is this: when the larger version is displayed, I want the visitor to be able to click on it and THEN a much larger version is displayed in a new window.
Here is the source code of my original program:
<SCRIPT LANGUAGE = "javascript">
<!--
<!--script to switch between the thumbnails in the gallery
var currentSubOn = "blank";
if(document.images)
{
var sub_blank = new Image();
sub_blank.src = "gallery_first_thumb.jpg";
var sub_thumb1 = new Image();
sub_thumb1.src = "towerkop1_thumb.jpg";
var sub_thumb2 = new Image();
sub_thumb2.src = "towerkop2_thumb.jpg";
var sub_thumb3 = new Image();
sub_thumb3.src = "towerkop3_thumb.jpg";
var sub_thumb4 = new Image();
sub_thumb4.src = "winesales_thumb.jpg";
var sub_thumb5 = new Image();
sub_thumb5.src = "parmalat_thumb.jpg";
var sub_thumb6 = new Image();
sub_thumb6.src = "kramer_thumb.jpg";
}
function highlightSub(img)
{
if(currentSubOn != img)
{
// Change Title
document['sub'].src = eval("sub_" + img + ".src")
}
}
function unhighlightSub(img)
{
if(currentSubOn != img)
{
// Change Title
document['sub'].src = eval("sub_" + currentSubOn + ".src")
}
}
//-->
</script>
Then the HTML code of the first thumbnail:
<td><img src="towerkop_mini_thumb2.jpg" width="75" height="79" onClick="highlightSub('thumb1')"/></td>
And the HTML code for the table cell where my larger versions are displayed:
<td><img src="towerkop1_thumb.jpg" width="250" height="210" name="sub" /></td>
Any ideas on how I can achieve this? I could of course make a Flash app, but I want to avoid this at all costs.
Thanks,
Panna