java - How to rotate images in circular path like this in blogger dynamic view template -
how rotate images in circular path in blogger dynamic view template , when click image in circular path should open specified link
i'm not 100% sure blogger dynamic view template
is, if can write custom css3
+ html
tags, following code should suffice.
what rotating image infinite times while make every circle icon of image clickable. :
<html> <head> <style type="text/css"> @keyframes myfirst { {transform: rotate(0deg);} {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 mdn compatibility information, css3 has not stabilized.
Comments
Post a Comment