Javascript :hover, is it possible to designate areas.

[thesublimeobject]

I have been working with a lot of large area images lately, that are in essence split into different areas. Let’s take for example a square that is split into four different equal squares. Each of these smaller squares has a :hover state similar to any other normal :hover state. The thing is, with some of these more complex images (unlike a square), I am wondering if there is a way to keep the image as one image and designate an area for the hover. For example with the square, to be able to say something like,

if (the mouse enters area from x = 0, x = 90px && y = 0, y = 90px) { switch to :hover state 1 }

That obviously wouldn’t be the code, but I hope this explanation makes sense. So, is there a way to do this, and if so, could someone direct me to the proper place to figure it out. It would be quite useful. Thanks!

[wolfcry911]

why don’t you create an image map?

[Paulie_D]

Feels like `` might be the ideal answer.

[CrocoDillon]

With jQuery (too lazy to try without) you can easily get the coordinates within the event target, and do some logic on that:

http://codepen.io/CrocoDillon/pen/Kardl

EDIT: Actually without jQuery it was pretty much the same, only need to adapt the code to work on IE with `attachEvent();`

[thesublimeobject]

Alright, this totally makes sense. Not really sure why I didn’t think of this before. Thanks a lot.

I wonder what the best way to deal with responsive image sizing with respect to this is, though?

[Author]

Posts