Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > PNG image - transparent part clickable in Firefox

Reply
Thread Tools

PNG image - transparent part clickable in Firefox

 
 
Martin
Guest
Posts: n/a
 
      07-19-2005
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?


 
Reply With Quote
 
 
 
 
Rovin
Guest
Posts: n/a
 
      07-19-2005
Martin wrote:
> 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.
 
Reply With Quote
 
 
 
 
code_wrong
Guest
Posts: n/a
 
      07-19-2005

"Martin" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
>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/


 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      07-19-2005
Martin <(E-Mail Removed)> wrote:

>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

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <(E-Mail Removed)> <http://steve.pugh.net/>
 
Reply With Quote
 
Martin
Guest
Posts: n/a
 
      07-19-2005
On Tue, 19 Jul 2005 17:27:29 +0100, Steve Pugh <(E-Mail Removed)> wrote:

>Martin <(E-Mail Removed)> wrote:
>
>>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.


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.AlphaImag eLoader(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.


>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


 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      07-19-2005
Martin wrote:
> On Tue, 19 Jul 2005 17:27:29 +0100, Steve Pugh <(E-Mail Removed)> wrote:
>
>
>>Martin <(E-Mail Removed)> wrote:
>>
>>
>>>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.

>
>
> 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.AlphaImag eLoader(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.
>
>
>
>>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

>
>


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!

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Martin
Guest
Posts: n/a
 
      07-19-2005
>
>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


 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      07-20-2005
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.

--
Neredbojias
Contrary to popular belief, it is believable.
 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      07-20-2005
Martin wrote:
> On Tue, 19 Jul 2005 17:27:29 +0100, Steve Pugh <(E-Mail Removed)> wrote:
>
> >Martin <(E-Mail Removed)> wrote:
> >
> >>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.

>
> 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.AlphaImag eLoader(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

 
Reply With Quote
 
Martin
Guest
Posts: n/a
 
      07-20-2005
On 20 Jul 2005 07:38:11 -0700, "Steve Pugh" <(E-Mail Removed)> wrote:

>Martin wrote:
>> On Tue, 19 Jul 2005 17:27:29 +0100, Steve Pugh <(E-Mail Removed)> wrote:
>>
>> >Martin <(E-Mail Removed)> wrote:
>> >
>> >>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.

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

>
>Oh joy.
>
>> In Firefox:

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

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

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


My most humble apologies - I have corrected this.

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


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

>> In Internet Explorer:
>>
>> <p style="position:absolute; left:100; top:180; height:10px;
>> width:10px; z-index:3; cursor:hand;
>> filterrogidXImageTransform.Microsoft.AlphaImag eLoader(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.


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


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


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

> Steve


 
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
How to make a transparent image through which is clickable ? mogwaii HTML 9 12-08-2010 05:06 PM
making part of a background image clickable laredotornado@zipmail.com Javascript 2 05-09-2007 07:46 PM
ANN: PNG image CAPTCHA with PNG canvas available (SkimpyGimpy) aaronwmail-usenet@yahoo.com Python 0 04-18-2007 07:33 PM
Adding a png with transparent background to a Image button KrippZ@gmail.com ASP .Net 4 06-20-2006 02:53 PM
Transparent PNG Martin Eyles ASP .Net 6 12-02-2004 11:02 AM



Advertisments