Only show the image on mouseover in thumnail viewer 2?

**funtownarcade** · 01-25-2007, 08:15 AM

1) Script Title: Image Thumbnail Viewer II

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

3) Describe problem: Is there a way to get the big image to disappear as soon as the mouse is removed from the thumbnail?

I'm using this to showcase some art and don't want to make it easy to steal (I know, they can still printscreen and get the image

) I tried making a long blank image underneath the row of thumbnails but if you use the mouse wheel it doesn't work.

Thank you very much inadvance

**ddadmin** · 01-25-2007, 09:08 AM

Sure, though it certainly wouldn't stopped even the slighly more skilled visitor from taking your images (by viewing your page source for example). Anyhow, to make the change, first, add the below function to the end of the script (within the <script> tag):

Code:

function resetimage(loadarea){
document.getElementById(loadarea).innerHTML=""
}

Then, inside your HTML code, add the below:

Code:

<a href="#" onMouseover="modifyimage('dynloadarea', 0)" onMouseout="resetimage('dynloadarea')" >image 1 (onmouseover)</a><br>

The code in red is new.

**funtownarcade** · 01-26-2007, 03:12 AM

Thank you very much.

**klad** · 07-06-2007, 12:00 PM

Hi,
I have searched this forum for exactly this change to the Image Thumbnail Viewer II script. However I am confused about the solution. The codes I have copied from the directions are completely different. I have no long script in the <head>, I only have the follwing:

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

In the html I have completely different code. My code is like:

<a href="image2a.jpg" rel="enlargeimage::mouseover" rev="loadarea2" title="Image"><img border="0" src="image2a_small.jpg" width="100" height="100" style="margin-bottom: 5px"></a><br />

I am a complete novice and do not know how to adapt the script. My goal is the same: have the image disappear when the mouse moves out.

An additional question: can the script also be changed so that I can select 1 image to appear as a default when the page loads ?
If the disappearing can not be done then this would an alternative solution for me.

I hope someone can give me some help here !

Thanks,
Klad

**jscheuer1** · 07-06-2007, 01:23 PM

Originally Posted by klad

Hi,
I have searched this forum for exactly this change to the Image Thumbnail Viewer II script. However I am confused about the solution. The codes I have copied from the directions are completely different. I have no long script in the <head>, I only have the follwing:

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

In the html I have completely different code. My code is like:

<a href="image2a.jpg" rel="enlargeimage::mouseover" rev="loadarea2" title="Image"><img border="0" src="image2a_small.jpg" width="100" height="100" style="margin-bottom: 5px"></a><br />

I am a complete novice and do not know how to adapt the script. My goal is the same: have the image disappear when the mouse moves out.

An additional question: can the script also be changed so that I can select 1 image to appear as a default when the page loads ?
If the disappearing can not be done then this would an alternative solution for me.

I hope someone can give me some help here !

Thanks,
Klad

This script was completely rewritten recently. This feature is now a configuration option:

Code:

hideimgmouseout: false, //Hide enlarged image when mouse moves out of anchor link? (if enlarged image is hyperlinked, always set to false!)

in the thumbnailviewer2.js file. Set it to 'true'.

**klad** · 07-06-2007, 01:52 PM

Thank you for your fast reply.
I have changed the setting as indicated, but my page now shows a new problem.
I have placed a testpage online at: www.numisantica.com/testgallery.htm.
When the mouse is over the thumbnail at the bottom, the pictures jump away. Is there a solution to avoid this effect ?

Thanks,
Klad

**jscheuer1** · 07-06-2007, 02:08 PM

Set the style height of the display area to that of the largest image it will display.

**klad** · 07-06-2007, 02:40 PM

Thank you. I have adapted the setting for height and the picture loads better now.
If I can bother you with an additional question, I hope you can help me here.
When looking at the page, there will be a big gap with blank space because of the size of the larger picture. Is there a possibility to keep the loadarea of the big picture floating on the page.
To reduce the number of clicks for my visitors I want to have the thumbnails + text aligned to the right of my page and display a large picture on the left with mouseover. It would be easier to keep 1 loadarea on the left while scrolling down the page (similar to the menu bar). Is this feasible without having to divide the page into frames ?

Thanks,
klad

Thread: Only show the image on mouseover in thumnail viewer 2?

Thread Tools

Search Thread

Only show the image on mouseover in thumnail viewer 2?

Disappear image when mouse moves out with Image Thumbnail Viewe II

Bookmarks

Bookmarks

Posting Permissions