2017년 7월 9일 일요일

모바일웹 이미지맵 구현 usemap


모바일웹 이미지맵 구현 usemap

샘플소스) 

<?
/*
최 상단의 베너이미지
*/
?>
<img id="img_topmenu"
src="/mb/images/main/1.jpg"
style="width:100%"
border="0"
usemap="#map_topmenu">


<map name="map_topmenu" id="map_topmenu">
<area id="ar1" shape="rect" href="javascript:openPopupMenu();" target="_self">
</map>
<script language="javascript">
function imageUseMap(rimg,rwidth,x1,y1,x2,y2,mapid){
var rxsize = document.getElementById(rimg).width;
var xp1 = rxsize / rwidth * x1;
var yp1 = rxsize / rwidth * y1;
var xp2 = rxsize / rwidth * x2;
var yp2 = rxsize / rwidth * y2;
document.getElementById(mapid).coords = xp1+","+yp1+ ","+xp2+","+yp2;
}
//원래 좌표위치
imageUseMap('img_topmenu',
800 /*실제 이미지 넓이*/,
691, 25, 800, 95, 'ar1');
</script>




댓글 없음:

댓글 쓰기