Grow your CSS skills. Land your dream job.

Javascript :hover, is it possible to designate areas.

  • # April 18, 2013 at 12:08 am

    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!

    # April 18, 2013 at 7:29 am

    why don’t you create an image map?

    # April 18, 2013 at 7:46 am

    Feels like `` might be the ideal answer.

    # April 18, 2013 at 8:14 am

    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();`

    # April 18, 2013 at 10:03 am

    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?

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".