How to make a custom clickable shape with CSS to cover the exact needed area?


Tags: html,css,css3,css-transforms,css-shapes

Problem :

I have to implement custom clickable area for my image in non standard shape (only for visible part of image). The shape is some part of the roof. I want to be able to do the click action only when I will hover over the shape.

Please see my example here in FIDDLE and see what I am doing wrong and how can it be done in better way? I have a problem with selection of transform parameters and with locating the clickable area just under the shape. How to do it correctly and to have an exact cover for needed shape?

Custom shape:

enter image description here

Example:

<div class="image">
  <div class="image_roof_left">
    <a class="link_roof_left" href="http://creation.cal24.pl/opencart/index.php?route=product/product&amp;product_id=50"></a>
    <img src="http://creation.cal24.pl/opencart/image/data/poc/dach_l1.png">
  </div>
</div>

div.image_roof_left {
    border: 1px solid;
    left: 120px;
    top: 10px;
    position: absolute;
    perspective: 150px;
    perspective-origin: 5% 0;
}
a.link_roof_left {
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid;
    padding: 50px;
    position: absolute;
    transform: rotateX(82deg) rotateY(-19deg) rotateZ(-6deg) skewX(-63deg) skewY(2deg);
}


Solution :

As jme11 suggested, its better if you use an image map, as the sides of this shape are straight lines.

Open the image in an image editor to find out the coords.

Snippet :

<img src="http://creation.cal24.pl/opencart/image/data/poc/dach_l1.png" usemap="#map">
<map name="map">
  <area shape="poly" coords="0,164,104,132,252,8,252,0,0,164" href="example.com" />
</map>


    CSS Howto..

    How to temporarily modify the CSS of an element

    How to have equal padding on both side of a div. CSS

    the tab's content shows abnormal under IE7

    show/hide will not load

    How do you wrap one text div around another that follows as a sibling in the DOM?

    How to change the height of div with the content of other div

    How can I create a color with values for green, blue, orange, and gold only?

    How to hide ads with media queries?

    How to use horizontal scroll when you have way many columns

    How to reposition CSS-hover popups to stay within a fixed frame?

    How do I create 3D perspective using CSS3?

    How to slow down the last few frames in a CSS sprite animation?

    how to achieve this this horizontal line from css or bootstrap

    How to center a navigation bar with CSS or HTML?

    How to fit content of a DIV with fixed height

    How to choose fontstacks

    How to get an interactive geographic map for a country? [closed]

    How to Style Similar to an Exam Questi-n

    How to pass a Rails variable into a view's CSS that must be refreshed dynamically (every 60 seconds)?

    How to show an image on html page using only css?

    How to apply css to 'text' and 'password' together [closed]

    2nd image appears as mirror image in IE— CSS image FLIP transform- How to fix?

    How to align item to the very bottom within flexible box layout column?

    How to add multiple CSS styles to an element with .css()

    CSS / Jquery How to auto-size containers and images

    How to increase width of children from the right to the left? [closed]

    How to add image at right bottom div using css

    Show-hide based on two sets of selectors--how to make them work together?

    How to properly apply WinJS.Binding.Template ListView GridLayout CSS?

    How to make html lists horizontal in css?