Re: [WSG] Image mapping standards question
On 6/3/09, Tim Savage tim.sav...@poweredbypenguins.org wrote: I've been playing around with this idea recently. Image maps are quite flexible, not only can you title attributes etc but since they are part of the DOM you can attach javascript events to them. For a recent client which an online fashion store they had images of models wearing their garments and I used image maps to have tool tips appear with additional information about the garment and link to the product page. You can use the same javascript: void() trick (or capture events) to prevent anything happening when a user clicks on the link as necessary. I tried several approaches to getting this system to work right. My first try was using absolutely position DIV's this worked perfectly except in IE, second go was output a json structure containing all the information about the products etc and generate my image map client side, again worked perfectly except in IE. In the end the solution was to generate everything server side and tie it all together with javascript which also works and works in IE. The advantages of using image maps basically come down to being able to generate complex shapes, and them already being supported in browsers so why reinvent the wheel. -- *Tim Savage* Technology Lead [image: Joocey Labs Pty Ltd] 105 / 757 Bourke Street Docklands VIC 3008 p: +61 3 9016 9132 m: +61 415 845 226 e: tim.sav...@jooceylabs.com w: http://jooceylabs.com Melbourne | Brisbane | Sydney On Wed, Jun 3, 2009 at 12:01, David Hucklesby huckle...@gmail.com wrote: Brett Patterson wrote: I meant that rather than using image mapping for hyperlinks, you could use it to (sort of) point out a particular part of an image, as if you wanted to show someone who can see which person in a picture is you if they hover their mouse over that image map. And you can use it for someone who is blind, by showing them sections in a picture, as if there are rapids in one part of a picture and your canoe in another. I mean image maps being used to show particular sections in a picture, give it a title and alt attribute, and allow people to see what is what in the picture by holding their mouse over parts in a picture. Some picture sites, like photobucket and others allow users to tag certain parts of a picture to allow users to see who is who in a picture. I was wondering if it would be okay to do the same thing with using image maps and not using them as links. Do you mean something like this? http://css-tricks.com/image-map-with-prototype-tooltips/ Not sure about how this would benefit someone who can't see, though? Provided you have given ALT attributes to the AREA shapes, screen readers should be happy. FWIW image maps *are* links, and can be followed by search engines and text browsers, screen readers, etc.. Without scripting, though, they are hard to discover in graphical browsers-- and not everyone has scripting enabled. Design is about compromise, I believe. No one solution fits all situations. So the answer is a qualified yes - you can use an image map for this. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** Hello and thanks for your kindly information , I am a beginer an i must learn more and more but there are other problems and this is the languages , my Englis is not very well and sometimes it made a problems and missunderstanding please if i made some misstake excuse me i try to do it better in feuture. Till know i visited the sites for learning but sometims i need to aske a question and to be in contaction I don't like to miss you and If i can not send an Email the only reson is my English writting becouse it is not so good please excuse me. Your Sibcearely Mohsen Keshawarz -- Keshawarz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Image mapping standards question
Judging by the lack of responses, I am probably not the only one who didn't understand your question. Particularly, you seem to be using the term 'image mapping' to mean something other than using an image-map element, but I'm not aware of a standard technique for this. Regards, Mike From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Brett Patterson Sent: 01 June 2009 15:35 To: wsg@webstandardsgroup.org Subject: [WSG] Image mapping standards question It has recently come to my attention the struggles of an end-user when viewing images for any user. I have seen sites such as Facebook, MySpace, and other sites where pictures are hosted use roll-overs for recognizing certain parts of an image. I realize that this can be done using image maps as well as when using image mapping, I can add alternative text not only to the img tag itself, but the maps as well to show and describe certain features I feel are important. Are there recommendations for or against this approach? -- Brett P. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Image mapping standards question
Brett Patterson wrote: I meant that rather than using image mapping for hyperlinks, you could use it to (sort of) point out a particular part of an image, as if you wanted to show someone who can see which person in a picture is you if they hover their mouse over that image map. And you can use it for someone who is blind, by showing them sections in a picture, as if there are rapids in one part of a picture and your canoe in another. I mean image maps being used to show particular sections in a picture, give it a title and alt attribute, and allow people to see what is what in the picture by holding their mouse over parts in a picture. Some picture sites, like photobucket and others allow users to tag certain parts of a picture to allow users to see who is who in a picture. I was wondering if it would be okay to do the same thing with using image maps and not using them as links. Do you mean something like this? http://css-tricks.com/image-map-with-prototype-tooltips/ Not sure about how this would benefit someone who can't see, though? Provided you have given ALT attributes to the AREA shapes, screen readers should be happy. FWIW image maps *are* links, and can be followed by search engines and text browsers, screen readers, etc.. Without scripting, though, they are hard to discover in graphical browsers-- and not everyone has scripting enabled. Design is about compromise, I believe. No one solution fits all situations. So the answer is a qualified yes - you can use an image map for this. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Image mapping standards question
At 6/1/2009 07:34 AM, Brett Patterson wrote: It has recently come to my attention the struggles of an end-user when viewing images for any user. I have seen sites such as Facebook, MySpace, and other sites where pictures are hosted use roll-overs for recognizing certain parts of an image. I realize that this can be done using image maps as well as when using image mapping, I can add alternative text not only to the img tag itself, but the maps as well to show and describe certain features I feel are important. Are there recommendations for or against this approach? Also consider CSS image maps with pop-ups, e.g.: http://www.cssplay.co.uk/menu/imap by Stu Nicholls. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Image mapping standards question
Perhaps you are looking for something like this: http://www.alistapart.com/articles/cssmaps/ Rather than an image map, it uses a definition list with the image as a background and the text positioned off-screen, so the information is still available for screenreaders. On 6/3/09, Paul Novitski p...@juniperwebcraft.com wrote: At 6/1/2009 07:34 AM, Brett Patterson wrote: It has recently come to my attention the struggles of an end-user when viewing images for any user. I have seen sites such as Facebook, MySpace, and other sites where pictures are hosted use roll-overs for recognizing certain parts of an image. I realize that this can be done using image maps as well as when using image mapping, I can add alternative text not only to the img tag itself, but the maps as well to show and describe certain features I feel are important. Are there recommendations for or against this approach? Also consider CSS image maps with pop-ups, e.g.: http://www.cssplay.co.uk/menu/imap by Stu Nicholls. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Fwd: [WSG] Image mapping standards question
I've been playing around with this idea recently. Image maps are quite flexible, not only can you title attributes etc but since they are part of the DOM you can attach javascript events to them. For a recent client which an online fashion store they had images of models wearing their garments and I used image maps to have tool tips appear with additional information about the garment and link to the product page. You can use the same javascript: void() trick (or capture events) to prevent anything happening when a user clicks on the link as necessary. I tried several approaches to getting this system to work right. My first try was using absolutely position DIV's this worked perfectly except in IE, second go was output a json structure containing all the information about the products etc and generate my image map client side, again worked perfectly except in IE. In the end the solution was to generate everything server side and tie it all together with javascript which also works and works in IE. The advantages of using image maps basically come down to being able to generate complex shapes, and them already being supported in browsers so why reinvent the wheel. -- *Tim Savage* Technology Lead [image: Joocey Labs Pty Ltd] 105 / 757 Bourke Street Docklands VIC 3008 p: +61 3 9016 9132 m: +61 415 845 226 e: tim.sav...@jooceylabs.com w: http://jooceylabs.com Melbourne | Brisbane | Sydney On Wed, Jun 3, 2009 at 12:01, David Hucklesby huckle...@gmail.com wrote: Brett Patterson wrote: I meant that rather than using image mapping for hyperlinks, you could use it to (sort of) point out a particular part of an image, as if you wanted to show someone who can see which person in a picture is you if they hover their mouse over that image map. And you can use it for someone who is blind, by showing them sections in a picture, as if there are rapids in one part of a picture and your canoe in another. I mean image maps being used to show particular sections in a picture, give it a title and alt attribute, and allow people to see what is what in the picture by holding their mouse over parts in a picture. Some picture sites, like photobucket and others allow users to tag certain parts of a picture to allow users to see who is who in a picture. I was wondering if it would be okay to do the same thing with using image maps and not using them as links. Do you mean something like this? http://css-tricks.com/image-map-with-prototype-tooltips/ Not sure about how this would benefit someone who can't see, though? Provided you have given ALT attributes to the AREA shapes, screen readers should be happy. FWIW image maps *are* links, and can be followed by search engines and text browsers, screen readers, etc.. Without scripting, though, they are hard to discover in graphical browsers-- and not everyone has scripting enabled. Design is about compromise, I believe. No one solution fits all situations. So the answer is a qualified yes - you can use an image map for this. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Image mapping standards question
It has recently come to my attention the struggles of an end-user when viewing images for any user. I have seen sites such as Facebook, MySpace, and other sites where pictures are hosted use roll-overs for recognizing certain parts of an image. I realize that this can be done using image maps as well as when using image mapping, I can add alternative text not only to the img tag itself, but the maps as well to show and describe certain features I feel are important. Are there recommendations for or against this approach? -- Brett P. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
