theoretical "hidden images"

Discussion in 'HTML' started by Richard, Oct 8, 2003.

  1. Richard

    Richard Guest

    Whilst pondering a few ideas today, a brainstorm of an idea hit.
    In using dvision tags, one can literally place div under div, under div,
    under div and so on.
    With all attributes being precisely equal for each div, with only the name
    differing.
    using the onmouseover="document.name1.src"="newimage.jpg" technique, this
    works out quite well.
    But I found out quickly that the top image had to be shown last in the list
    of div tags.
    The end effect being the swapping of the top image with the next image in
    the field.

    No preloading involved.

    I was wondering if this technique would resolve the problem of waiting for
    loading the swap image?
    I would think that waiting time would be nill since the image has already
    been loaded, it's just not visible.
    Has anyone tried this before?

    I may put up a demo tomorrow if you can't understand what I'm doing.
    Richard, Oct 8, 2003
    #1
    1. Advertising

  2. Richard

    rf Guest

    "Richard" <anom@anom> wrote in message
    news:...
    > Whilst pondering a few ideas today, a brainstorm of an idea hit.
    > In using dvision tags, one can literally place div under div, under div,
    > under div and so on.
    > With all attributes being precisely equal for each div, with only the name
    > differing.
    > using the onmouseover="document.name1.src"="newimage.jpg" technique, this
    > works out quite well.
    > But I found out quickly that the top image had to be shown last in the

    list
    > of div tags.
    > The end effect being the swapping of the top image with the next image in
    > the field.
    >
    > No preloading involved.
    >
    > I was wondering if this technique would resolve the problem of waiting for
    > loading the swap image?


    No, it would not.

    > I would think that waiting time would be nill since the image has already
    > been loaded, it's just not visible.


    The waiting time to show the image on rollover would be nill but all the
    images have to be downloaded before the page gets displayed. The effect you
    achieve is exactly the same as using javascript to preload the images. In
    addition, this will not work when javascript is disabled whereas using CSS
    to swap the images will (nobody disables CSS). The javascript preloading is
    just icing, it is not required to make the page work.

    > Has anyone tried this before?


    No. CSS image swaping and *optional* javascript preloading is much better.

    Cheers
    Richard.

    Cheers
    Richard.
    rf, Oct 8, 2003
    #2
    1. Advertising

  3. Richard wrote:

    > Whilst pondering a few ideas today, a brainstorm of an idea hit.


    Except that your plan falls apart in non-CSS browsers.

    Instead just include this near the top of your file:

    <img src="image1.png" alt="" title="Preload" height="1" width="1">
    <img src="image2.png" alt="" title="Preload" height="1" width="1">
    <img src="image3.png" alt="" title="Preload" height="1" width="1">

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?id=132
    Toby A Inkster, Oct 8, 2003
    #3
  4. Richard

    Richard Guest

    Toby wrote:

    > Richard wrote:


    >> Whilst pondering a few ideas today, a brainstorm of an idea hit.


    > Except that your plan falls apart in non-CSS browsers.


    > Instead just include this near the top of your file:


    > <img src="image1.png" alt="" title="Preload" height="1" width="1">
    > <img src="image2.png" alt="" title="Preload" height="1" width="1">
    > <img src="image3.png" alt="" title="Preload" height="1" width="1">


    I can see where that might be more feasible.
    At least the images would be loaded before the work is actually done.

    here's what I came up with:

    ..top{position:absolute left:10px; top:10px;}
    ..a1{position:absolute left:10px; top:10px;}
    ..b2{position:absolute left:10px; top:10px;}

    <div class="b2"><img src=name3.jpg></div>
    <div class="a1"><img src=name2.jpg></div>
    <div class="top"> <img src=name1.jpg name=main></div

    What ever is listed last will be the image on top.

    <a href=# onmouseover=document.main.src=name2.jpg>try this</a>
    Richard, Oct 8, 2003
    #4
  5. Richard

    Richard Guest

    Toby wrote:

    > Richard wrote:


    >> Whilst pondering a few ideas today, a brainstorm of an idea hit.


    > Except that your plan falls apart in non-CSS browsers.


    > Instead just include this near the top of your file:


    > <img src="image1.png" alt="" title="Preload" height="1" width="1">
    > <img src="image2.png" alt="" title="Preload" height="1" width="1">
    > <img src="image3.png" alt="" title="Preload" height="1" width="1">


    Played around with that and it does seem to work better.
    I'll put up a sample and those with dialup can report how it loads and
    works.
    Richard, Oct 8, 2003
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Tim
    Replies:
    4
    Views:
    515
    Jon A. Cruz
    Feb 11, 2004
  2. R
    Replies:
    2
    Views:
    395
    Esmond Pitt
    Mar 15, 2005
  3. Materialised

    Theoretical Problem

    Materialised, Nov 21, 2003, in forum: C Programming
    Replies:
    16
    Views:
    534
  4. The Cool Giraffe
    Replies:
    2
    Views:
    289
    Zeppe
    Apr 19, 2007
  5. Joseph Ferris
    Replies:
    0
    Views:
    446
    Joseph Ferris
    Jan 7, 2008
Loading...

Share This Page