1

After much help from anstosa on a previous coords question I thought I'd better start a new question.

The problem I have is I am setting a onclick event and the possition of the active event is determined by the coords of the image. But if I resize the browser window the coords change and the event does not function. Well it does, but not where I want to trigger it.

Is there a way to have a fixed reference to work from?

My code

//change map on hover

jQuery('#map').mousemove(function(e){
    var x = e.clientX - this.offsetLeft;
    var y = e.clientY - this.offsetTop;
    jQuery('#map-xy').html("X: " + x + " Y: " + y);
});

//Orange
jQuery('#map').on('click', function(e){
var x = e.clientX - this.offsetLeft,
    y = e.clientY - this.offsetTop;
if (x > 620 && x < 935 && y > 678 && y < 785) {
    jQuery(this).children('img').attr('src', '/javascripts/images/map-orange-  shadow.png');

}

});

When the browser is resized or a person has a different screen size the references change so "if (x > 620 && x < 935 && y > 678 && y < 785)" does not reference the area i want to click on.

I hope that makes more sense

Thanks

Cheers laurence

Laurence L
  • 613
  • 1
  • 8
  • 21
  • we're really gonna need more than "not where I want" here. what are you doing? what is happening? what are you try to do? – Sinetheta Jan 16 '12 at 05:16
  • so where did you get those numbers from? obviously they represent something on the page, so have jquery measure it, don't measure what happens to be on YOUR screen and put hard numbers in – Sinetheta Jan 16 '12 at 05:44
  • I'm sorry I am not sure what you're saying. The numbers I got from the X Y coords of #map on my screen and yep then copied them as hard numbers in the map location. Could you elaborate on your answer please. Is there a way to set the coords based on any screen? – Laurence L Jan 16 '12 at 05:53
  • Yes, you'll need to determine the position of whatever you're talking about. .offset() is great for that, but probably used in combination with .width() and .height() (depending on what you're doing). If you can't provide a link or source code, then maybe you can setup an example on jsFiddle.net otherwise there isn't much I can do to help. – Sinetheta Jan 16 '12 at 06:59
  • THanks Sinetheta. I have a sample on my staging server http://ccq-staging.brightlabs.com.au/page/information_resources/mappop/. Thank you for the assistance, much appreiated – Laurence L Jan 16 '12 at 21:36
  • What actual things on the page are your coordinates supposed to represent? eg: what does the box [[620,678],[935,678],[935,785],[620,785]] bound for you? – Sinetheta Jan 16 '12 at 21:43
  • What I am trying to achieve is creating hotspots on each colour section of the map. 1. on mousemove the section appears raised (swap image) and if clicked a text bog / info area is displayed. – Laurence L Jan 16 '12 at 22:08
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/6771/discussion-between-laurence-l-and-sinetheta) – Laurence L Jan 16 '12 at 22:16

0 Answers0