Image Viewer II: larger image wrong position

[steelo]

1) Script Title: Image Viewer 2

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

3) Describe problem: Larger picture wrong position

Is it possible to allign the position of the larger image? My website is: www.usbfactory.nl

I would like to have larger Dice image on the right side instead below. Is that possible to fix?

Thanks in advance!

Steelo

[jscheuer1]

The larger image will be in the loadarea designated for it (from the demo page):

<a href="bulb.gif" rel="enlargeimage::mouseover" rev="loadarea">Thumbnail</a>

That will load bulb.gif into an element (usually a division) with the unique id of 'loadarea':

<div id="loadarea" style="width: 600px"></div>

You may place that division anywhere on your page that you like. You can put it in a table. It could even be a table cell:

<table>
<tr>
<td id="loadarea"></td>
</tr>
</table>

How you lay out your page is your business, to repeat - the loadarea may be placed anywhere on your page.

[steelo]

Hi John,

Sorry, I dont understand your explination. Please check my website one more time:

www.usbfactory.nl


As you can see, when you hover the mouse over the three small images, the larger image should hover over the big image, but the loaded image shows below the larger image. I can not get it fix to show the loaded image in the excisting image.

This is the script I have used:

<script type="text/javascript" src="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><hr />
<p><strong><img alt="" align="left" src="http://www.usbfactory.nl/images/thumbnail_01(groot).png" />USB Sticks Twist Original</strong><br />
*<br />
Schitterend uitgevoerde usb stick met de mogelijkheid om de stick geheel in uw eigen huisstijlkleur uit te voeren. Zeer geschikt om te bedrukken met uw logo of reclametekst. De usb stick is tevens voorzien van een handig oogje waardoor deze eenvoudig aan een sleutelbos te bevestigen is. De stick is voorzien van zilverkleurige accenten wat de stick een eigentijdse uitstraling geeft. Art. nr. 3643<strong>*<br />
</strong></p>
<a rev="loadarea" rel="enlargeimage::mouseover" href="http://www.usbfactory.nl/images/dice2.png"><img alt="" align="left" src="http://www.usbfactory.nl/images/dice1.png" /></a><a title="" rev="loadarea::http://www.dynamicdrive.com" rel="enlargeimage::mouseover" href="http://www.usbfactory.nl/images/thumbnail_01(groot).png"><img alt="" src="http://www.usbfactory.nl/images/thumbnail_01(small).png" /></a><a rev="loadarea" rel="enlargeimage::mouseover" href="http://www.usbfactory.nl/images/dice2.png"><img alt="" src="http://www.usbfactory.nl/images/dice1.png" /></a>
<div id="loadarea" style="width: 227px; height: 153px">*</div>
<br />
<h2><br />
<br />
<br />
<br />
*</h2>
<br />
<br />
<br />
<br />
*
<div>*</div>

I hope you can fix the script. Thanks in advance!

Steelo

[jscheuer1]

This is not a script:

<script type="text/javascript" src="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><hr />
<p><strong><img alt="" align="left" src="http://www.usbfactory.nl/images/thumbnail_01(groot).png" />USB Sticks Twist Original</strong><br />
 <br />
Schitterend uitgevoerde usb stick met de mogelijkheid om de stick geheel in uw eigen huisstijlkleur uit te voeren. Zeer geschikt om te bedrukken met uw logo of reclametekst. De usb stick is tevens voorzien van een handig oogje waardoor deze eenvoudig aan een sleutelbos te bevestigen is. De stick is voorzien van zilverkleurige accenten wat de stick een eigentijdse uitstraling geeft. Art. nr. 3643<strong> <br />
</strong></p>
<a rev="loadarea" rel="enlargeimage::mouseover" href="http://www.usbfactory.nl/images/dice2.png"><img alt="" align="left" src="http://www.usbfactory.nl/images/dice1.png" /></a><a title="" rev="loadarea::http://www.dynamicdrive.com" rel="enlargeimage::mouseover" href="http://www.usbfactory.nl/images/thumbnail_01(groot).png"><img alt="" src="http://www.usbfactory.nl/images/thumbnail_01(small).png" /></a><a rev="loadarea" rel="enlargeimage::mouseover" href="http://www.usbfactory.nl/images/dice2.png"><img alt="" src="http://www.usbfactory.nl/images/dice1.png" /></a>
<div id="loadarea" style="width: 227px; height: 153px"> </div>
<br />
<h2><br />
<br />
<br />
<br />
 </h2>
