How to make a transparent image through which is clickable ?

[mogwaii]

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.

 

[Jukka K. Korpela]

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.

 

[Mike Duffy]

"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.

 

[mogwaii]

"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.


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.


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.

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!

 

[Jonathan N. Little]

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

 

[mogwaii]

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

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

 

[Jonathan N. Little]

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.

 

[Jonathan N. Little]

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>

 

[Phillip Jones]

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.

 

[mogwaii]

Worksforme SeaMonkey.

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.