share space - display images in same position

[cate]

I have a span element that contains three hidden images. Only one
image of the group will be visible at one time. How can I show them
in the same space. I think this has something to do with positioning,
but I can make it work.

Thank you.

<span id="drillcheckmark" >
<span id="correct" style="visibility:hidden;"><img src="./
images/c.png" alt="green check - Correct" /></span>
<span id="wrong" style="visibility:hidden;"><img src="./
images/w.png" alt="red cross - Wrong" /></span>
<span id="questionmark" style="visibility:hidden;"><img src="./
images/q.png" alt="question mark" /></span>
</span>

[Ed Mullen]

My immediate question is:

What purpose does a "hidden" image serve? Image? Hidden? Why?

And your presentation of that code is not useful, visually.

And, a URL might prove very useful.

--
Ed Mullen
http://edmullen.net/
Nothing says poor craftsmanship more than wrinkled duct tape.

[Chris F.A. Johnson]

Use display:none

With visibility:hidden they still take up space.

--
Chris F.A. Johnson
<http://torontowebdesign.cfaj.ca/>

[cate]

>    Use display:none
>
>    With visibility:hidden they still take up space.
>
> --
> Chris F.A. Johnson
> <http://torontowebdesign.cfaj.ca/>

Thanks Chris. Worked great.

[Jukka K. Korpela]

2013-04-18 3:56, cate wrote:

> I have a span element that contains three hidden images. Only one
> image of the group will be visible at one time. How can I show them
> in the same space. I think this has something to do with positioning,
> but I can make it work.

This could be done with positioning, but there is no positioning
attempted in the code now:

> <span id="drillcheckmark" >
> <span id="correct" style="visibility:hidden;"><img src="./
> images/c.png" alt="green check - Correct" /></span>
> <span id="wrong" style="visibility:hidden;"><img src="./
> images/w.png" alt="red cross - Wrong" /></span>
> <span id="questionmark" style="visibility:hidden;"><img src="./
> images/q.png" alt="question mark" /></span>
> </span>

As Chris wrote, you could use display: none instead of visibility: hidden.

Another approach would be to make the outer <span> relatively positioned
and inner <span> elements "absolutely" positioned (which really means
positioning them relative to the outer span) to the same position, and
using z-index to control which of them is topmost. There would be
complications if the images had some transparency.

But since this is obviously for a page with functionality coded in
client-side JavaScript, the simplest solution is to have just one <img>
element and change its src and alt properties dynamically. You may wish
to have some initialization code on the page that preloads the images,
by just generating Image objects without actually showing them yet, to
avoid delays during the use of the page.

--
Yucca, http://www.cs.tut.fi/~jkorpela/