clickable images -- what is proper and your preferred method

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

clickable images -- what is proper and your preferred method

dr.cw.ray
Almost all images of any kind on the web these days are clickable, in
that they lead to a link or an image with a larger view.

Back when I was first learning xforms, I did everything I could using
xforms with little or no html. It worked so well in forcing me to see
how much could be done in xforms that I virtually forgot my html and
have to look things up all the time.

So I got in the habit of displaying clickable images (images that open
to an image only larger view) like so:

<xf:trigger appearance="minimal">
   <xf:label>
      <img class="right" src="image.jpg" style="max-height: 8ex;"
alt="image"/>
   </xf:label>
   <xf:load resource="image.jpg" show="new" ev:event="DOMActivate"/>
</xf:trigger>

Now I'm asking myself, now that I'm quite familiar with xforms, should
I not just use standard html to get the same effect? Like so:

<a href="image.jpg" target="_blank">
<img src="image.jpg" class="smallerPic">
</a>

I remember there was some bad press concerning the use of
target="_blank" a while back for some reason but it seems to be the de
facto standard.

btw--does xforms 1.1 have a better approach to clickable images since
they are so prevalent on the web?

How should I properly address this issue in my markup?
_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms
Reply | Threaded
Open this post in threaded view
|

Re: clickable images -- what is proper and your preferred method

Dion Sole
dr.cw.ray wrote:

> Almost all images of any kind on the web these days are clickable, in
> that they lead to a link or an image with a larger view.
>
> Back when I was first learning xforms, I did everything I could using
> xforms with little or no html. It worked so well in forcing me to see
> how much could be done in xforms that I virtually forgot my html and
> have to look things up all the time.
>
> So I got in the habit of displaying clickable images (images that open
> to an image only larger view) like so:
>
> <xf:trigger appearance="minimal">
>    <xf:label>
>       <img class="right" src="image.jpg" style="max-height: 8ex;"
> alt="image"/>
>    </xf:label>
>    <xf:load resource="image.jpg" show="new" ev:event="DOMActivate"/>
> </xf:trigger>
>
> Now I'm asking myself, now that I'm quite familiar with xforms, should
> I not just use standard html to get the same effect? Like so:
>
> <a href="image.jpg" target="_blank">
> <img src="image.jpg" class="smallerPic">
> </a>
>
> I remember there was some bad press concerning the use of
> target="_blank" a while back for some reason but it seems to be the de
> facto standard.
>
> btw--does xforms 1.1 have a better approach to clickable images since
> they are so prevalent on the web?
>
> How should I properly address this issue in my markup?
show="new" and target="_blank" are both as bad as each other as far as
usability goes, since they both force opening in a new window/tab. This is what
was considered bad about target="_blank".
For images though, you're much better off using the normal HTML anchor, since
it allows for actual link-like behaviour (i.e. normal click to open in current
tab, mouse-wheel click to open in new tab etc.), while the xforms trigger doesn't.
And if you really want to help with accessibility, make sure your <img/>
includes a good alt text.
_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms
Reply | Threaded
Open this post in threaded view
|

Re: clickable images -- what is proper and your preferred method

dr.cw.ray
In reply to this post by dr.cw.ray
On Aug 20, 2:55 pm, Dion Sole <[hidden email]> wrote:

> dr.cw.ray wrote:
> > Almost all images of any kind on the web these days are clickable, in
> > that they lead to a link or an image with a larger view.
>
> > Back when I was first learning xforms, I did everything I could using
> > xforms with little or no html. It worked so well in forcing me to see
> > how much could be done in xforms that I virtually forgot my html and
> > have to look things up all the time.
>
> > So I got in the habit of displaying clickable images (images that open
> > to an image only larger view) like so:
>
> > <xf:trigger appearance="minimal">
> >    <xf:label>
> >       <img class="right" src="image.jpg" style="max-height: 8ex;"
> > alt="image"/>
> >    </xf:label>
> >    <xf:load resource="image.jpg" show="new" ev:event="DOMActivate"/>
> > </xf:trigger>
>
> > Now I'm asking myself, now that I'm quite familiar with xforms, should
> > I not just use standard html to get the same effect? Like so:
>
> > <a href="image.jpg" target="_blank">
> > <img src="image.jpg" class="smallerPic">
> > </a>
>
> > I remember there was some bad press concerning the use of
> > target="_blank" a while back for some reason but it seems to be the de
> > facto standard.
>
> > btw--does xforms 1.1 have a better approach to clickable images since
> > they are so prevalent on the web?
>
> > How should I properly address this issue in my markup?
>
> show="new" and target="_blank" are both as bad as each other as far as
> usability goes, since they both force opening in a new window/tab. This is what
> was considered bad about target="_blank".
> For images though, you're much better off using the normal HTML anchor, since
> it allows for actual link-like behaviour (i.e. normal click to open in current
> tab, mouse-wheel click to open in new tab etc.), while the xforms trigger doesn't.
> And if you really want to help with accessibility, make sure your <img/>
> includes a good alt text.

