Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > How to make a transparent image through which is clickable ?

Reply
Thread Tools

How to make a transparent image through which is clickable ?

 
 
mogwaii
Guest
Posts: n/a
 
      12-05-2010


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.
 
Reply With Quote
 
 
 
 
Jukka K. Korpela
Guest
Posts: n/a
 
      12-05-2010
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/

 
Reply With Quote
 
 
 
 
Mike Duffy
Guest
Posts: n/a
 
      12-05-2010
"Jukka K. Korpela" <(E-Mail Removed)> wrote in
news:OnOKo.30892$(E-Mail Removed):

> 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.
 
Reply With Quote
 
mogwaii
Guest
Posts: n/a
 
      12-06-2010
On 5 pro, 16:39, "Jukka K. Korpela" <(E-Mail Removed)> 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!






 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-06-2010
mogwaii wrote:
> On 5 pro, 16:39, "Jukka K. Korpela"<(E-Mail Removed)> 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
 
Reply With Quote
 
mogwaii
Guest
Posts: n/a
 
      12-06-2010
On 6 pro, 13:31, "Jonathan N. Little" <(E-Mail Removed)> wrote:
> mogwaii wrote:
> > On 5 pro, 16:39, "Jukka K. Korpela"<(E-Mail Removed)> *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
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-06-2010
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
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-06-2010
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
 
Reply With Quote
 
Phillip Jones
Guest
Posts: n/a
 
      12-07-2010
123Jim wrote:
> "123Jim"<(E-Mail Removed)> wrote in message
> news:idjk2k$c0u$(E-Mail Removed)-september.org...
>>
>> "123Jim"<(E-Mail Removed)> wrote in message
>> news:idjjo6$7vm$(E-Mail Removed)-september.org...
>>>
>>> "123Jim"<(E-Mail Removed)> wrote in message
>>> news:idjib1$pkp$(E-Mail Removed)-september.org...
>>>>
>>>> "mogwaii"<(E-Mail Removed)> wrote in message
>>>> news:(E-Mail Removed)...
>>>>>
>>>>>
>>>>> 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...t_webpage.html

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

>
>
> Hmmm , well I found this:
> http://css-tricks.com/css-transparen...-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(E-Mail Removed)
 
Reply With Quote
 
mogwaii
Guest
Posts: n/a
 
      12-08-2010
On 7 pro, 01:02, Phillip Jones <(E-Mail Removed)> wrote:
> 123Jim wrote:
> > "123Jim"<(E-Mail Removed)> ┬*wrote in message
> >news:idjk2k$c0u$(E-Mail Removed)-september.org...

>
> >> "123Jim"<(E-Mail Removed)> ┬*wrote in message
> >>news:idjjo6$7vm$(E-Mail Removed)-september.org...

>
> >>> "123Jim"<(E-Mail Removed)> ┬*wrote in message
> >>>news:idjib1$pkp$(E-Mail Removed)-september.org...

>
> >>>> "mogwaii"<(E-Mail Removed)> ┬*wrote in message
> >>>>news:(E-Mail Removed)....

>
> >>>>> 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...t_webpage.html

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

>
> > Hmmm , well I found this:
> >http://css-tricks.com/css-transparen...-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(E-Mail Removed)- 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.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
HELP! When I Send Email, How Can I Make a Link/URL "Clickable" Me Computer Support 4 08-29-2006 03:01 PM
PNG image - transparent part clickable in Firefox Martin HTML 15 07-21-2005 01:44 PM
Make cells in Table webcontrol 'clickable'? Paul W ASP .Net 9 10-03-2004 10:18 PM
Make the whole row clickable in datagrid RJN ASP .Net 1 09-27-2004 04:59 PM



Advertisments