<br />
<br />
<br />
<br />
 
<div> </div>

It is an external script tag and some HTML markup. The highlighted div is where the larger images will appear. It doesn't have to be there, you could do like:

<div id="loadarea" style="width: 227px; height: 153px"> </div>
<a rev="loadarea" rel="enlargeimage::mouseover" href="http://www.usbfactory.nl/images/dice2.png"><img alt="" align="left" src="http://www.usbfactory.nl/images/dice1.png" /></a><a title="" rev="loadarea::http://www.dynamicdrive.com" rel="enlargeimage::mouseover" href="http://www.usbfactory.nl/images/thumbnail_01(groot).png"><img alt="" src="http://www.usbfactory.nl/images/thumbnail_01(small).png" /></a><a rev="loadarea" rel="enlargeimage::mouseover" href="http://www.usbfactory.nl/images/dice2.png"><img alt="" src="http://www.usbfactory.nl/images/dice1.png" /></a>

Or, as I say - put it anywhere you want. It is no different than any other element in your HTML markup. I assume you know how to lay out a page - right?

You can even have it start out with an image in it:

<div id="loadarea" style="width: 227px; height: 153px"><img alt="" align="left" src="http://www.usbfactory.nl/images/thumbnail_01(groot).png" /></div>
<a rev="loadarea" rel="enlargeimage::mouseover" href="http://www.usbfactory.nl/images/dice2.png"><img alt="" align="left" src="http://www.usbfactory.nl/images/dice1.png" /></a><a title="" rev="loadarea::http://www.dynamicdrive.com" rel="enlargeimage::mouseover" href="http://www.usbfactory.nl/images/thumbnail_01(groot).png"><img alt="" src="http://www.usbfactory.nl/images/thumbnail_01(small).png" /></a><a rev="loadarea" rel="enlargeimage::mouseover" href="http://www.usbfactory.nl/images/dice2.png"><img alt="" src="http://www.usbfactory.nl/images/dice1.png" /></a>

[steelo]

Hi John,

Thanks again for your quick reply.

Everything is very clear to me now. Except the loadarea of the larger image can not be put in front of text. Please check my website again: www.usbfactory.nl

As you can see, the loaded area can only be put whenever there is no text on the right side or on the left side of the loaded image. However, I can put the loaded area on top of the text or under the text, but in this case I need to put in front of text.

Please let me know how to fix the loaded area.

Thanks in advance.

Steelo

[jscheuer1]

I'd try:

<div id="loadarea" style="float: left;width: 150px; height: 150px"><img alt="" align="left" src="http://www.usbfactory.nl/images/thumbnail_01(groot).png" /></div><br>
<b>Schitterend uitgevoerde usb stick met de mogelijkheid om de stick geheel in uw eigen huisstijlkleur uit te voeren. Zeer geschikt om te bedrukken met uw logo of reclametekst. De usb stick is tevens voorzien van een handig oogje waardoor deze eenvoudig aan een sleutelbos te bevestigen is. De stick is voorzien van zilverkleurige accenten wat de stick een eigentijdse uitstraling geeft. Art. nr. 3643</b>
<div style="clear: left;"></div>
<a rev="loadarea" rel="enlargeimage::mouseover" href="http://www.usbfactory.nl/images/dice2.png"><img alt="" align="left" src="http://www.usbfactory.nl/images/dice1.png" /></a><a title="" rev="loadarea::http://www.dynamicdrive.com" rel="enlargeimage::mouseover" href="http://www.usbfactory.nl/images/thumbnail_01(groot).png"><img alt="" src="http://www.usbfactory.nl/images/thumbnail_01(small).png" /></a><a rev="loadarea" rel="enlargeimage::mouseover" href="http://www.usbfactory.nl/images/dice2.png"><img alt="" src="http://www.usbfactory.nl/images/dice1.png" /></a>

Or, since you already have a table, you might lay that out a bit differently and use its cells to get the text to be beside the loadarea. As I keep saying, you can put it wherever you like.

[steelo]

Yes, now it works! I can finally finish my website!

Thank you very much for your support!

Steelo