Never understood why using a new window/tab was bad practice. In my
case, if the user navigates away from the form (e.g. a skills test)
they can lose a lot of valuable information and have to re-enter
everything. But sometimes I need the user to look at a large table or
image that is related to the form but where there isn't enough space
on that part of the form. Would not the only alternative be a new
window/tab?

The only other alternative I can think of is hiding a larger image
with a relevance bind, and using a toggle to make it relevant, but in
some of my situations, this is problematic (can't fit between columns,
etc.) hmmmm, maybe I could set it in a div and give it the highest
priority z-index number? but sometimes when I use "position" in css,
it throws my form out of whack--I'm not the best at some aspects of
css.

Nevertheless, I do think using a regular html link with img is a
better alternative to the xf:trigger/label/load that I'm using now. I
also think, at least in some cases, to have one view of an image and a
hidden larger view based on relevance. I might go back and change some
of those in my less complex forms.

Thanks for the brain juice. Anyone Else?  Are there other approaches
for clickable images I'm overlooking?
and what about xforms 1.1 or 1.2, any expected improvements or will
simple approaches to clickable images remain in the domain of the host
language?

_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms
Reply | Threaded
Open this post in threaded view
|

Re: clickable images -- what is proper and your preferred method

Aaron Reed
You can use xf:output with an image mediatype instead of an html:img.
The http address for the image can live in your instance data.  So you
could have both the small and large images in the instance data and then
   on DOMActivate you could do a setvalue to set the value of the
instance node that the output is bound to to the image that you want to
show.

--Aaron

dr.cw.ray wrote:

> On Aug 20, 2:55 pm, Dion Sole <[hidden email]> wrote:
>> dr.cw.ray wrote:
>>> Almost all images of any kind on the web these days are clickable, in
>>> that they lead to a link or an image with a larger view.
>>> Back when I was first learning xforms, I did everything I could using
>>> xforms with little or no html. It worked so well in forcing me to see
>>> how much could be done in xforms that I virtually forgot my html and
>>> have to look things up all the time.
>>> So I got in the habit of displaying clickable images (images that open
>>> to an image only larger view) like so:
>>> <xf:trigger appearance="minimal">
>>>    <xf:label>
>>>       <img class="right" src="image.jpg" style="max-height: 8ex;"
>>> alt="image"/>
>>>    </xf:label>
>>>    <xf:load resource="image.jpg" show="new" ev:event="DOMActivate"/>
>>> </xf:trigger>
>>> Now I'm asking myself, now that I'm quite familiar with xforms, should
>>> I not just use standard html to get the same effect? Like so:
>>> <a href="image.jpg" target="_blank">
>>> <img src="image.jpg" class="smallerPic">
>>> </a>
>>> I remember there was some bad press concerning the use of
>>> target="_blank" a while back for some reason but it seems to be the de
>>> facto standard.
>>> btw--does xforms 1.1 have a better approach to clickable images since
>>> they are so prevalent on the web?
>>> How should I properly address this issue in my markup?
>> show="new" and target="_blank" are both as bad as each other as far as
>> usability goes, since they both force opening in a new window/tab. This is what
>> was considered bad about target="_blank".
>> For images though, you're much better off using the normal HTML anchor, since
>> it allows for actual link-like behaviour (i.e. normal click to open in current
>> tab, mouse-wheel click to open in new tab etc.), while the xforms trigger doesn't.
>> And if you really want to help with accessibility, make sure your <img/>
>> includes a good alt text.
>
> Never understood why using a new window/tab was bad practice. In my
> case, if the user navigates away from the form (e.g. a skills test)
> they can lose a lot of valuable information and have to re-enter
> everything. But sometimes I need the user to look at a large table or
> image that is related to the form but where there isn't enough space
> on that part of the form. Would not the only alternative be a new
> window/tab?
>
> The only other alternative I can think of is hiding a larger image
> with a relevance bind, and using a toggle to make it relevant, but in
> some of my situations, this is problematic (can't fit between columns,
> etc.) hmmmm, maybe I could set it in a div and give it the highest
> priority z-index number? but sometimes when I use "position" in css,
> it throws my form out of whack--I'm not the best at some aspects of
> css.
>
> Nevertheless, I do think using a regular html link with img is a
> better alternative to the xf:trigger/label/load that I'm using now. I
> also think, at least in some cases, to have one view of an image and a
> hidden larger view based on relevance. I might go back and change some
> of those in my less complex forms.
>
> Thanks for the brain juice. Anyone Else?  Are there other approaches
> for clickable images I'm overlooking?
> and what about xforms 1.1 or 1.2, any expected improvements or will
> simple approaches to clickable images remain in the domain of the host
> language?
>
_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms
Reply | Threaded
Open this post in threaded view
|

