در HTML، شما می‌توانید تصاویر را به عنوان پیوندها (یا لینک‌ها) استفاده کنید، به این صورت که با کلیک بر روی تصویر، کاربر به یک صفحه دیگر یا مکان دیگری هدایت می‌شود. برای ایجاد یک لینک تصویر، شما از تگ <a> برای ایجاد پیوند و تگ <img> برای نمایش تصویر استفاده می‌کنید.
در زیر یک مثال از ایجاد لینک تصویر در HTML آورده شده است:
<a href="https://www.example.com">
<img src="image.jpg" alt="Description of the image">
</a>
در این مثال، تصویر image.jpg به عنوان یک لینک در نظر گرفته شده است که با کلیک بر روی آن، کاربر به آدرس https://www.example.com هدایت می‌شود. متنی که به عنوان alt مشخص شده است، برای توضیح تصویر به کاربرانی که تصویرها را نمی‌بینند، نمایش داده می‌شود.
نقشه‌های تصویری سمت سرور (Server-Side Image Maps)
Server-Side Image Maps یک تکنیک در HTML است که به کاربر امکان می‌دهد با کلیک کردن بر روی بخش‌های مختلف یک تصویر، به صفحات وب مختلف هدایت شوند. در این روش، اطلاعات مربوط به نقاط مختلف تصویر (مانند مختصات X و Y) به همراه ارتباط آن نقاط با صفحات مختلف، در سمت سرور ذخیره می‌شود. زمانی که کاربر بر روی یک نقطه خاص از تصویر کلیک می‌کند، مرورگر این اطلاعات را به سرور ارسال می‌کند و سرور متناسب با نقطه کلیک شده، کاربر را به صفحه مورد نظر هدایت می‌کند.
در زیر، یک مثال از یک Server-Side Image Map آورده شده است:
برای ایجاد Server-Side Image Maps، از تگ <map> به همراه تگ‌های <area> استفاده می‌شود. تگ <map> حاوی یک یا چند تگ <area> است که هر کدام اطلاعات مربوط به یک بخش خاص از تصویر را به همراه مقصد (URL) صفحه‌ای که کاربر باید به آن هدایت شود، مشخص می‌کنند.
<!DOCTYPE html>
<html>
<head>
<title>Server-Side Image Map Example</title>
</head>
<body>
<h2>Click on the regions of the map to visit different pages:</h2>
<img src="worldmap.jpg" alt="World Map" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="0,0,50,50" alt="North America" href="north_america.html">
<area shape="rect" coords="50,50,100,100" alt="Europe" href="europe.html">
<area shape="circle" coords="150,150,50" alt="Africa" href="africa.html">
<!-- Add more <area> tags for other regions -->
</map>
</body>
</html>
در این مثال، یک تصویر جهان با استفاده از تگ <img> نمایش داده شده است و از یک Image Map با نام “worldmap” برای تعریف ناحیه‌های مختلف تصویر استفاده شده است. هر <area> با استفاده از ویژگی‌های shape (شکل) و coords (مختصات) ناحیه‌ای از تصویر را مشخص می‌کند و با ویژگی href (پیوند) مقصد مرتبط با آن ناحیه مشخص می‌شود. با کلیک بر روی هر ناحیه، کاربر به صفحه مرتبط هدایت می‌شود.
نقشه‌های تصویری سمت کاربر (Client-Side Image Maps)
Client-Side Image Maps یک روش برای ایجاد نقشه‌های تعاملی بر روی تصاویر در HTML است. با استفاده از این روش، می‌توانید ناحیه‌های مختلف تصویر را به صفحات وب یا اقدامات دیگر مرتبط کنید، به طوری که هر قسمت از تصویر می‌تواند یک لینک به یک URL مخصوص، یک فرم تعاملی، یا یک اقدام دیگر باشد.
برای ایجاد Client-Side Image Maps، شما از تگ‌های <map> و <area> در کنار تگ <img> استفاده می‌کنید. تگ <map> محیط نقشه را تعریف می‌کند و تگ‌های <area> ناحیه‌های مختلف نقشه را مشخص می‌کنند که هرکدام می‌توانند به یک لینک یا اقدام مرتبط باشند.
در اینجا یک مثال ساده از ایجاد یک Client-Side Image Map در HTML آورده شده است:
<!DOCTYPE html>
<html>
<head>
<title>Client-Side Image Map Example</title>
</head>
<body>
<img src="worldmap.png" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="0,0,200,200" href="northamerica.html" alt="North America">
<area shape="rect" coords="200,0,400,200" href="europe.html" alt="Europe">
<area shape="rect" coords="0,200,200,400" href="southamerica.html" alt="South America">
<area shape="rect" coords="200,200,400,400" href="africa.html" alt="Africa">
</map>
</body>
</html>
در این مثال، یک تصویر جهانگیر با استفاده از تگ <img> درون بدنه HTML قرار داده شده است. سپس با استفاده از تگ <map>، نقشه جهان با نام “worldmap” تعریف شده است. هر ناحیه از تصویر با تگ <area> مشخص شده است، که شکل و مختصات هر ناحیه را مشخص می‌کند (shape و coords) و لینک مربوط به آن ناحیه (href) را مشخص می‌کند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام