آموزش HTML - لینک های تصویری

ما نحوه ایجاد پیوند ابرمتن را با استفاده از متن آموختیم و همچنین قبلا یاد گرفته ایم که چگونه از تصاویر در صفحات وب خود استفاده کنیم. اکنون، نحوه استفاده از تصاویر را برای ایجاد هایپرلینک یاد خواهیم گرفت.

مثال

استفاده از یک تصویر به عنوان لینک بسیار ساده است. ما فقط باید از یک تصویر در داخل هایپرلینک در محل متن همانطور که در زیر نشان داده شده است استفاده کنیم

<!DOCTYPE html>
<html dir="dir" lang="fa">

   <head>
      <title>مثال لینک با استفاده از تصویر</title>
   </head>
	
   <body>
      <p>بر روی لینک زیر کلیک کنید</p>
      <a href = "https://www.example.com" target = "_self"> 
         <img src = "/images/logo.png" alt = "logo" border = "0"/> 
      </a>
   </body>
	
</html>

این کد ، نتیجه زیر را ایجاد می کند، جایی که می توانید روی تصویر کلیک کنید تا به صفحه اصلی توت24 برسید.

پیوند های تصویری در وب

این ساده ترین راه برای ایجاد لینک ها با استفاده از تصاویر بود. در ادامه خواهیم دید که چگونه می توانیم پیوندهای تصویری حساس به ماوس ایجاد کنیم.

تصاویر حساس به ماوس

استانداردهای HTML قابلیتی را فراهم می کند که به شما امکان می دهد پیوندهای مختلف زیادی را در یک تصویر واحد جاسازی کنید. می توانید پیوندهای مختلفی را بر روی یک تصویر واحد بر اساس مختصات مختلف موجود در تصویر ایجاد کنید. هنگامی که پیوندهای مختلف به مختصات مختلف متصل شد، می‌توانیم روی قسمت‌های مختلف تصویر کلیک کنیم تا صفحات هدف باز شود. این گونه تصاویر حساس به ماوس به عنوان نقشه های تصویری شناخته می شوند.

دو راه برای ایجاد نقشه های تصویری وجود دارد -

نقشه‌های تصویر سمت سرور - این توسط ویژگی ismap تگ <img> فعال می‌شود و نیاز به دسترسی به سرور و برنامه‌های پردازش تصویر نقشه مرتبط دارد.
نقشه های تصویر سمت سرویس گیرنده - این با ویژگی usemap تگ <img>، همراه با تگ های <map> و <area> مربوطه ایجاد می شود.

نقشه های تصویر سمت سرور

در اینجا شما به سادگی تصویر خود را در یک Hyper Link قرار می دهید و از ویژگی ismap استفاده می کنید که آن را به یک تصویر خاص تبدیل می کند و هنگامی که کاربر در جایی از تصویر کلیک می کند، مرورگر مختصات اشاره گر ماوس را به همراه URL مشخص شده در تگ <a> ارسال می کند. به وب سرور سرور از مختصات اشاره گر ماوس برای تعیین اینکه کدام سند را به مرورگر تحویل دهد استفاده می کند.

هنگامی که از ismap استفاده می شود، ویژگی href از تگ <a> باید حاوی URL یک برنامه سرور مانند یک اسکریپت cgi یا PHP و غیره باشد تا درخواست دریافتی را بر اساس مختصات ارسال شده پردازش کند.

مختصات موقعیت ماوس پیکسل های صفحه است که از گوشه سمت چپ بالای تصویر شمارش می شوند و با (0,0) شروع می شوند. مختصات، قبل از علامت سوال، به انتهای URL اضافه می شود.

به عنوان مثال، اگر کاربر روی 20 پیکسل روی و 30 پیکسل پایین از گوشه سمت چپ بالای تصویر زیر کلیک کند -

که توسط قطعه کد زیر - ایجاد شده است

<!DOCTYPE html>
<html>

   <head>
      <title>ISMAP مثال هایپرلینک تصویری با</title>
   </head>
	
   <body>
      <p>بر روی بخش مورد نظر از تصویر کلیک کنید</p>
      
      <a href = "/cgi-bin/ismap.cgi" target = "_self"> 
         <img ismap src = "/images/logo.png" alt = "توت 24" border = "0"/> 
      </a>
   </body>
	