Re: clickable images -- what is proper and your preferred method

Aaron Reed
Sample of xf:output displaying images:
https://bug347327.bugzilla.mozilla.org/attachment.cgi?id=232942

Aaron Reed wrote:

> You can use xf:output with an image mediatype instead of an html:img.
> The http address for the image can live in your instance data.  So you
> could have both the small and large images in the instance data and then
>   on DOMActivate you could do a setvalue to set the value of the
> instance node that the output is bound to to the image that you want to
> show.
>
> --Aaron
>
> dr.cw.ray wrote:
>> On Aug 20, 2:55 pm, Dion Sole <[hidden email]> wrote:
>>> dr.cw.ray wrote:
>>>> Almost all images of any kind on the web these days are clickable, in
>>>> that they lead to a link or an image with a larger view.
>>>> Back when I was first learning xforms, I did everything I could using
>>>> xforms with little or no html. It worked so well in forcing me to see
>>>> how much could be done in xforms that I virtually forgot my html and
>>>> have to look things up all the time.
>>>> So I got in the habit of displaying clickable images (images that open
>>>> to an image only larger view) like so:
>>>> <xf:trigger appearance="minimal">
>>>>    <xf:label>
>>>>       <img class="right" src="image.jpg" style="max-height: 8ex;"
>>>> alt="image"/>
>>>>    </xf:label>
>>>>    <xf:load resource="image.jpg" show="new" ev:event="DOMActivate"/>
>>>> </xf:trigger>
>>>> Now I'm asking myself, now that I'm quite familiar with xforms, should
>>>> I not just use standard html to get the same effect? Like so:
>>>> <a href="image.jpg" target="_blank">
>>>> <img src="image.jpg" class="smallerPic">
>>>> </a>
>>>> I remember there was some bad press concerning the use of
>>>> target="_blank" a while back for some reason but it seems to be the de
>>>> facto standard.
>>>> btw--does xforms 1.1 have a better approach to clickable images since
>>>> they are so prevalent on the web?
>>>> How should I properly address this issue in my markup?
>>> show="new" and target="_blank" are both as bad as each other as far as
>>> usability goes, since they both force opening in a new window/tab.
>>> This is what
>>> was considered bad about target="_blank".
>>> For images though, you're much better off using the normal HTML
>>> anchor, since
>>> it allows for actual link-like behaviour (i.e. normal click to open
>>> in current
>>> tab, mouse-wheel click to open in new tab etc.), while the xforms
>>> trigger doesn't.
>>> And if you really want to help with accessibility, make sure your <img/>
>>> includes a good alt text.
>>
>> Never understood why using a new window/tab was bad practice. In my
>> case, if the user navigates away from the form (e.g. a skills test)
>> they can lose a lot of valuable information and have to re-enter
>> everything. But sometimes I need the user to look at a large table or
>> image that is related to the form but where there isn't enough space
>> on that part of the form. Would not the only alternative be a new
>> window/tab?
>>
>> The only other alternative I can think of is hiding a larger image
>> with a relevance bind, and using a toggle to make it relevant, but in
>> some of my situations, this is problematic (can't fit between columns,
>> etc.) hmmmm, maybe I could set it in a div and give it the highest
>> priority z-index number? but sometimes when I use "position" in css,
>> it throws my form out of whack--I'm not the best at some aspects of
>> css.
>>
>> Nevertheless, I do think using a regular html link with img is a
>> better alternative to the xf:trigger/label/load that I'm using now. I
>> also think, at least in some cases, to have one view of an image and a
>> hidden larger view based on relevance. I might go back and change some
>> of those in my less complex forms.
>>
>> Thanks for the brain juice. Anyone Else?  Are there other approaches
>> for clickable images I'm overlooking?
>> and what about xforms 1.1 or 1.2, any expected improvements or will
>> simple approaches to clickable images remain in the domain of the host
>> language?
>>
_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms
Reply | Threaded
Open this post in threaded view
|

