PNG image - transparent part clickable in Firefox

[Martin]

I have some .png images that have transparent areas in them. I'm
executing some scripting in the onclick event. I would like for this
to occur only when the pointer is over the visible portion of the
image but, in Firefox, the transparent areas are clickable also. Is
there any way to prevent this?

 

[Rovin]

I have some .png images that have transparent areas in them. I'm
executing some scripting in the onclick event. I would like for this
to occur only when the pointer is over the visible portion of the
image but, in Firefox, the transparent areas are clickable also. Is
there any way to prevent this?

You could use an image map to define clickable areas on the image.

 

[code_wrong]

I have some .png images that have transparent areas in them. I'm
executing some scripting in the onclick event. I would like for this
to occur only when the pointer is over the visible portion of the
image but, in Firefox, the transparent areas are clickable also. Is
there any way to prevent this?

Are you sure you want to use png?
http://entropymine.com/jason/testbed/pngtrans/

 

[Steve Pugh]

I have some .png images that have transparent areas in them. I'm
executing some scripting in the onclick event. I would like for this
to occur only when the pointer is over the visible portion of the
image but, in Firefox, the transparent areas are clickable also.

Only in Firefox? I would have thought that <img src="foo.png alt="foo"
onclick="whatever()"> would affect the whole image in _all_ browsers.

If it is only in FF then I suspect that you have something more
complex going on, possibly involving CSS positioning. Just a wild
guess as you didn't provide a URL to demonstrate your problem.

Is there any way to prevent this?

Only by using an image map.

Steve

 

[Martin]

Only in Firefox? I would have thought that <img src="foo.png alt="foo"
onclick="whatever()"> would affect the whole image in _all_ browsers.

Actually, I'm using different code to display the image in different
browsers:

In Firefox:

<p style="position:absolute; left:100; top:180; height:10px;
width:10px; z-index:3; cursor:hand;"> <img
src='./graphics/TestFile.png' onClick="alert(this.title);"
title="Device: Device Name Wire: 21"></p>

In Internet Explorer:

<p style="position:absolute; left:100; top:180; height:10px;
width:10px; z-index:3; cursor:hand;
filterrogidXImageTransform.Microsoft.AlphaImageLoader(src='./graphics/ConvCurve.png');"
onClick="alert(this.title);" title="Device: Device Name Wire:
21"></p>

In IE, the "hand" cursor appears only when it's over the visible part
of the image; in Firefox, it appears when it's anywhere over the
image.

 

[Jonathan N. Little]

Actually, I'm using different code to display the image in different
browsers:

In Firefox:

<p style="position:absolute; left:100; top:180; height:10px;
width:10px; z-index:3; cursor:hand;"> <img
src='./graphics/TestFile.png' onClick="alert(this.title);"
title="Device: Device Name Wire: 21"></p>

In Internet Explorer:

<p style="position:absolute; left:100; top:180; height:10px;
width:10px; z-index:3; cursor:hand;
filterrogidXImageTransform.Microsoft.AlphaImageLoader(src='./graphics/ConvCurve.png');"
onClick="alert(this.title);" title="Device: Device Name Wire:
21"></p>

In IE, the "hand" cursor appears only when it's over the visible part
of the image; in Firefox, it appears when it's anywhere over the
image.

Are you sure in IE the 'hand' cursor is *only* occurring over the
visible parts of the image and not really over the 10x10 rectangle on
the image dimensions? How about a URL? I'd like to see this one!

 

[Martin]

Are you sure in IE the 'hand' cursor is *only* occurring over the
visible parts of the image and not really over the 10x10 rectangle on
the image dimensions? How about a URL? I'd like to see this one!

Yes - that's the way it looks to me.

This is all part of some R&D / learning that I doing for some pages
that are used only on an intranet. I'm currently using VML to display
my graphics; but I'm trying to find something that will work in
browsers other than IE.

My graphics are extremely simple - just rectangles and arcs. But they
represent the real-time status of an industrial process.

I've posted two versions of a test page that I've been working with on
my Comcast "home" site. Here are the URL's (I'll remove these in a day
or so)

This one is the page that works like I want it to in IE.

http://home.comcast.net/~martinvalley/MyPageCC.html


This one displays in IE but, of course the transparent parts are not
transparent. When viewed in Firefox, they are transparent but still
clickable (which was what led to my original question).

http://home.comcast.net/~martinvalley/MyPageFFCC.html

 

[Neredbojias]

With neither quill nor qualm, code_wrong quothed

Are you sure you want to use png?
http://entropymine.com/jason/testbed/pngtrans/

Nice page there, cw. Simple and very informative.

 

[Steve Pugh]

Actually, I'm using different code to display the image in different
browsers:

Oh joy.

In Firefox:

Presumably also Safari, Opera and unknown browsers?

