Image Thumbnail Viewer II <Div> Placement Issue

**shadowbeast** · 05-06-2006, 07:35 PM

Image Thumbnail Viewer II
http://www.dynamicdrive.com/dynamici...thumbnail2.htm

I have followed the instructions given to insert this code into a web page and the basic function works perfectly however, the placement of the pictures is below the entire picture menu and not to the side. Please if anyone knows what I am doing wrong help would be greatly appreciated.

**jscheuer1** · 05-06-2006, 09:28 PM

You've done nothing wrong, on the demo page a table is used to achieve the side by side layout (from the demo page source):

HTML Code:

    <table border="0" width="100%" cellspacing="0" cellpadding="0">
      <tr>
        <td width="20%"><a href="#" onMouseover="modifyimage('dynloadarea', 0)"><img border="0" src="thumb1.jpg" width="50" height="50" style="margin-bottom: 5px"></a><br>
        <a href="#" onMouseover="modifyimage('dynloadarea', 1)"><img border="0" src="thumb2.jpg" width="50" height="50" style="margin-bottom: 5px"></a><br>
        <a href="#" onMouseover="modifyimage('dynloadarea', 2)"><img border="0" src="thumb3.jpg" width="50" height="50" style="margin-bottom: 5px"></a></td>

        <td width="80"><!--webbot bot="HTMLMarkup" startspan --><div id="dynloadarea" style="width:50px;height:225px"></div><!--webbot bot="HTMLMarkup" endspan i-checksum="17728" --></td>
      </tr>
    </table>

You can use whatever type layout you desire.

**shadowbeast** · 05-06-2006, 10:37 PM

Thanks that helps more than you know. I do however have one more question. Is there a way to make it so that when the page loads there is a picture there untill another one is chosen.

**djr33** · 05-06-2006, 10:42 PM

Yeah.

It's the same command as onMouseover for the links, but use "onLoad" in the body tag instead.

ie: <body ... onLoad="dothis()">

**shadowbeast** · 05-06-2006, 11:50 PM

I realy don't understand what you mean, I am not sure exactly what to put in the Body tag, and also if it is in the body tag, it won't be in the table where all of the other pictures show up. Will it? I really don't have any idea. I suppose what I am really asking for is a default picture, in other words when my cursor isn't directly over one of the links to a picture it is showing the default picture, is that possible?

**jscheuer1** · 05-07-2006, 03:28 AM

Originally Posted by djr33

It's the same command as onMouseover for the links, but use "onLoad" in the body tag instead.

ie: <body ... onLoad="dothis()">

He means:

HTML Code:

<body onload="modifyimage('dynloadarea', 0)">

That's one way to do it but, in my opinion there is a much better way. Since the way this script works is to replace the innerHTML of the element (a division in the demo) with the id of 'dynloadarea', we can put anything in there we like, it will be overwritten once the script starts to work. You can put any image and/or other code in there:

HTML Code:

<div id="dynloadarea" style="width:50px;height:225px"><img src="photo1.jpg" border="0"></div>

or:

HTML Code:

<div id="dynloadarea" style="width:50px;height:225px"><a href="some_page.htm"><img src="photo1.jpg" border="0"></a></div>

Virtually any combination of ordinary HTML and javascript can be used. But remember, whatever it is will get overwritten once the script is activated via a mouseover of a thumbnail. So, use something you would be happy being temporary. You could even do something like so:

HTML Code:

<div id="dynloadarea" style="width:50px;height:225px"><script type="text/javascript">document.write('<img src="photo1.jpg" border="0">')</script><noscript>JavaScript is Required for this Feature</noscript></div>

Thread: Image Thumbnail Viewer II <Div> Placement Issue

Thread Tools

Search Thread

Image Thumbnail Viewer II <Div> Placement Issue

Bookmarks

Bookmarks

Posting Permissions