Results 1 to 10 of 10

Thread: fading back to normal

  1. #1
    Join Date
    Feb 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default fading back to normal

    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

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    function clearimage(loadarea){
    var imgobj=document.getElementById(loadarea)
    imgobj.innerHTML=""
    }
    2), Then, modify the HTML to include an onMouseout event:

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

  3. #3
    Join Date
    Feb 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Missy View Post
    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:

    Quote Originally Posted by DD
    . . . the end of the script in the HEAD section:
    And, showed you how to use it in his previous post in this thread.


    Quote Originally Posted by Missy View Post
    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):

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

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Feb 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Missy View Post
    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?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Feb 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Feb 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •