Results 1 to 3 of 3

Thread: Image Thumbnail Viewer II

  1. #1
    Join Date
    Nov 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Image Thumbnail Viewer II

    Hello,
    I have a question that hopefully has a solution. I am using the Image Thumbnail Viewer II from the following url: http://www.dynamicdrive.com/dynamicindex4/index6.html
    I am using the text version with the mouseover feature. My question, is there a way to preload an image into the same area where the images load from the mouseover. I love the script, however, when you initially load the page, there is a blank spot where the mouseover images go and I would love to be able to have an image loaded there when the page loads. Is this possible?

    Here is an example:
    link picture loads here when mouse is over link
    link picture loads here when mouse is over link
    etc.
    You see where I note "picture loads here when mouse is over link"? This is the blank area when page is loaded and where I would like to preload an image.

    Thank you,

    Janisrae
    Last edited by Snookerman; 04-22-2009 at 01:50 PM. Reason: added “Resolved” prefix

  2. #2
    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

    HTML Code:
    <div id="dynloadarea" style="width:80px;height:225px"></div>
    
    <div id="dynloadarea2" style="width:80px;height:200px"></div>
    The above are the two areas from the demo where the larger pictures appear onmouseover of the thumbnails or texts, respectively. Whichever, one(s) you are using (or even if you made a custom one), you can add an initial image tag to it like so:

    HTML Code:
    <div id="dynloadarea" style="width:80px;height:225px"><img src="initial.jpg"></div>
    Where 'initial.jpg' can be any image you like. Since it is just an ordinary image tag, you can add any other valid attributes or style to it that you like. You could even make it a link in the usual HTML manner:

    HTML Code:
    <div id="dynloadarea" style="width:80px;height:225px"><a href="some.htm"><img src="initial.jpg"></a></div>
    The beauty part is, whatever you put there will disappear as soon as one of the thumb or text triggers is activated by a mouseover and be replaced by the content configured for it in the script.
    - John
    ________________________

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

  3. #3
    Join Date
    Nov 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Wow!
    That is excellent. Thank you for the code and the timely response. I'm off to try it.

    Janis

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
  •