PDA

View Full Version : Image Thumbnail Viewer II <Div> Placement Issue



shadowbeast
05-06-2006, 07:35 PM
Image Thumbnail Viewer II
http://www.dynamicdrive.com/dynamicindex4/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):


<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
It's the same command as onMouseover for the links, but use "onLoad" in the body tag instead.

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

He means:


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


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

or:


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


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