<p style="position:absolute; left:100; top:180; height:

100 what? 180 what? units are required for all non-zero lengths in CSS.

10px; width:10px; z-index:3; cursor:hand;"> <img
src='./graphics/TestFile.png' onClick="alert(this.title);"
title="Device: Device Name Wire: 21"></p>

Here you have a 10px x 10px paragraph that contains an image which may
or may not fit within those dimensions. If it doesn't fit then it will
spill out of the 10x10 limits. The whole image is clickable.

cursor: hand is a MS-ism. Use cursor: pointer; for non-MS browsers.
It's also supported by recent versions of MSIE, so drop cursor: hand
altogether if you're using "cutting edge" stuff like alpha channel
PNGs.

In Internet Explorer:

<p style="position:absolute; left:100; top:180; height:10px;
width:10px; z-index:3; cursor:hand;
filterrogidXImageTransform.Microsoft.AlphaImageLoader(src='./graphics/ConvCurve.png');"
onClick="alert(this.title);" title="Device: Device Name Wire:
21"></p>

Here you have a 10px x 10px paragraph with a special sort of background
image (which is what AlphaImageLoader produces). The 10x10 pragraph is
clickable.

See the difference? In one case an image is clickable, in the other
case a 10x10 paragraph is clickable. You're not comparing like with
like.

In IE, the "hand" cursor appears only when it's over the visible part
of the image; in Firefox, it appears when it's anywhere over the
image.

Are there both visible and transparent parts in the 10x10 part of the
image?

Steve

 

[Martin]

Oh joy.


Presumably also Safari, Opera and unknown browsers?

I haven't tested it in these other browsers. But, in any case, do you
know a better way? IE won't display the transparent areas unless the
AlphaImageLoader is used and the other browsers don't need it.

100 what? 180 what? units are required for all non-zero lengths in CSS.

My most humble apologies - I have corrected this.

Here you have a 10px x 10px paragraph that contains an image which may
or may not fit within those dimensions. If it doesn't fit then it will
spill out of the 10x10 limits. The whole image is clickable.

cursor: hand is a MS-ism. Use cursor: pointer; for non-MS browsers.
It's also supported by recent versions of MSIE, so drop cursor: hand
altogether if you're using "cutting edge" stuff like alpha channel
PNGs.

OK - I changed "hand" to "pointer".

Here you have a 10px x 10px paragraph with a special sort of background
image (which is what AlphaImageLoader produces). The 10x10 pragraph is
clickable.

See the difference? In one case an image is clickable, in the other
case a 10x10 paragraph is clickable. You're not comparing like with
like.

As I understand it, the size of the paragraph is irrelevant. The
entire image in each paragraph (there are quite a few on each finished
page) is displayed in any case. I'm specifying that simply because
that's what was in the example that I started with.

The clickable area is NOT as you describe. The clickable area very
clearly encompasses the visible portion of the image when displayed in
IE and it encompasses the entire image when displayed in Firefox.

As I mentioned in my last post, the pages I'm developing are for
intranet use only (and a limited number of different browsers) and
thus cannot be viewed. I have uploaded a couple of examples to my
Comcast website. You can see them here:

http://home.comcast.net/~martinvalley/MyPageCC.html

http://home.comcast.net/~martinvalley/MyPageFFCC.html

Are there both visible and transparent parts in the 10x10 part of the
image?

I don't know because I don't know where the 10X10 part of the image
is.

 

[Animesh Kumar]

Martin wrote:
<snip>

Presumably also Safari, Opera and unknown browsers?




100 what? 180 what? units are required for all non-zero lengths in CSS.

Is that so? IIRC, blogger (blogspot.com, CSS based) works without units
for the image-border and image width (I didn't try more fields,
however). May be they are pixel by default --- but then your claim is
about *all*.

Kindly enlighten.

Best
A

 

[Steve Pugh]

Is that so?

Yes. Feel free to check the CSS specification yourself.

IIRC, blogger (blogspot.com, CSS based) works without
units for the image-border and image width (I didn't try
more fields, however).

There are lots of badly written web sites out there. Blogger is just
one of them.

May be they are pixel by default

There is no default, read the CSS spec.

but then your claim is about *all*.

Kindly enlighten.

Many web sites are badly written. In order to make baly written web
sites display vaguely as the author intended browsers are full to the
brim with error correcting code. The fact that several browsers treat
no units as px doesn't make it any less wrong.

Enlightened?

Steve

 

[Steve Pugh]

As I understand it, the size of the paragraph is irrelevant.

So it seems. But for somewhat interesting reasons. Add
p {border: 1px solid red;}
img {border: 1px solid yellow;}
to your CSS and you'll see that in FF the paragraph is 10px x 10px but
the image spills out of that area.

