|
|
Posted by Martin on 07/20/05 18:28
On 20 Jul 2005 07:38:11 -0700, "Steve Pugh" <steve@pugh.net> wrote:
>Martin wrote:
>> On Tue, 19 Jul 2005 17:27:29 +0100, Steve Pugh <steve@pugh.net> wrote:
>>
>> >Martin <martinvalley@comcast.net> 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;
>> filter:progid:DXImageTransform.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.
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
Navigation:
[Reply to this message]
|