how to implemant image map in flexslider?

StackOverflow https://stackoverflow.com/questions/19173932

  •  30-06-2022
  •  | 
  •  

Question

I am using flexslider. It is very easy to implement and customizing.

Now my every slide is a link. is there any way to put to links for a single slide?

that needs to redirect to PAGE1 when click the left side of the image and must redirect to PAGE2 when click the right side.

Thanks in advance dear seniors...

I've found the answer. The following method is working

<div class="flexslider">
            <ul class="slides">
              <!-- slide1 -->
                <li>
                    <img src="images/slider/2.jpg" alt="" usemap="#map2" />
                    <map name="map2">
                        <area shape="rect" coords="494,2,961,745" href="http://www.john-anthony.com/mens/jeans/" alt=""/>
                        <area shape="rect" coords="0,4,482,749" href="http://www.john-anthony.com/vivienne-westwood/blazer-jackets/burgundy/jacket-waistcoat-check/vw024-a13-bur/" alt=""/>
                    </map>

                </li>
            </ul>
</div>
Was it helpful?

Solution

I've found the answer. The following method is working

<div class="flexslider">
            <ul class="slides">
              <!-- slide1 -->
                <li>
                    <img src="images/slider/2.jpg" alt="" usemap="#map2" />
                    <map name="map2">
                        <area shape="rect" coords="494,2,961,745" href="http://www.john-anthony.com/mens/jeans/" alt=""/>
                        <area shape="rect" coords="0,4,482,749" href="http://www.john-anthony.com/vivienne-westwood/blazer-jackets/burgundy/jacket-waistcoat-check/vw024-a13-bur/" alt=""/>
                    </map>

                </li>
            </ul>
</div>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top