If you had put the onClick event handler on the paragraph in FF as you
had in IE then only the 10x10 region defined by the paragraph would be
clickable.

I would either drop the width and height properties or change the 10px
values to the actual width and height of the image contained within the
paragraph. It probably won't make much difference to the behaviour but
it will be more logical.

The entire image in each paragraph (there are quite a few
on each finished page) is displayed in any case.

Yes. I missed this:
http://msdn.microsoft.com/library/d...ilter/reference/properties/sizingmethod_1.asp
Where it says:
"Default. Enlarges or reduces the border of the object to fit the
dimensions of the image."

So even though the PNG is effectively a background image (it's actually
a special layer between the background and content) of the paragraph,
the paragraph is still being extended to cover the whole of the image.

The clickable area is NOT as you describe. The clickable area very
clearly encompasses the visible portion of the image when displayed in
IE and it encompasses the entire image when displayed in Firefox.

You've made the whole image clickable in FF. That's all well and good
and as expected.

The fact that only the non-transpararent parts of the paragraph are not
clickable in IE is bizarre and the answer may lie somewhere in the MSDN
documentation. Just one of the bizarre aspects of the rather bizarre MS
fliters technology.

If you want FF to act like IE then you need to use an image as myself
and others have previously stated.

Steve

 

[Steve Pugh]

If you want FF to act like IE then you need to use an image as myself
and others have previously stated.

.... need to use an image MAP ...

Whoops, sorry.

Steve

 

[Martin]

So it seems. But for somewhat interesting reasons. Add
p {border: 1px solid red;}
img {border: 1px solid yellow;}
to your CSS and you'll see that in FF the paragraph is 10px x 10px but
the image spills out of that area.

If you had put the onClick event handler on the paragraph in FF as you
had in IE then only the 10x10 region defined by the paragraph would be
clickable.

I would either drop the width and height properties or change the 10px
values to the actual width and height of the image contained within the
paragraph. It probably won't make much difference to the behaviour but
it will be more logical.

Just for grins, I tried this. Without the width and height properties
specified, the image isn't displayed at all.

Yes. I missed this:
http://msdn.microsoft.com/library/d...ilter/reference/properties/sizingmethod_1.asp
Where it says:
"Default. Enlarges or reduces the border of the object to fit the
dimensions of the image."

So even though the PNG is effectively a background image (it's actually
a special layer between the background and content) of the paragraph,
the paragraph is still being extended to cover the whole of the image.


You've made the whole image clickable in FF. That's all well and good
and as expected.

The fact that only the non-transpararent parts of the paragraph are not
clickable in IE is bizarre and the answer may lie somewhere in the MSDN
documentation. Just one of the bizarre aspects of the rather bizarre MS
fliters technology.

Correction:

The non-transparent parts of the image ARE clickable.

I don't consider such to be bizarre at all. To me, that is the way it
should work. If something is visible it can be clicked on - if it's
not visible, it can't be clicked on. It makes perfect sense. Why
should something that can't be seen be clickable?

In my situation, some of these images overlap. With the entire image
being clickable (as in FF), it becomes possible to click on the wrong
item and not even know it. In my example, clicking on the grey bar
near the angled green one is an example of this. The title for the
wrong image is displayed and the user would have no way of knowing it.

 

[Steve Pugh]

Correction:

The non-transparent parts of the image ARE clickable.

Yeah, yeah, yeah. Sorry about the slip up.

I don't consider such to be bizarre at all.
To me, that is the way it should work.
If something is visible it can be clicked on - if it's
not visible, it can't be clicked on. It makes perfect sense. Why
should something that can't be seen be clickable?

It is bizarre. The rest of the WWW doesn't work like that.

After all, for some users nothing on the web is "seen" at all.

What does IE do if those portions of the PNG have 1% opacity instead of
0% opacity?

But enough of IE's bizarreness (which you're happy with) let's turn
back to the perfectly normal behaviour of FF...

As far as FF is concerned what you have is no different to a
transparent GIF. Do you expect only the non-transparent parts of GIFs
to be clickable?

In my situation, some of these images overlap. With the entire image
being clickable (as in FF), it becomes possible to click on the wrong
item and not even know it.

That's a bigger problem than you originally described. Image mapping
inidvidual images won't help you there.

Don't overlap the images. Or make it one big image and image map that
image.

FF is just seeing an ordinary image. Apart from image map hotspots
there are no non-rectangular shapes in HTML/CSS. That's the end of it.
Use an image map or turn the whole thing into a Flash movie or
something. T

I suppose you could write a JavaScript function that exmained the
coordinates of every mouse click and compared that to predefined data
on what should be showing on screen at that point and then act
accordingly. I don't think JS can access the internal specifics of the
PNG files so you'd probably need to hard code the data into the JS.
That would be nasty.

Steve