Hi everybody, Here is a little tricky question (for me :-)) I have N Images: <img src="img1.gif" ... usemap="#mymap" > <img src="img1.gif" ... usemap="#mymap" > <img src="img1.gif" ... usemap="#mymap" > <img src="img1.gif" ... usemap="#mymap" > I have 1 Image Map: <map ...> <area id="mymap" name="mymap" ... onclick="doStuff(event); return false;"> </map> In the function doStuff(event) how did I know which image have been clicked ? Event.element(event) return the AREA tag with IE and FF ;-( Best regards -- Jean-Philippe Encausse - R&D Jalios SA Jp [at] encausse.net - http://www.encausse.com - http://www.jalias.com GTalk: jp.encausse [at] gmail.com - SMS: sms [at] jp.encausse.net Mob: +33 6 82 12 56 99 Jalios: +33 1 39 23 92 83 Tel: +33 1 39 18 90 15 Do it Once, Use it Twice ~ Do it Twice, Make It Once --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---
Christophe Porteneuve aka TDD
2006-Oct-03 14:22 UTC
Re: Tricky JavaScript Question about Image Map
Hey Jean-Philippe, Why do you use multiple images? Do you mean to say you have many images that all use the exact same map (e.g. 3 images with the exact same n zones on each one?)? Could you explain what your layout situation is, and why you need this? Usually, there''s one consolidated image that uses a single map with multiple areas, and all you''re interested in is the area being clicked. You can identify this by assigning ID''s to the areas, and using Event.element(e).id to get the area''s ID. -- Christophe Porteneuve aka TDD tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---
Jean-Philippe Encausse
2006-Oct-03 14:52 UTC
Re: Tricky JavaScript Question about Image Map
Well, think about a "wysiwyg like" - I have a textarea - I have an image representing a toolbar, each buttons are drawn on the image. - I have an image map that desccribe where to click on the image and run javascript function. (I don''t use 20 small images representing buttons because it load too slow). So If I have 3 components I will have: 3 TextArea + 3 Images (toolbar) + 1 Image Map JavaScript function on my ImageMap are generics, I want them to know who click them and then do action on correct input. BUT Element.element(event) returns tag AREA not IMG. So I have no idea how to known which Image have been clicked ? -> I may use 3 Image Map but it''s a little bit silly to generate so many HTML to do the same job. -> I tried to Set onmouseout event to remember the image clicked but with the bubling effect on navigators it doesn''t work well. Any Idea ? Best Regards On 10/3/06, Christophe Porteneuve aka TDD <tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org> wrote:> > Hey Jean-Philippe, > > Why do you use multiple images? Do you mean to say you have many images > that all use the exact same map (e.g. 3 images with the exact same n > zones on each one?)? Could you explain what your layout situation is, > and why you need this? > > Usually, there''s one consolidated image that uses a single map with > multiple areas, and all you''re interested in is the area being clicked. > You can identify this by assigning ID''s to the areas, and using > Event.element(e).id to get the area''s ID. > > -- > Christophe Porteneuve aka TDD > tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org > > > >-- Jean-Philippe Encausse - R&D Jalios SA Jp [at] encausse.net - http://www.encausse.com - http://www.jalias.com GTalk: jp.encausse [at] gmail.com - SMS: sms [at] jp.encausse.net Mob: +33 6 82 12 56 99 Jalios: +33 1 39 23 92 83 Tel: +33 1 39 18 90 15 Do it Once, Use it Twice ~ Do it Twice, Make It Once --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---
Christophe Porteneuve aka TDD
2006-Oct-03 15:49 UTC
Re: Tricky JavaScript Question about Image Map
Hey Jean-Philippe,
Try binding a click event handler to your toolbar images, using the
bindAsEventListener function with an extra argument thrown in,
identifying your image. This handler function then sets a global
variable you can use later. You would then have to verify that this
handler does get triggered *before* the area.
Something like:
var _gToolbar = 0;
function bindImages() {
for (var index = 1; index <= 3; ++index)
Event.observe(''toolBar'' + index,
''click'',
rememberTB.bindAsEventListener(index));
} // bindImages
function rememberTB(e, index) {
_gToolbar = index;
}
Event.observe(window, ''load'', bindImages);
*IF* this gets called before your areas'' click handlers, you can then
use the global variable.
This is out of my hat, there might well be a much cleaner way...
--
Christophe Porteneuve aka TDD
tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---
Jean-Philippe Encausse <Jp-vcK5r0oTKUrk1uMJSBkQmQ@public.gmane.org> wrote:> Hi everybody, > Here is a little tricky question (for me :-)) > > - I have an image representing a toolbar, each buttons are drawn > on the image: > <img src="img1.gif" ... usemap="#mymap" >... > > I have 1 Image Map: > <map ...><area ... onclick="doStuff(event)... > > In the function doStuff(event) how did I know which image have been > clicked ? Event.element(event) return the AREA tag with IE and FF ;-( > [...] > JavaScript function on my ImageMap are generics, I want them to know > who click them and then do action on correct input. BUT > Element.element(event) returns tag AREA not IMG. So I have no idea how > to known which Image have been clicked ?You could skip the <map> tag entirely, move your an onclick handler on the image, and use the event passed to find out the mouse coordinates where in the image the user clicked. Then your points->functions data structure gets moved out of html and into your code. Since it''s toolbars, the math should be trivial. subtract image''s left from mouseX, image''s top from mouseY, to get your offset into the image, and divide X by button-width to dtermine which button from the left, and so on for the Y if you have rows of buttons. -dave --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---
Jean-Philippe Encausse
2006-Oct-04 07:48 UTC
Re: Tricky JavaScript Question about Image Map
Thanks, Well I already tried that but unfortunatly under firefox the click event doesn''t buble up or down (reagarding IE or FF) So I use the mouseX and mouseY to find the toolbar that have been clicked. A little bit tricky but it seems to work. On 10/3/06, Christophe Porteneuve aka TDD <tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org> wrote:> > Hey Jean-Philippe, > > Try binding a click event handler to your toolbar images, using the > bindAsEventListener function with an extra argument thrown in, > identifying your image. This handler function then sets a global > variable you can use later. You would then have to verify that this > handler does get triggered *before* the area. > > Something like: > > var _gToolbar = 0; > > function bindImages() { > for (var index = 1; index <= 3; ++index) > Event.observe(''toolBar'' + index, ''click'', > rememberTB.bindAsEventListener(index)); > } // bindImages > > function rememberTB(e, index) { > _gToolbar = index; > } > > Event.observe(window, ''load'', bindImages); > > *IF* this gets called before your areas'' click handlers, you can then > use the global variable. > > This is out of my hat, there might well be a much cleaner way... > > -- > Christophe Porteneuve aka TDD > tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org > > > >-- Jean-Philippe Encausse - R&D Jalios SA Jp [at] encausse.net - http://www.encausse.com - http://www.jalias.com GTalk: jp.encausse [at] gmail.com - SMS: sms [at] jp.encausse.net Mob: +33 6 82 12 56 99 Jalios: +33 1 39 23 92 83 Tel: +33 1 39 18 90 15 Do it Once, Use it Twice ~ Do it Twice, Make It Once --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---
Jean-Philippe Encausse
2006-Oct-04 09:53 UTC
Re: Tricky JavaScript Question about Image Map
Thanks, I was thinking about this solution, but there is something interesting with <map> is displaying "title" attribute and mouse cursor on mouseover each <area>. With a JavaScript code it''s a little bit more complicated. Regrads On 10/4/06, David Kaufman <david-8ZdJMhgJluNWk0Htik3J/w@public.gmane.org> wrote:> > Jean-Philippe Encausse <Jp-vcK5r0oTKUrk1uMJSBkQmQ@public.gmane.org> wrote: > > Hi everybody, > > Here is a little tricky question (for me :-)) > > > > - I have an image representing a toolbar, each buttons are drawn > > on the image: > > <img src="img1.gif" ... usemap="#mymap" >... > > > > I have 1 Image Map: > > <map ...><area ... onclick="doStuff(event)... > > > > In the function doStuff(event) how did I know which image have been > > clicked ? Event.element(event) return the AREA tag with IE and FF ;-( > > [...] > > JavaScript function on my ImageMap are generics, I want them to know > > who click them and then do action on correct input. BUT > > Element.element(event) returns tag AREA not IMG. So I have no idea how > > to known which Image have been clicked ? > > You could skip the <map> tag entirely, move your an onclick handler on > the image, and use the event passed to find out the mouse coordinates > where in the image the user clicked. Then your points->functions data > structure gets moved out of html and into your code. > > Since it''s toolbars, the math should be trivial. subtract image''s left > from mouseX, image''s top from mouseY, to get your offset into the image, > and divide X by button-width to dtermine which button from the left, and > so on for the Y if you have rows of buttons. > > -dave > > > > >-- Jean-Philippe Encausse - R&D Jalios SA Jp [at] encausse.net - http://www.encausse.com - http://www.jalias.com GTalk: jp.encausse [at] gmail.com - SMS: sms [at] jp.encausse.net Mob: +33 6 82 12 56 99 Jalios: +33 1 39 23 92 83 Tel: +33 1 39 18 90 15 Do it Once, Use it Twice ~ Do it Twice, Make It Once --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---
Jean-Philippe Encausse wrote:> Hi everybody, > Here is a little tricky question (for me :-)) > > I have N Images: > > <img src="img1.gif" ... usemap="#mymap" > > <img src="img1.gif" ... usemap="#mymap" > > <img src="img1.gif" ... usemap="#mymap" > > <img src="img1.gif" ... usemap="#mymap" > > > I have 1 Image Map: > > <map ...> > <area id="mymap" name="mymap" ... onclick="doStuff(event); return false;"> > </map> > > In the function doStuff(event) how did I know which image have been clicked ? > Event.element(event) return the AREA tag with IE and FF ;-( > > Best regards > -- > Jean-Philippe Encausse - R&D Jalios SA > Jp [at] encausse.net - http://www.encausse.com - http://www.jalias.com > GTalk: jp.encausse [at] gmail.com - SMS: sms [at] jp.encausse.net > Mob: +33 6 82 12 56 99 Jalios: +33 1 39 23 92 83 Tel: +33 1 39 18 90 15 > Do it Once, Use it Twice ~ Do it Twice, Make It Oncehey, what i would do is adding an extra parameter to the doStuff() function; like this: onClick="doStuff(event,1); return false;" function doStuff(event, ID) { do something... } grtz Frank --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---
Jean-Philippe Encausse
2006-Oct-05 15:13 UTC
Re: Tricky JavaScript Question about Image Map
No that''s not possible because the onclick is bind on the <meta><area onclick=""></meta> tag. This tag is bind to multiple images, os the onclick is shared. On 10/5/06, Captain Phalanx <captain_phalanx-PkbjNfxxIARBDgjK7y7TUQ@public.gmane.org> wrote:> > > Jean-Philippe Encausse wrote: > > Hi everybody, > > Here is a little tricky question (for me :-)) > > > > I have N Images: > > > > <img src="img1.gif" ... usemap="#mymap" > > > <img src="img1.gif" ... usemap="#mymap" > > > <img src="img1.gif" ... usemap="#mymap" > > > <img src="img1.gif" ... usemap="#mymap" > > > > > I have 1 Image Map: > > > > <map ...> > > <area id="mymap" name="mymap" ... onclick="doStuff(event); return false;"> > > </map> > > > > In the function doStuff(event) how did I know which image have been clicked ? > > Event.element(event) return the AREA tag with IE and FF ;-( > > > > Best regards > > -- > > Jean-Philippe Encausse - R&D Jalios SA > > Jp [at] encausse.net - http://www.encausse.com - http://www.jalias.com > > GTalk: jp.encausse [at] gmail.com - SMS: sms [at] jp.encausse.net > > Mob: +33 6 82 12 56 99 Jalios: +33 1 39 23 92 83 Tel: +33 1 39 18 90 15 > > Do it Once, Use it Twice ~ Do it Twice, Make It Once > > hey, > > what i would do is adding an extra parameter to the doStuff() function; > like this: > onClick="doStuff(event,1); return false;" > > function doStuff(event, ID) { > do something... > } > > grtz Frank > > > > >-- Jean-Philippe Encausse - R&D Jalios SA Jp [at] encausse.net - http://www.encausse.com - http://www.jalias.com GTalk: jp.encausse [at] gmail.com - SMS: sms [at] jp.encausse.net Mob: +33 6 82 12 56 99 Jalios: +33 1 39 23 92 83 Tel: +33 1 39 18 90 15 Do it Once, Use it Twice ~ Do it Twice, Make It Once --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---