fading back to normal

[Missy]

1) Script Title: Image thumbnail viewer II

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

3) Describe problem: I am new to java script, I have some background in visual basic, so I may be asking dumb questions here. I get the pictures to show up fine, but they dont go away. I am using them over other web content so that does not work, can anyone show me script to remove both the fade in and click?

Thanks, Missy

[ddadmin]

If you mean dismiss each enlarged image onmouseout, you can accomplish that by:

1) Adding the below function to the end of the script in the HEAD section:

function clearimage(loadarea){
var imgobj=document.getElementById(loadarea)
imgobj.innerHTML=""
}

2), Then, modify the HTML to include an onMouseout event:

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

[Missy]

I haven't got the fadeout working yet, I may just choose to use the click method. can you show me script to add, and where to add it so it makes the popup window closeable? and could you also describe how I would link the :

{<a href="#" onClick="return modifyimage('dynloadarea2', 2)">image 3 (onclick)</a></p>

to a thumbnail inside a table?


thanks again for any help you can be

[jscheuer1]

I haven't got the fadeout working yet, I may just choose to use the click method. can you show me script to add, and where to add it so it makes the popup window closeable?

First, take a few deep breaths.

There is no pop-up window with this script. DD already told you where to put the code:

. . . the end of the script in the HEAD section:

And, showed you how to use it in his previous post in this thread.

and could you also describe how I would link the :

{<a href="#" onClick="return modifyimage('dynloadarea2', 2)">image 3 (onclick)</a></p>

to a thumbnail inside a table?

It doesn't matter where the thumbnail is (at least not inside or outside of a table). Wherever you put this code (within reason):

<a href="#" onClick="return modifyimage('dynloadarea2', 2)">image 3 (onclick)</a>

you always have the option of substituting an image tag (green in the below) for the link text (red in the above):

<a href="#" onClick="return modifyimage('dynloadarea2', 2)"><img src="thumb_3.jpg" border="0"></a>

[Missy]

Thanks for the help, I got the mouseover working well, and I have the the mouse and on click events referencing thumbnail in a table. Next problem ... when I use a the onClick:

<a href="#" onClick="return modifyimage('dynloadarea', 0)"><img src="th000.JPG" border"0" width="40" height="60"><a>

it generates a nice picture on the screen, what I cant figure out is how to clear that image without refreshing the screen.

If you can help with this latest glitch I would be a happy girl

Missy

[jscheuer1]

Thanks for the help, I got the mouseover working well, and I have the the mouse and on click events referencing thumbnail in a table. Next problem ... when I use a the onClick:

<a href="#" onClick="return modifyimage('dynloadarea', 0)"><img src="th000.JPG" border"0" width="40" height="60"><a>

it generates a nice picture on the screen, what I cant figure out is how to clear that image without refreshing the screen.

If you can help with this latest glitch I would be a happy girl

Missy

When do you want it cleared? DD's code shows how to do so onmouseout of the thumbnail. Did you have another idea as to when this should happen?

[Missy]

Image thumbnail viewer II firs t listed option is:

Configure larger image to be shown via onClick or onMouseover of thumbnail.

If you use the onclick method of enlargement, and not the mouseover, there is no method to remove the enlarged display. I have the image being displayed, (it's) pretty big... it covers the thumbnails anyways. I was hoping for an X or something to clear the onclick event. I am really sorry if I am making this harder than it has to be.

Missy

[jscheuer1]

I'm often embarrassed at how much I have forgotten in the process of learning. I think this is one of those cases but, I am not sure yet. Did you think that removing the larger image would have to be different because it got there onclick?

Oh (light goes on), if you are covering your thumbnails, you need a different triggering mechanism than onmouseout of the thumbnail. I've got an idea. Try this:

<div id="dynloadarea" style="width:80px;height:225px" onmouseout="this.innerHTML='';"></div>

[Missy]

That's not what I wanted, but you showed me enough to figure it out. I used an onclick instead of onmouseout. And yes, I did think because it was called by onclick, I need another method to remove it.

Thank you so much for the help.. I will go on from here... examining some problems with firefox silly script isn't liking it much.. I will have to tidy my syntax and what not and see what happens. If you have any pearls of wisdom at hand about Image file Viewer II and Firefox, I would be happy to listen

Till I bother you again, Missy

[jscheuer1]

Well, the script itself works about identically in FF as in IE. The one notable exception being the sweep fade. FF doesn't do any kind of filters. In fact no browser does except IE. FF can fade but, it would require a different script like the Ultimate Fade-in slide show (v1.5) or the Swiss Army Image slideshow which both employ a dual display canvass that uses css opacity and scripted routines to fade each canvass, one into the other.

I did mod Swiss Army to be close to Image Thumbnail Viewer II here:

http://home.comcast.net/~jscheuer1/s..._ext_thumb.htm

However, I don't think we could get it to work while at the same time having it covering and uncovering the thumbnails.

Another big difference between IE and FF is that IE will do document.all (and supports many implied uses of it) while FF requires document.getElementBy and document.getElementsBy methods (the most common is document.getElementById) for similar sorts of operations. The document.getElementBy methods have no implied usage. IE can do it either way.

Anyways, perhaps more than you needed to know. If you are having any specific problem in FF let me know.