Hyperlink trouble with Image Thumbnail Viewer II

[TreatLightly]

1) Script Title: Image Thumbnail Viewer II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

3) Describe problem: Hi all,

I am still a coding embryo, and have been spending several hours now on a painful wee problem, and I'm at my wit's end.

I'm using Image Thumbnail Viewer II for the gallery on my website to great success, however the time has come to add hyperlinks to the thumbnails, but it doesn't seem to work and there's nothing I can find to fix it.

I've tried adding the url as per basic instructions rev="loadarea1::http://www.figureight.org" to no avail, and anything beyond there has given me no love.

My brain is fried, I leave it to the good people of the DD community to point out my obvious, embarrassing mistakes. Good luck.

Thanks all, a chunk of the code is below...






<th width="351" align="right" valign="top" scope="col"><table width="350" height="113" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<th width="326" align="center" scope="col"><p>
<script type="text/javascript">

/******************************************
* Scrollable content script II- © Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
******************************************/

iens6=document.all||document.getElementById
ns4=document.layers

//specify speed of scroll (greater=faster)
var speed=2

if (iens6){
document.write('<div id="container" style="position:relative;width:300px;height:200px;border:0px solid black;overflow:hidden">')
document.write('<div id="content" style="position:absolute;width:300px;left:0;top:0">')
}
</script>

</p>
<ilayer name="nscontainer" width=306 height=200 clip="0,0,300,200" left="79" top="-26">
<layer name="nscontent" width=276 height=420 pagey="306" left="-68">
<p></p>
<p align="left" class="style6"><a href="images/faq/pic1.jpg" rel="enlargeimage::mouseover" "hideimage::mouseout" rev="loadarea1::http://www.figureight.org" title=""><img border="0" src="images/all/pic1.jpg" width="90" height="75" style="margin-bottom: 5px" rel="hideimage::mouseout" /> </a> <a href="images/all/pic2.jpg" rel="enlargeimage::mouseover" "hideimage::mouseout" rev="loadarea1::http://www.figureight.org/" title=""><img border="0" src="images/all/pic2.jpg" width="90" height="75" style="margin-bottom: 5px" rel="hideimage::mouseout" /></a></p>
</layer></ilayer>
<script language="JavaScript1.2">
if (iens6)
document.write('</div></div>')
</script>

<script language="JavaScript1.2">
if (iens6){
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}

function movedown(){
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}

function moveup(){
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)

}

function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script></th>
<th width="24" align="left" scope="col"><p><a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"><img src="/navigation/uparrow.gif" border=0></a></p>
<br />
<br />
<p> <a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><img src="/navigation/downarrow.gif" border=0></a></p>
</p></td></th>
</tr>
</table></th>
<th width="185" align="center" valign="top" scope="col"><img src="navigation/Speaker2.gif" width="157" height="280" class="reflect" /></th>
</tr>
</table>

<div id="apDiv25"><table width="697" height="120" border="0" cellpadding="0" cellspacing="0">
<tr>
<th width="4" align="left" valign="top" scope="col"><p>&nbsp;</p></th>
<th width="143" valign="top" scope="col"><img src="navigation/peoplegroup-2.gif" width="117" height="77" class="reflect" /> <p>&nbsp;</p></th>
<th width="113" valign="top" scope="col"><img src="navigation/People.gif" width="98" height="112" class="reflect" /></th>
<th width="83" valign="top" scope="col"><p><img src="navigation/tree2.gif" width="73" height="168" class="reflect" /><br />
</p> </th>
<th width="109" valign="top" scope="col"><p>&nbsp;</p>
<p><img src="navigation/Peoplegroup.gif" width="105" height="95" class="reflect" /></p></th>
<th width="70" valign="top" scope="col"><br />
<img src="navigation/tree3.gif" width="65" height="127" class="reflect" /><br /></th>
<th width="93" valign="top" scope="col"><p>&nbsp;</p>
<p><img src="navigation/Peoplegroup1.gif" width="69" height="75" class="reflect" /><span class="style1">.</span></p>
<p><br />
</p></th>
<th width="150" align="left" valign="top" scope="col"><br />
<img src="navigation/Tipis1.gif" width="135" height="116" class="reflect" /></th>
</tr>
</table></div>

</div>
<p>
<p>&nbsp;</p>
<p>&nbsp;</p></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<script src="java/reflection.js" type="text/javascript"></script>

<script type="text/javascript" src="java/thumbnailviewer2.js" defer="defer">

/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>
</body>
</html>

[ddadmin]

At a glance there is one issue:


<a href="images/faq/pic1.jpg" rel="enlargeimage::mouseover" "hideimage::mouseout" rev="loadarea1::http://www.figureight.org" title="">

The code in red doesn't belong there (no such attribute is supported). It shouldn't be enough to break the script though. Please post a link to the page on your site that contains the problematic script so we can check it out.

[TreatLightly]

Thanks for the quick reply; the site be www.highanddryfestival.net/gallery.html (http://www.highanddryfestival.net/gallery.html)

Cheers!

[TreatLightly]

Hi all,

I've managed to sort out a chunk of the hyperlinking problem, however it seems that the link refers to the enlarged image, and not the thumbnail.

Is it possible to link to the thumbnail as well as the enlarged image? This is pretty essential for what I want to do.

The page is here: highanddryfestival.net/musictest.html (http://www.highanddryfestival.net/music.html)

Thanks all!

[ddadmin]

I'm a little confused what you're trying to do actually. The thumbnail image is already loaded on the page- when the mouse rolls over it, the enlarged image is then shown inside the "loadarea" DIV beside it. What do you mean by:


Is it possible to link to the thumbnail as well as the enlarged image?

[TreatLightly]

I'm a little confused what you're trying to do actually. The thumbnail image is already loaded on the page- when the mouse rolls over it, the enlarged image is then shown inside the "loadarea" DIV beside it. What do you mean by:

Sorry there, I was in a rush when I wrote that one.

Anyway, as each thumbnail on the page refers to a band or artist, I'd like to hyperlink each thumbnail to a relevant myspace or website. Because of the design, it's not practical to only have the enlarged image hyperlinked.

Ideally the hyperlink would open up a new window.

If it's not possible to do this with this script, is there another similar DD script out there that would get me where I want to be?

Thanks for your help - I definitely appreciate it. I'm teaching myself as much as I can, it's a long process...