بنظرم تگ <map> در HTML می تونه بهتون کمک کنه، در واقع همانطور که در مثال زیر می بینید، این تگ همراه با تگ <img> بکار می رود و عکس را ناحیه بندی می کند بصورتی که با کلیک روی هر ناحیه یک لینک اجرا شود.
کد HTML:
<!DOCTYPE html>
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>
</body>
</html>
خروجی HTML بالا را در آدرس زیر مشاهده نمایید:
http://beyamooz.com/try_it_yourself/...ryhtml_areamap
در ادامه برای برجسته کردن ناحیه ها باید از jquery استفاده کنید:
کد HTML:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script src="jquery.maphilight.js"></script>
<script>
$(document).ready(function(){
$('.map').maphilight();
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" class="map" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" id="body_one"/>
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>
</body>
</html>
خروجی کد بالا در لینک زیر:
http://beyamooz.com/try_it_yourself/...ery_maphilight
منبع: سایت بیاموز
http://www.beyamooz.com
قوانین ایجاد تاپیک در تالار
پاسخ با نقل قول