theoretical "hidden images"

[Richard]

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.

 

[rf]

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.

 

[Toby A Inkster]

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

 

[Richard]

Richard wrote:

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]

Richard wrote:

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.