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>

 

[Chris F.A. Johnson]

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>

Use display:none

With visibility:hidden they still take up space.

 

[cate]

   Use display:none

   With visibility:hidden they still take up space.

Thanks Chris. Worked great.

 

[Jukka K. Korpela]

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.