</html>

سپس مرورگر پارامترهای جستجوی زیر را به سرور وب ارسال می کند که می تواند توسط اسکریپت ismap.cgi یا فایل نقشه پردازش شود و شما می توانید هر سندی را که دوست دارید به این مختصات پیوند دهید -

/cgi-bin/ismap.cgi?20,30

به این ترتیب می‌توانید پیوندهای مختلفی را به مختصات مختلف تصویر اختصاص دهید و هنگامی که روی آن مختصات کلیک می‌شود، می‌توانید سند پیوندی مربوطه را باز کنید.

توجه - زمانی که برنامه نویسی Perl را مطالعه کنید، برنامه نویسی CGI را یاد خواهید گرفت. شما می توانید اسکریپت خود را برای پردازش این مختصات ارسال شده با استفاده از PHP یا هر اسکریپت دیگری بنویسید. در حال حاضر، بیایید روی یادگیری HTML تمرکز کنیم و بعداً می‌توانید دوباره به این بخش مراجعه کنید.

نقشه های تصویر سمت کاربر

نقشه‌های تصویر سمت کاربر با ویژگی usemap تگ <img /> فعال می‌شوند و توسط تگ‌های پسوندی <map> و <area> مشخص می‌شوند.

تصویری که قرار است نقشه را تشکیل دهد با استفاده از تگ <img /> به عنوان یک تصویر معمولی در صفحه درج می شود، با این تفاوت که دارای یک ویژگی اضافی به نام usemap است. مقدار ویژگی usemap مقداری است که در تگ <map> برای پیوند دادن تگ های نقشه و تصویر استفاده می شود. <map> به همراه تگ های <area> همه مختصات تصویر و لینک های مربوطه را تعریف می کنند.

تگ <area> در داخل تگ نقشه، شکل و مختصات را برای تعیین مرزهای هر نقطه قابل کلیک موجود در تصویر مشخص می کند. در اینجا یک مثال از نقشه تصویر آمده است -

<!DOCTYPE html>
<html>

   <head>
      <title>USEMAP مثال هایپرلینک تصویری با</title>
   </head>
	
   <body>
      <p>در بخش مورد نظر خود کلیک نمایید</p>
      <img src = /images/html.gif alt = "HTML نقشه" border = "0" usemap = "#html"/>
      <!-- Create  Mappings -->
      
      <map name = "html">
         <area shape = "circle" coords = "80,80,20" 
            href = "/css/index.htm" alt = "CSS لینک" target = "_self" />
         
         <area shape = "rect" coords = "5,5,40,40" alt = "jQuery لینک" 
            href = "/jquery/index.htm" target = "_self" />
      </map>
   </body>
   
</html>

دستگاه مختصات

مقدار واقعی کدها کاملاً به شکل مورد نظر بستگی دارد. در اینجا خلاصه ای وجود دارد که با مثال های مفصل دنبال می شود -

rect = x ₁ ، y ₁ ، x ₂ ، y ₂

x ₁ و y ₁ مختصات گوشه سمت چپ بالای مستطیل هستند. x ₂ و y ₂ مختصات گوشه پایین سمت راست هستند.
شعاع , circle = x _c ، y _c

x _c و y _c مختصات مرکز دایره هستند و شعاع ، شعاع دایره است. دایره‌ای با مرکز 200،50 با شعاع 25 دارای صفت coords = "200،50،25" است.
poly = x ₁ , y ₁ , x ₂ , y ₂ , x ₃ , y ₃ , ... x _n , y _n

جفت‌های xy مختلف، رئوس (نقاط) چند ضلعی را تعریف می‌کنند و یک «خط» از یک نقطه به نقطه بعدی کشیده می‌شود. یک چند ضلعی الماسی شکل که نقطه بالایی آن 20،20 و عرض 40 پیکسل در عریض ترین نقاطش باشد، دارای صفات coords = "20،20،40،40،20،60،0،40" خواهد بود.

همه مختصات نسبت به گوشه سمت چپ بالای تصویر هستند (0,0). هر شکل یک URL مرتبط دارد. برای دانستن مختصات موقعیت های مختلف می توانید از هر نرم افزار پردازش تصویر و گرافیک استفاده کنید.

لینک های متنی - درس قبلی

درس بعدی - لینک های ایمیل