javascript - Pointers on image indicating geographic location -
i have world map image below , need put random location pointers on it.to select point on map,i created separate div pointers handle.
such :
<div id="div1" class="div-map-icon" style="left: 283px; top: 136px;"></div>
and div-map-icon class
.div-map-icon{ background-image: url(../images/map_icon.png); background-repeat: no-repeat; height: 26px; position: absolute; float: left; width: 20px; } current output:

however when tried http://jsfiddle.net/fy8vd/ .its not reflecting in ie10.
any highly helpful?
to animation pulsate work in ie either need use -ms- browser prefix or native css3 properties work in example:
demo: http://jsfiddle.net/fy8vd/852/
css
.gps_ring { border: 3px solid #999; -webkit-border-radius: 30px; border-radius: 30px; height: 18px; width: 18px; position: absolute; left:20px; top:214px; -webkit-animation: pulsate 1s ease-out; -webkit-animation-iteration-count: infinite; animation: pulsate 1s ease-out; animation-iteration-count: infinite; opacity: 0.0 } @-webkit-keyframes pulsate { 0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;} 50% {opacity: 1.0;} 100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;} } @keyframes pulsate { 0% {transform: scale(0.1, 0.1); opacity: 0.0;} 50% {opacity: 1.0;} 100% {transform: scale(1.2, 1.2); opacity: 0.0;} }
Comments
Post a Comment