Re: clickable images -- what is proper and your preferred method

dr.cw.ray
On Aug 21, 2:37 am, Aaron Reed <[hidden email]> wrote:

> Sample of xf:output displaying images:https://bug347327.bugzilla.mozilla.org/attachment.cgi?id=232942
>
> Aaron Reed wrote:
> > You can use xf:output with an image mediatype instead of an html:img.
> > The http address for the image can live in your instance data.  So you
> > could have both the small and large images in the instance data and then
> >   on DOMActivate you could do a setvalue to set the value of the
> > instance node that the output is bound to to the image that you want to
> > show.
>
> > --Aaron
>
> > dr.cw.ray wrote:
> >> On Aug 20, 2:55 pm, Dion Sole <[hidden email]> wrote:
> >>> dr.cw.ray wrote:
> >>>> Almost all images of any kind on the web these days are clickable, in
> >>>> that they lead to a link or an image with a larger view.
> >>>> Back when I was first learning xforms, I did everything I could using
> >>>> xforms with little or no html. It worked so well in forcing me to see
> >>>> how much could be done in xforms that I virtually forgot my html and
> >>>> have to look things up all the time.
> >>>> So I got in the habit of displaying clickable images (images that open
> >>>> to an image only larger view) like so:
> >>>> <xf:trigger appearance="minimal">
> >>>>    <xf:label>
> >>>>       <img class="right" src="image.jpg" style="max-height: 8ex;"
> >>>> alt="image"/>
> >>>>    </xf:label>
> >>>>    <xf:load resource="image.jpg" show="new" ev:event="DOMActivate"/>
> >>>> </xf:trigger>
> >>>> Now I'm asking myself, now that I'm quite familiar with xforms, should
> >>>> I not just use standard html to get the same effect? Like so:
> >>>> <a href="image.jpg" target="_blank">
> >>>> <img src="image.jpg" class="smallerPic">
> >>>> </a>
> >>>> I remember there was some bad press concerning the use of
> >>>> target="_blank" a while back for some reason but it seems to be the de
> >>>> facto standard.
> >>>> btw--does xforms 1.1 have a better approach to clickable images since
> >>>> they are so prevalent on the web?
> >>>> How should I properly address this issue in my markup?
> >>> show="new" and target="_blank" are both as bad as each other as far as
> >>> usability goes, since they both force opening in a new window/tab.
> >>> This is what
> >>> was considered bad about target="_blank".
> >>> For images though, you're much better off using the normal HTML
> >>> anchor, since
> >>> it allows for actual link-like behaviour (i.e. normal click to open
> >>> in current
> >>> tab, mouse-wheel click to open in new tab etc.), while the xforms
> >>> trigger doesn't.
> >>> And if you really want to help with accessibility, make sure your <img/>
> >>> includes a good alt text.
>
> >> Never understood why using a new window/tab was bad practice. In my
> >> case, if the user navigates away from the form (e.g. a skills test)
> >> they can lose a lot of valuable information and have to re-enter
> >> everything. But sometimes I need the user to look at a large table or
> >> image that is related to the form but where there isn't enough space
> >> on that part of the form. Would not the only alternative be a new
> >> window/tab?
>
> >> The only other alternative I can think of is hiding a larger image
> >> with a relevance bind, and using a toggle to make it relevant, but in
> >> some of my situations, this is problematic (can't fit between columns,
> >> etc.) hmmmm, maybe I could set it in a div and give it the highest
> >> priority z-index number? but sometimes when I use "position" in css,
> >> it throws my form out of whack--I'm not the best at some aspects of
> >> css.
>
> >> Nevertheless, I do think using a regular html link with img is a
> >> better alternative to the xf:trigger/label/load that I'm using now. I
> >> also think, at least in some cases, to have one view of an image and a
> >> hidden larger view based on relevance. I might go back and change some
> >> of those in my less complex forms.
>
> >> Thanks for the brain juice. Anyone Else?  Are there other approaches
> >> for clickable images I'm overlooking?
> >> and what about xforms 1.1 or 1.2, any expected improvements or will
> >> simple approaches to clickable images remain in the domain of the host
> >> language?

that's an approach I tried earlier but couldn't get to work ( I think
I wasn't binding to an instance node because I was just getting text).
The examples you directed me to really helped . Thanks.
_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms