How to make a transparent image through which is clickable ?

Discussion in 'HTML' started by mogwaii, Dec 5, 2010.

  1. mogwaii

    mogwaii Guest

    The image would be on the top of the content and it would be clickable
    through it ...

    how to do it ?


    i did it once a hour ago, but it was non-compatible with co-browsers,
    only IE6.0.


    Thanks.

    Merry St.Nicolaus.
    mogwaii, Dec 5, 2010
    #1
    1. Advertising

  2. mogwaii wrote:

    > The image would be on the top of the content and it would be clickable
    > through it ...


    "On top" is ambiguous - above in which dimension? I understand "clickable",
    but what should happen when it is clicked, and what does "through it" mean.

    > how to do it ?


    The simplest interpretation of the question that I can see is that a
    transparent image would appear on top of other content in the z dimension
    (i.e., appearing between the viewer's eyes and the other content) and
    clicking on it would take the browser to some specific web page.

    The obvious answer is to use normal link markup <a href="..."><img alt="..."
    src="..."></a> and to make that element absolutely positioned in the desired
    place, with a sufficiently large z-index value. This CSS-based answer looks
    too obvious to me, so I guess the question is actually more complicated.

    > i did it once a hour ago, but it was non-compatible with co-browsers,
    > only IE6.0.


    Well you could have posted the URL - those who have IE 6 could then have
    seen what you really mean and might perhaps suggest how to achieve it in a
    cross-browser way.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Dec 5, 2010
    #2
    1. Advertising

  3. mogwaii

    Mike Duffy Guest

    "Jukka K. Korpela" <> wrote in
    news:OnOKo.30892$:

    > mogwaii wrote:
    >
    >> The image would be on the top of the content and it would be
    >> clickable through it ...

    >
    > "On top" is ambiguous - above in which dimension? I understand
    > "clickable", but what should happen when it is clicked, and what
    > does "through it" mean.


    Perhaps Mogwaii means that he wants to do either:

    a) Use HTML image map elements, or
    b) Use an image as the background of a div element, and act on mouse
    click coordinates within the div.

    Co-incidentally, I actually have a web page that uses both of the above:

    http://pages.videotron.com/duffym/astro.htm

    You can use a mouseover on the astronomical symbols for the planets and
    stars to get further information about them. The clickable div is the map
    of the world further down the page where you can select the observer's
    location.
    Mike Duffy, Dec 5, 2010
    #3
  4. mogwaii

    mogwaii Guest

    On 5 pro, 16:39, "Jukka K. Korpela" <> wrote:
    > mogwaii wrote:
    > > The image would be on the top of the content and it would be clickable
    > > through it ...

    >
    > "On top" is ambiguous - above in which dimension? I understand "clickable",
    > but what should happen when it is clicked, and what does "through it" mean.
    >
    > > how to do it ?

    >
    > The simplest interpretation of the question that I can see is that a
    > transparent image would appear on top of other content in the z dimension
    > (i.e., appearing between the viewer's eyes and the other content) and
    > clicking on it would take the browser to some specific web page.
    >
    > The obvious answer is to use normal link markup <a href="..."><img alt="..."
    > src="..."></a> and to make that element absolutely positioned in the desired
    > place, with a sufficiently large z-index value. This CSS-based answer looks
    > too obvious to me, so I guess the question is actually more complicated.
    >
    > > i did it once a hour ago, but it was non-compatible with co-browsers,
    > > only IE6.0.

    >
    > Well you could have posted the URL - those who have IE 6 could then have
    > seen what you really mean and might perhaps suggest how to achieve it in a
    > cross-browser way.
    >
    > --
    > Yucca,http://www.cs.tut.fi/~jkorpela/



    A transparent image would be as you mentioned z-index with high number
    above all the content.

    But i didn't mean to click on it but through it, like it actually do
    not exist in a real sense, like it is nontouchable for mouse-touch-
    click but visible!
    mogwaii, Dec 6, 2010
    #4
  5. mogwaii wrote:
    > On 5 pro, 16:39, "Jukka K. Korpela"<> wrote:
    >> mogwaii wrote:
    >>> The image would be on the top of the content and it would be clickable
    >>> through it ...

    >>
    >> "On top" is ambiguous - above in which dimension? I understand "clickable",
    >> but what should happen when it is clicked, and what does "through it" mean.
    >>
    >>> how to do it ?

    >>
    >> The simplest interpretation of the question that I can see is that a
    >> transparent image would appear on top of other content in the z dimension
    >> (i.e., appearing between the viewer's eyes and the other content) and
    >> clicking on it would take the browser to some specific web page.
    >>
    >> The obvious answer is to use normal link markup<a href="..."><img alt="..."
    >> src="..."></a> and to make that element absolutely positioned in the desired
    >> place, with a sufficiently large z-index value. This CSS-based answer looks
    >> too obvious to me, so I guess the question is actually more complicated.
    >>
    >>> i did it once a hour ago, but it was non-compatible with co-browsers,
    >>> only IE6.0.

    >>
    >> Well you could have posted the URL - those who have IE 6 could then have
    >> seen what you really mean and might perhaps suggest how to achieve it in a
    >> cross-browser way.
    >>
    >> --
    >> Yucca,http://www.cs.tut.fi/~jkorpela/

    >
    >
    > A transparent image would be as you mentioned z-index with high number
    > above all the content.
    >
    > But i didn't mean to click on it but through it, like it actually do
    > not exist in a real sense, like it is nontouchable for mouse-touch-
    > click but visible!
    >


    No. You cannot make a "phantom" overlay, "clickable" elements must be
    overlay "non-clickable" bits...


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Dec 6, 2010
    #5
  6. mogwaii

    mogwaii Guest

    On 6 pro, 13:31, "Jonathan N. Little" <> wrote:
    > mogwaii wrote:
    > > On 5 pro, 16:39, "Jukka K. Korpela"<>  wrote:
    > >> mogwaii wrote:
    > >>> The image would be on the top of the content and it would be clickable
    > >>> through it ...

    >
    > >> "On top" is ambiguous - above in which dimension? I understand "clickable",
    > >> but what should happen when it is clicked, and what does "through it" mean.

    >
    > >>> how to do it ?

    >
    > >> The simplest interpretation of the question that I can see is that a
    > >> transparent image would appear on top of other content in the z dimension
    > >> (i.e., appearing between the viewer's eyes and the other content) and
    > >> clicking on it would take the browser to some specific web page.

    >
    > >> The obvious answer is to use normal link markup<a href="..."><img alt="..."
    > >> src="..."></a>  and to make that element absolutely positioned in the desired
    > >> place, with a sufficiently large z-index value. This CSS-based answer looks
    > >> too obvious to me, so I guess the question is actually more complicated.

    >
    > >>> i did it once a hour ago, but it was non-compatible with co-browsers,
    > >>> only IE6.0.

    >
    > >> Well you could have posted the URL - those who have IE 6 could then have
    > >> seen what you really mean and might perhaps suggest how to achieve it in a
    > >> cross-browser way.

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

    >
    > > A transparent image would be as you mentioned z-index with high number
    > > above all the content.

    >
    > > But i didn't mean to click on it but through it, like it actually do
    > > not exist in a real sense, like it is nontouchable for mouse-touch-
    > > click but visible!

    >
    > No. You cannot make a "phantom" overlay, "clickable" elements must be
    > overlay "non-clickable" bits...
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com



    so why did i had a situation where upon the image was clickable
    through it (!) as the image was transparent with its css atributes
    given for opacity. ?

    I think its doable, but maybe not cross-browser compatible. But, HEY,
    You all do a try and error methods to see what works and what
    doesn't... and than some brave guys and gals are copying finished
    method into their coding. I suppose it's doable, but it's not my
    primary occupation concerning this picture....

    thanks
    mogwaii, Dec 6, 2010
    #6
  7. mogwaii wrote:
    > so why did i had a situation where upon the image was clickable
    > through it (!) as the image was transparent with its css atributes
    > given for opacity. ?


    Where? URL?

    +-------------------------+
    | IMAGE not background |
    | ABS position over link |
    | |
    | .................... |
    | : Link underneath : |
    | : will *not* be : |
    | : clickable! : |
    | .................... |
    | |
    | |
    +-------------------------+


    You have an image map, but that is not what you are describing.


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Dec 6, 2010
    #7
  8. mogwaii wrote:
    > so why did i had a situation where upon the image was clickable
    > through it


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>No Click-Through</title>

    <style type="text/css">
    #noneshallclick { position: absolute; width: 15em; height: 5em; border:
    1px solid red; padding: 2em; color: red; }
    #clickable { margin-top: 8em; font-weight: bold; }
    </style>

    </head>
    <body>

    <div id="noneshallclick">
    This DIV, it could also have been an image, prevents clicking the link
    underneath. I have put a border to show size and placment of DIV
    </div>

    <p>
    You cannot <a href="#" onclick="alert('Success!')">click me</a>
    </p>

    <p id="clickable">
    But you can <a href="#" onclick="alert('Success!')">click me</a> because
    I am not covered by "noneshallclick"
    </p>

    </body>
    </html>
    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Dec 6, 2010
    #8
  9. 123Jim wrote:
    > "123Jim"<> wrote in message
    > news:idjk2k$c0u$-september.org...
    >>
    >> "123Jim"<> wrote in message
    >> news:idjjo6$7vm$-september.org...
    >>>
    >>> "123Jim"<> wrote in message
    >>> news:idjib1$pkp$-september.org...
    >>>>
    >>>> "mogwaii"<> wrote in message
    >>>> news:...
    >>>>>
    >>>>>
    >>>>> The image would be on the top of the content and it would be clickable
    >>>>> through it ...
    >>>>>
    >>>>> how to do it ?
    >>>>>
    >>>>>
    >>>>> i did it once a hour ago, but it was non-compatible with co-browsers,
    >>>>> only IE6.0.
    >>>>>
    >>>>>
    >>>>
    >>>>
    >>>> How about adding partial transparency to all the objects on your web
    >>>> page. In that way the background image will show through as though it
    >>>> might be on top (in front)
    >>>
    >>> eg
    >>> http://myweb.tiscali.co.uk/ladycroft/webdevfun/Transparent_webpage.html

    >>
    >> hmmph! .. doesn't work in IE

    >
    >
    > Hmmm , well I found this:
    > http://css-tricks.com/css-transparency-settings-for-all-broswers/
    > It now works in IE also ... but it is somewhat unsatisfactory to get a
    > message from IE about script something or other ..
    >
    >

    Worksforme SeaMonkey.

    --
    Phillip M. Jones, C.E.T. "If it's Fixed, Don't Break it"
    http://www.phillipmjones.net/ mailto:p
    Phillip Jones, Dec 7, 2010
    #9
  10. mogwaii

    mogwaii Guest

    On 7 pro, 01:02, Phillip Jones <> wrote:
    > 123Jim wrote:
    > > "123Jim"<>  wrote in message
    > >news:idjk2k$c0u$-september.org...

    >
    > >> "123Jim"<>  wrote in message
    > >>news:idjjo6$7vm$-september.org...

    >
    > >>> "123Jim"<>  wrote in message
    > >>>news:idjib1$pkp$-september.org...

    >
    > >>>> "mogwaii"<>  wrote in message
    > >>>>news:....

    >
    > >>>>> The image would be on the top of the content and it would be clickable
    > >>>>> through it ...

    >
    > >>>>> how to do it ?

    >
    > >>>>> i did it once a hour ago, but it was non-compatible with co-browsers,
    > >>>>> only IE6.0.

    >
    > >>>> How about adding partial transparency to all the objects on your web
    > >>>> page. In that way the background image will show through as though it
    > >>>> might be on top (in front)

    >
    > >>> eg
    > >>>http://myweb.tiscali.co.uk/ladycroft/webdevfun/Transparent_webpage.html

    >
    > >> hmmph! .. doesn't work in IE

    >
    > > Hmmm , well I found this:
    > >http://css-tricks.com/css-transparency-settings-for-all-broswers/
    > > It now works in IE also  ... but it is somewhat unsatisfactory to get a
    > > message from IE about script something or other ..

    >
    > Worksforme SeaMonkey.
    >
    > --
    > Phillip M. Jones, C.E.T.        "If it's Fixed, Don't Break it"http://www.phillipmjones.net/      mailto:p- Sakrij citirani tekst -
    >
    > - Prikaži citirani tekst -



    Hey folks,

    i would like to, but i can't simulate that code again when i did had
    that situation for click through.
    I think it was sith a new 1. table and with both tables with floating
    to left, but it doesn't show what i did made.
    Nevermind, i dare to say it is not so very important to dig head into.
    mogwaii, Dec 8, 2010
    #10
    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. RJN
    Replies:
    1
    Views:
    1,930
    =?Utf-8?B?U2NvdHQgU2ltb25z?=
    Sep 27, 2004
  2. Paul W
    Replies:
    9
    Views:
    665
    Alex Homer
    Oct 3, 2004
  3. Martin
    Replies:
    15
    Views:
    2,512
    Steve Pugh
    Jul 21, 2005
  4. mi
    Replies:
    4
    Views:
    13,522
    dorayme
    May 21, 2008
  5. john
    Replies:
    2
    Views:
    242
Loading...

Share This Page