|
|
Posted by Martin on 07/21/05 15:27
On 21 Jul 2005 02:50:22 -0700, "Steve Pugh" <steve@pugh.net> wrote:
>Martin wrote:
>> On 20 Jul 2005 07:38:11 -0700, "Steve Pugh" <steve@pugh.net> wrote:
>> >Martin wrote:
>
>> >> In Firefox:
>> >> 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.
>> >
>> >> 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.
>
>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.
>> 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/default.asp?url=/workshop/author/filter/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.
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.
>If you want FF to act like IE then you need to use an image as myself
>and others have previously stated.
>
> Steve
Navigation:
[Reply to this message]
|