share space - display images in same position

Discussion in 'HTML' started by cate, Apr 18, 2013.

  1. cate

    cate Guest

    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>
     
    cate, Apr 18, 2013
    #1
    1. Advertising

  2. On 2013-04-18, 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.
    >
    > 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.

    --
    Chris F.A. Johnson
    <http://torontowebdesign.cfaj.ca/>
     
    Chris F.A. Johnson, Apr 18, 2013
    #2
    1. Advertising

  3. cate

    cate Guest


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


    Thanks Chris. Worked great.
     
    cate, Apr 18, 2013
    #3
  4. 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/
     
    Jukka K. Korpela, Apr 18, 2013
    #4
    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. Shuo Xiang

    Stack space, global space, heap space

    Shuo Xiang, Jul 9, 2003, in forum: C Programming
    Replies:
    10
    Views:
    2,977
    Bryan Bullard
    Jul 11, 2003
  2. Christian Seberino
    Replies:
    21
    Views:
    1,798
    Stephen Horne
    Oct 27, 2003
  3. Ian Bicking
    Replies:
    2
    Views:
    1,105
    Steve Lamb
    Oct 23, 2003
  4. Ian Bicking
    Replies:
    2
    Views:
    783
    Michael Hudson
    Oct 24, 2003
  5. Saraswati lakki
    Replies:
    0
    Views:
    1,413
    Saraswati lakki
    Jan 6, 2012
Loading...

Share This Page