Grow your CSS skills. Land your dream job.

JS Challenge – Looking for a suggestion

  • # February 12, 2013 at 6:39 pm

    Hey Guys,

    So I am looking to do something like this: http://www.exsite.ca/temp/team-sample.jpg

    Basically you will have all the team members lined up as seperate images and when you hover over one it will show their bio on the right site. The issue is how can i get the hover to work with the overlaps and such that occur in the people. That AND, i want to have the hover area be the specific contours of the persons body, not just a square.

    Let me know if you have a solution for this… or if it is even possible.

    Thanks!

    # February 12, 2013 at 6:47 pm

    You’ll probably want to use image maps for this.

    https://developer.mozilla.org/en-US/docs/HTML/Element/map

    # February 12, 2013 at 6:59 pm

    First thing that comes to mind about the hover area thingy is you can make a lot of square areas to create the illusion the hover area fits the contours of the persons.

    # February 12, 2013 at 7:09 pm

    @CrocoDillon is there some kind of tool that aids with that?
    @rosspenman image maps are so ancient… theres gotta be some kind of more recent tech for this…

    # February 12, 2013 at 7:12 pm

    Image maps are definitely the best way to do this. They are still completely valid HTML5!

    # February 12, 2013 at 7:25 pm

    And very well supported. My comment was an addition to maps by the way, but I only just figured out polygon shapes are supported as well.

    If you want to go the JavaScript way :) You can use canvas (IE9+) to get pixel RGBA values. I would probably create a color coded (each person a different color) image on a hidden canvas, and use JavaScript to detect the color of mouse coordinates on hover events.

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

You must be logged in to reply to this topic.

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