Advanced Search

Results 1 to 6 of 6

Thread: Hyperlink trouble with Image Thumbnail Viewer II

  1. #1
    Join Date
    Aug 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Hyperlink trouble with Image Thumbnail Viewer II

    1) Script Title: Image Thumbnail Viewer II

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...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...

    Code:
    
    
        <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>

  2. #2
    Join Date
    Aug 2004
    Posts
    9,864
    Thanks
    3
    Thanked 960 Times in 949 Posts
    Blog Entries
    15

    Default

    At a glance there is one issue:

    Code:
    <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.
    DD Admin

  3. #3
    Join Date
    Aug 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the quick reply; the site be www.highanddryfestival.net/gallery.html

    Cheers!

  4. #4
    Join Date
    Aug 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

    Thanks all!
    Last edited by TreatLightly; 08-05-2009 at 02:35 AM.

  5. #5
    Join Date
    Aug 2004
    Posts
    9,864
    Thanks
    3
    Thanked 960 Times in 949 Posts
    Blog Entries
    15

    Default

    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?
    DD Admin

  6. #6
    Join Date
    Aug 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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...

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •