مشاوره رایگان
دریافت لینک های دانلود
دریافت پستی درب منزل
مبلغ کل:
تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید
آموزش کامل Image map یا نقشه های تصویری در HTML
در آموزش های قبل چگونگی ایجاد لینک hypertext با استفاده از متن را آموختیم و همچنین یاد گرفتیم که چگونه از تصاویر در صفحات وب استفاده کنیم. در حال حاضر، ما قصد داریم تا بیاموزیم که چگونه از تصاویر برای ایجاد hyperlink ها استفاده کنیم.
مثال :
استفاده از یک تصویر به عنوان hyperlink بسیار آسان است. ما فقط نیاز داریم تا یک تصویر را در داخل لینک در جایی که متن قرار می گیرد، بگذاریم. همانطور که در مثال زیر نشان داده شده است -
<!DOCTYPE html>
<html>
<head>
<title>Image Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://clicksite.org" target = "_self">
<img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/>
</a>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند که در آن شما می توانید بر روی تصاویر کلیک کنید تا به صفحه اصلی سایت https://clicksite.org بروید.
Click following link
این ساده ترین راه ایجاد hyperlink با استفاده از تصاویر بود. بعد از این ما خواهیم دید که چگونه می توان لینک های حساس به ماوس ایجاد کرد.
تصاویر حساس به ماوس (Mouse-Sensitive Images)
استانداردهای HTML و XHTML یک ویژگی را فراهم می کند که به شما اجازه می دهد، تا لینک های مختلف زیادی را درون یک تصویر قرار دهید. شما می توانید لینک های مختلفی را بر روی یک تصویر و بر اساس مختصاتِ مختلفِ موجود در تصویر ایجاد کنید. هنگامی که لینک های مختلف به مختصات مختلف متصل می شوند، می توانیم بر روی بخش های مختلف در تصویر برای باز کردن صفحات مورد نظرمان، کلیک کنیم. چنین تصاویر حساس به ماوس، به عنوان نقشه های تصویری (image maps) شناخته می شود.
دو راه برای ایجاد image map وجود دارد -
- Image map های سمت سرور (Server-side image maps) :
در این روش image map توسط ویژگی یا attribute ی به نام ismap از تگ <img> فعال می شود و نیاز به دسترسی به سرور و برنامه های مربوط به پردازش image map دارد.
- Image map های سمت مشتری (Client-side image maps) :
در این روش image map توسط ویژگی یا attribute ی به نام usemap از تگ <img> همراه با تگ های <map> و <area> ایجاد می شود.
Image map های سمت سرور (Server-side image maps) :
در این روش، تصویر خود را در داخل لینک hyperlink قرار دهید و از ویژگی ismap استفاده کنید تا تصویر خاصی را ایجاد نمایید . بطوریکه وقتی کاربر روی هر مکانی در تصویر کلیک می کند، مرورگر، مختصات نشانگر ماوس را همراه با URL تعیین شده در تگ <a> به سمت سرور ارسال می کند و web server با استفاده از مختصات اشاره گر ماوس تعیین می کند کدام سند (document) برای مرورگر ارسال شود.
هنگامی که از ismap استفاده می کنید، ویژگی href در تگ <a> باید حاوی یک نشانی اینترنتی از یک server application مانند اسکریپت CGI یا PHP و غیره باشد. تا درخواست ورودی بر اساس مختصاتِ انتقال داده شده، پردازش شود.
مختصاتِ موقعیتِ ماوس، در واقع، پیکسل های صفحه است که از گوشه سمت چپ بالای تصویر شمارش شده ، و با مختصات (0،0)شروع می شود. مختصات، قبل از یک علامت سوال، به انتهای URL اضافه می شوند.
<!DOCTYPE html>
<html>
<head>
<title>ISMAP Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "/cgi-bin/ismap.cgi" target = "_self">
<img ismap src = "/images/logo.png" alt = "Tutorials Point" border = "0"/>
</a>
</body>
</html>
Click following link
برای مثال، اگر یک کاربر، از گوشه بالا، سمت چپ روی مختصات 20 در 30 پیکسل از تصویر کد بالا کلیک کند، کد زیر تولید می شود:
/cgi-bin/ismap.cgi?20,30
سپس مرورگر پارامترهای جستجو را به web server ارسال می کند که می تواند توسط اسکریپت ismap.cgi یا فایل نقشه پردازش شود و شما می توانید هر سندی را که دوست دارید به این مختصات پیوند دهید .
به این ترتیب شما می توانید لینک های مختلف را به مختصات مختلف از تصویر اختصاص دهید و زمانی که روی این مختصات کلیک می شود، می توانید سند مرتبط با آن را باز کنید.
توجه داشته باشید – زمانی که برنامه نویسی perl را بیاموزید، خواهید توانست برنامه نویسی CGI را نیز یاد بگیرید. شما می توانید اسکریپت خود را برای پردازشِ این مختصاتِ انتقال داده شده، با استفاده از PHP یا هر اسکریپت دیگری بنویسید. در حال حاضر، اجازه دهید تمرکز را بر روی یادگیری HTML بگذاریم.
Image map های سمت مشتری (Client-side image maps) :
image map های سمت مشتری (client) توسط ویژگی usemap در تگ <img /> فعال می شوند و توسط تگ های ضمیمه ی <map> و <area> تعریف می شوند.
تصویری که می خواهد نقشه را بسازد، با استفاده از برچسب <img /> به عنوان یک تصویر معمولی به صفحه اضافه می شود، مگر اینکه یک ویژگی اضافی به نام usemap داشته باشد. مقدار ویژگی usemap در تگ <map> برای پیوند تگ map
و image استفاده می شود. تگ <map> همراه با تگ <area> تمام مختصات تصویر و لینک های مربوطه را تعریف می کند.
تگ <area> در داخل تگ map، شکل و مختصاتی را مشخص می کند تا محدوده ی هر نقطه ی قابل کلیک بر روی تصویر را تعریف کند. در اینجا یک مثال از image map می آوریم -
<!DOCTYPE html>
<html>
<head>
<title>USEMAP Hyperlink Example</title>
</head>
<body>
<p>Search and click the hotspot</p>
<img src = /images/html.gif alt = "HTML Map" border = "0" usemap = "#html"/>
<!-- Create Mappings -->
<map name = "html">
<area shape = "circle" coords = "80,80,20"
href = "/css/index.htm" alt = "CSS Link" target = "_self" />
<area shape = "rect" coords = "5,5,40,40" alt = "jQuery Link"
href = "/jquery/index.htm" target = "_self" />
</map>
</body>
</html>
کد بالا را در فایل html خود قرار دهید، و آن را تست کنید. کد فوق نتیجه زیر را تولید می کند -
دستگاه مختصات (Coordinate System)
ارزش واقعی coords کاملا وابسته به شکل مورد نظر است. در اینجا خلاصه ای همراه با نمونه های دقیق را مشاهده می کنید -
- rect = x1 , y1 , x2 , y2
x1 و y1 مختصات گوشه بالا، سمت چپِ مستطیل هستند؛ x2 و y2 مختصات گوشه پایین، سمت راستِ مستطیل هستند.
- circle = xc , yc , radius
xc و yc مختصات مرکز دایره هستند و radius شعاع دایره است. یک دایره با مرکز 200,50 و با شعاع 25 دارای ویژگی زیر خواهد بود :
coords = "200,50,25"
- poly = x1 , y1 , x2 , y2 , x3 , y3 , ... xn , yn
جفت های مختلف x-y رأس ها (نقاط) چند ضلعی را مشخص می کنند که با یک خط از یک نقطه ای به نقطه ی دیگر کشیده شده اند. یک چند ضلعی به شکل لوزی بالاترین نقطه اش در 20، 20 و 40 پیکسل می باشد ودر عریض ترین نقطه، دارای ویژگی زیر می باشد .
coords = "20,20,40,40,20,60,0,40"
تمام مختصات نسبت به گوشه بالا سمت چپ تصویر یعنی (0،0) سنجیده می شود. هر شکل URL مرتبط به خود را دارد. شما می توانید از هر نرم افزار تصویری، برای دانستن مختصات موقعیت های مختلف استفاده کنید.
فصلِ:
5
,
تعداد قسمت ها:
177
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML
آموزش HTML5
این فصل در یک نگاه:
در این فصل صفحات قالب فروشگاهی را بطور کامل واکنشگرا می کنیم.…
HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشن‌ها محسوب می‌شود. در واقع HTML را عنصر کلیدی صفحات وب می…
فصلِ:
3
,
تعداد قسمت ها:
25
,
سطح:
صفر تا صد
این فصل در یک نگاه:
فصل سوم…
آموزش طراحی ریسپانسیو مدرن و جذابتر نسبت به بوتسرپ (همراه با ساخت صفحه اصلی و پنل یک آژانس مسافربری) آموزش پروژه محور فریمورک متریالایز برای اولین بار بین وب سایت های آموزشی آموزش تمامی …
فصلِ:
5
,
تعداد قسمت ها:
77
,
سطح:
متوسط
این فصل در یک نگاه:
ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…
این مجموعه با تلفیقی از فریمورک bootstrap و کد های html و css ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…
فصلِ:
11
,
تعداد قسمت ها:
162
,
سطح:
صفر تا صد
این فصل در یک نگاه:
در این فصل(فصل یازدهم مجموعه)،به طراحی CMS (سیستم مدیریت محتوا)اختصاصی فروشگاه می پردازیم.هدف از طراحی این بخش،آنست که م…
در این مجموعه آموزشی قصد داریم از صفر تا صد طراحی یک فروشگاه اینترنتی رو به صورت کامل آموزش بدهیم.این فروشگاه شامل تمامی بخش های مورد نیاز یک فروشگاه اینترنتی است. هدف از این مجموعه،آموزش…
فصلِ:
4
,
تعداد قسمت ها:
240
,
سطح:
صفر تا صد
موضوعات:
آموزش PHP
آموزش Bootstrap
آموزش CSS
آموزش JQUERY
آموزش HTML
آموزش PHP MVC
آموزش Ajax
آموزش HTML5
این فصل در یک نگاه:
طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…
توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap و به صورت تضمینی و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ:
4
,
تعداد قسمت ها:
368
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش ساخت فروشگاه اینترنتی
آموزش Bootstrap
آموزش Laravel
این فصل در یک نگاه:
مباحث تکمیلی فریم ورک لاراول…
فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
فصلِ:
1
,
تعداد قسمت ها:
155
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش NodeJs
آموزش Bootstrap
آموزش Laravel
آموزش Symphony
این فصل در یک نگاه:
مباحث مقدماتی فریم ورک react.js…
توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
فصلِ:
1
,
تعداد قسمت ها:
15
,
سطح:
متوسط
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش ASP.NET
آموزش ASP.NET MVC
آموزش PHP MVC
آموزش Phyton
آموزش سئو
آموزش ساخت فروشگاه اینترنتی
آموزش HTML
آموزش ایمیل مارکتینگ
آموزش وردپرس
آموزش فروشگاه ساز اپن کارت
آموزش جوملا
آموزش Virtual Freer
آموزش WHMCS
این فصل در یک نگاه:
رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…
اصول مدیریت وب سایت برای وب مستر شدن برای موفقیت یک وب سایت لازم الاجراست. زیرا شما دوست دارید وب سایت خود را به کارخانه پولسازی تبدیل کنید. این واقعیت رویا نیست. هرکس این اصول را بداند به …
