Question

I am using two images overlapped with each other. i can see the half of the second image(i.e)behind the first image. how to give link to the second image. However when i give link to second image the div of the first image is blocking the link. The first image has no link. How can i overcome this.

Thanks

Answer 1

I did a tricky thing for this type of scenario.

See the front page of this website http://www.klim.com/en-us/ and scroll in the middle where it reads “choose your passion”. Notice it uses diagonally aligned images or at least is appears to.

What I did was take one transparent PNG that fills entire dimension of your image area and sits on top absolutely positioned with higher z index, the other images lay behind in whatever order doesn’t matter and can be a series of images split up in my case.

You then place a single image map onto the transparent PNG in any configuration you want to make the back images work. In the image map you can draw whatever shapes you want and have mouse over events tied to them. In my case I’m using jQuery.

Here’s a snippet of the jQuery and notice its treating the image map links just like you would any normal mouse over as it just works like that.

<div class="choose-passion">
    <div class="snow"></div>
    <div class="moto"></div>

    <map name="passion-map" id="passion-map">
    <area alt="" shape="poly" coords="0,22,574,22,340,320,0,320" href="/en-us/snow" />
    <area alt="" shape="poly" coords="980,22,575,22,340,321,980,321" href="/en-us/moto" />
    </map>
    <img usemap="#passion-map" style="width:980px;height:333px;" src="//s3.amazonaws.com/klimsitecontent/web/img/transparent.png" alt="" />
</div>

<script>
    $('#passion-map area:first').hover(
        function () {
            $('.choose-passion .snow').stop(true, true).hide().fadeIn('fast');
        },
        function () {
            $('.choose-passion .snow').stop(true, true).show().fadeOut('fast');
        }
    );
    $('#passion-map area:eq(1)').hover(
        function () {
            $('.choose-passion .moto').stop(true, true).hide().fadeIn('fast');
        },
        function () {
            $('.choose-passion .moto').stop(true, true).show().fadeOut('fast');
        }
    );
</script>