آموزش لینک های عکس در HTML
آموزش لینک های عکس در HTML
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش لینک های عکس در HTML خواهیم پرداخت.
ما نحوه ایجاد لینک هایپر تکست را با استفاده از متن مشاهده کرده ایم و همچنین نحوه استفاده از تصاویر را در صفحات وب خود آموخته ایم. اکنون، ما می آموزیم که چگونه از تصاویر برای ایجاد هایپر لینک ها استفاده کنیم.
مثال
استفاده از تصویر به عنوان هایپر لینک ساده است. همانطور که در زیر نشان داده شده است ، فقط باید از یک تصویر درون هایپر لینک در محل متن استفاده کنیم –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title>Image Hyperlink Example</title> </head> <body> <p>Click following link</p> <a href = "https://www.tutorialspoint.com" target = "_self"> <img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/> </a> </body> </html> |
نتیجه زیر را ایجاد می کند، جایی که می توانید بر روی تصاویر کلیک کنید تا به صفحه اصلی Tutorials Point برسید.
|
1 2 3 |
Click following link Tutorials Point |
این ساده ترین روش ایجاد لینک با استفاده از تصاویر بود. در ادامه خواهیم دید که چگونه می توانیم لینک های تصویر حساس به ماوس را ایجاد کنیم.
تصاویر حساس به ماوس
استانداردهای HTML و XHTML یک ویژگی را فراهم می کند که به شما امکان می دهد لینک های مختلفی را درون یک تصویر قرار دهید. شما می توانید بر اساس مختصات مختلف موجود بر روی تصویر، پیوندهای مختلفی روی یک تصویر ایجاد کنید. وقتی پیوندهای مختلف به مختصات مختلف متصل شدند، می توانیم قسمتهای مختلف تصویر را کلیک کنیم تا اسناد مورد نظر باز شود. اینگونه تصاویر حساس به ماوس به عنوان نقشه های تصویری شناخته می شوند.
برای ایجاد نقشه های تصویری دو راه وجود دارد:
Server-side image maps– این ویژگی صفت ismap تگ <img> را فعال می کند و نیاز به دسترسی به سرور و برنامه های پردازش نقشه تصویر مرتبط دارد.
Client-side image maps – این با ویژگی usemap از تگ <img> همراه باتگ <map> و <area> مربوط ایجاد می شود
نقشه های تصویر سمت سرور (Server-Side Image Maps)
در اینجا شما به سادگی تصویر خود را درون هایپر لینک قرار می دهید و از ویژگی ismap استفاده می کنید که آن را به یک تصویر خاص تبدیل می کند و هنگامی که کاربر روی جایی از تصویر کلیک می کند، مرورگر مختصات نشانگر ماوس را به همراه URL مشخص شده در تگ <a> به سرور وب از مختصات نشانگر ماوس برای تعیین اینکه کدام سند را به مرورگر تحویل می دهد استفاده می کند.
هنگام استفاده از ismap، ویژگی href تگ <a> باید حاوی URL یک برنامه سرور مانند اسکریپت cgi یا PHP و غیره باشد تا درخواست ورودی را بر اساس مختصات عبور داده شده پردازش کند.
مختصات موقعیت ماوس پیکسل های صفحه ای هستند که از گوشه بالا سمت چپ تصویر شمارش می شوند و با (0) شروع می شوند. مختصات قبل از علامت سوال به انتهای URL اضافه می شوند.
به عنوان مثال، اگر یک کاربر از گوشه بالا سمت چپ تصویر زیر 20 پیکسل بیشتر و 30 پیکسل پایین کلیک کند –
که توسط قطعه کد زیر ایجاد شده است –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!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> |
|
1 2 3 |
Click following link Tutorials Point |
سپس مرورگر پارامترهای جستجوی زیر را به سرور وب ارسال می کند که می تواند توسط اسکریپت ismap.cgi یا فایل نقشه پردازش شود و می توانید هر اسنادی را که دوست دارید به این مختصات پیوند دهید –
|
1 |
/cgi-bin/ismap.cgi?20,30 |
به این ترتیب می توانید لینکهای مختلفی را به مختصات مختلف تصویر اختصاص دهید و وقتی روی این مختصات کلیک می کنید، می توانید سند مربوطه را باز کنید.
نقشه های تصویر سمت کلاینت (Client-Side Image Maps)
نقشه های تصویر سمت کلاینت با ویژگی usemap از تگ <img /> فعال شده و توسط تگ های ویژه <map> و <area> تعریف می شوند.
تصویری که قرار است نقشه را تشکیل دهد با استفاده از تگ <img /> به عنوان یک تصویر عادی در صفحه قرار می گیرد، با این تفاوت که یک ویژگی اضافی به نام usemap را به همراه دارد. مقدار ویژگی usemap مقداری است که در تگ <map> برای پیوند دادن تگ های نقشه و تصویر استفاده خواهد شد. <map> همراه با تگ <area> تمام مختصات تصویر و پیوندهای مربوطه را تعریف می کند.
تگ <area> در داخل تگ نقشه، شکل و مختصات مشخص شده برای تعیین مرزهای هر نقطه قابل کلیک روی تصویر را مشخص می کند. در اینجا مثالی از نقشه تصویر آورده شده است –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!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> |
خروجی
|
1 2 3 |
Search and click the hotspot HTML Map |
دستگاه مختصات
مقدار واقعی مختصات کاملاً به شکل مورد نظر بستگی دارد. در اینجا خلاصه ای ذکر شده است ، که به دنبال آن مثالهای مفصلی است –
rect = x1 ، y1 ، x2 ، y2
x1 و y1 مختصات گوشه بالا سمت چپ مستطیل هستند. x2 و y2 مختصات گوشه پایین سمت راست هستند.
دایره = xc ، yc ، شعاع
xc و yc مختصات مرکز دایره هستند و شعاع دایره است. یک دایره با مرکز 200،50 با شعاع 25 دارای ویژگی مختصات = “200،50،25” خواهد بود
poly = x1 ، y1 ، x2 ، y2 ، x3 ، y3 ، … xn ، yn
جفتهای مختلف x-y راسها (نقاط) چند ضلعی را تعریف می کنند، “خط” از یک نقطه به نقطه بعدی رسم می شود. یک چند ضلعی الماسی شکل با نقطه بالای 20،20 و 40 پیکسل در وسیع ترین نقاط دارای ویژگی مختصات = “20،20،40،40،20،60،0،40” است.
همه مختصات مربوط به گوشه بالا سمت چپ تصویر هستند (0/0). هر شکل دارای یک URL مرتبط است. برای دانستن مختصات موقعیت های مختلف می توانید از هر نرم افزار تصویری استفاده کنید.
لیست جلسات قبل آموزش برنامه نویسی HTML
.svg)
دیدگاه شما