-3

enter image description here

How to rotate images in circular path like this in blogger dynamic view template and when i click any image in circular path it should open the specified link

4

1 Answer 1

1

I'm not 100% sure what blogger dynamic view template is, but if you can write custom CSS3 + HTML tags, the following code should suffice.

Screenshot first: spinning image with clickable parts

What it does is basically rotating the image infinite times while make every circle icon of the image clickable. :

<html>
<head>
    <style type="text/css">
        @keyframes myfirst
        {
            from {transform: rotate(0deg);}
            to {transform: rotate(360deg);}
        }

        img {
            animation-name: myfirst;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-delay: 0s;
            animation-iteration-count: infinite;
            animation-direction: normal;
            animation-play-state: running;
        }
    </style>

</head>
<body>
    <img src="pic.png" usemap ="#planetmap"/>
    <map name="planetmap">
      <area shape="circle" coords="67,95,40" href="example.com"/>
      <area shape="circle" coords="177,60,40" href="example.com"/>
      <area shape="circle" coords="244,150,40" href="example.com"/>
      <area shape="circle" coords="69,211,40" href="example.com"/>
      <area shape="circle" coords="180,247,40" href="example.com"/>
    </map>
</body>
</html>

Special Note: Please go to MDN for compatibility information, as CSS3 has not stabilized.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.