آموزش Image Link
در این جلسه به آموزش Image Link در زبان کد نویسی HTML خواهیم پرداخت, لطفا قبل از مشاهده این جلسه ابتدا جلسه ی قبل را از این لینک مشاهده کنید.
تاکنون مشاهده کردیم که چگونه با استفاده از متن، یک لینک هایپر تکست ایجاد کنیم و همچنین فرا گرفته ایم که چگونه از تصاویر در صفحات وب خود استفاده کنیم. اکنون فرا خواهیم گرفت که چگونه با استفاده از تصاویر هایپر لینک ایجاد کنیم.
مثال
استفاده از تصویر به عنوان هایپر لینک بسیار ساده می باشد. الزام است که یک تصویر را در داخل هایپر لینک در محل تصویر قرار دهیم، همان طور که در زیر نشان داده شده است
<!DOCTYPE html> <meta http-equiv="content-type" content="text/html; charset=utf-8">لرن پارسی یک بستر انتشار آنلاین متشکل از محتوای آموزشی و کاربردی در موضوعات مختلف می باشد و هدفش رفع چالش های آموزشی شما در موضوعات کلیدی متنوع در سریع ترین زمان ممکن است . لرن پارسی دارای مجوزهای ثبت می باشد و مجموعه ما مخاطب را در اولویت اول خود قرار خواهد داد. ۸۸۱۴۶۳۲۳ - ۸۸۴۴۶۷۸۰ - ۸۸۱۴۶۳۳۰ <html> <head> <title>Image Hyperlink Example<title> <head> <body> <p>Click following link<p> <a href="https://learnparsi.com/" target="_self"> <img src="012.jpg " alt=" learn parsi" border="0" /> <a> <body> <html>
این ساده ترین راه ایجاد هایپرلینک با استفاده از تصاویر می باشد
تصاویر حساس به ماوس
استانداردهای HTML و XHTML یک ویژگی ارائه می دهند که به شما اجازه می دهد لینک های مختلفی را در داخل یک تصویر اجرا کنید. شما می توانید براساس مختصات مختلف موجود روی تصویر، لینک های مختلفی را روی یک تصویر مجزا ایجاد کنید. زمانی که لینک های متفاوت به مختصات متفاوت ضمیمه می شود، می توانیم برای باز کردن داکیومنت های تارگت روی بخش های مختلف تصویر کلیک کنیم. چنین تصاویری که به ماوس حساس می باشند، تصاویر نقشه نامیده میشوند. دو روش برای ایجاد چنین تصاویری وجود دارد.
۱. server image side – توسط ویژگی ismap از برچسب <img> فعال می شود و دستیابی به یک سرور و پردازش برنامه های مربوط به تصویر نقشه الزام می باشد.
۲. Client side image maps – با استفاده از ویژگی usemap از برچسب <img>همراه با برچسب های متناظر<map> و <area> ایجاد می شود.
Server side image maps
در اینجا به سادگی تصویر خود را داخل یک هایپر لینک قرار داده و از ویژگی ismap استفاده کنید که آن را یک تصویر خاص می سازد و وقتی یوزر در بخشی از تصویر کلیک می کند، مرورگر مختصات اشاره گر ماوس را همراه با URL مشخص شده در برچسب <a> به سرور وب منتقل می کند. سرور از مختصات اشاره گر ماوس استفاده می کند تا تعیین کند کدام داکیومنت باید به مرورگر بازگردانده شود.
زمانی که ismap استفاده می شود، ویژگی href از برچسب <a> باید URL یک برنامه ی سرور را مانند یک cgi یا اسکریپت PHP و غیره در برداشته باشد، تا درخواست ورودی را براساس مختصات انتقال داده شده پردازش کند. مختصات موقعیت ماوس پیکسل های صفحه میباشند که از گوشه ی بالای سمت چپ تصویر شمرده می شوند و با (۰,۰) شروع می شوند. مختصات دنبال شده با یک علامت سوال، به انتهای URL اضافه می شوند.
مثال
<!DOCTYPE html> <html> <head> <title>ISMAP Hyperlink Example</title> </head> <body> <p>Click following link</p> <p>Click following link</p> <a href="Exp1.html" target="_self"> <img ismap src="logo.png" alt="" border="0" /> </a> </body> </html>
سپس مرورگر پارامترهای جستجوی زیر را به سرور می فرستد که می تواند توسط اسکریپت cgi.ismap یا فایل map پردازش شود و شما می توانید هر داکیومنتی را که دوست داشته باشید به این مختصات لینک کنید.
/cgi-bin/ismap.cgi?20,30
از این طریق شما می توانید لینک های مختلفی را به مختصات متفاوت یک تصویر اختصاص دهید، و وقتی این مختصات کلیک می شوند، می توانید داکیومنت های لینک شده ی متناظر را باز کنید.
توجه
شما برنامه نویسی CGI را زمانی فراخواهید گرفت که برنامه نویسی perl را مطالعه کنید. می توانید اسکریپت خود را بنویسید تا این مختصات انتقال داده شده را با استفاده از PHP یا هر اسکریپت دیگری پردازش کنید. فعال اجازه بدهید روی یادگیری HTML تمرکز کنیم، می توانید این فصل را بعدا بازبینی کنید.
آموزش Image Link
Client side image maps
این تصاویر به وسیله ی ویژگی usemap از برچسب < img> فعال می شوند و به وسیله ی برچسب های ضمیمه ی<map> و <area> تعریف می شوند.
نقشه ای که قرار است نقشه را طراحی کند، به وسیله ی < img> به عنوان یک تصویرعادی وارد صفحه می شود، به جز اینکه این مورد ویژگی اضافه ای به نام usemap همرا خود دارد. مقدار ویژگی usemap مقداری می باشد که در یک برچسب <map >استفاده می شود تا برچسب های تصویر و نقشه را لینک کند. <map> همراه با برچسب های <area> همه ی مختصات تصویر و لینک های مربوطه را تعریف می کند.
برچسب <area> در داخل برچسب نقشه مختصات و شکل حاشیه های قابل کلیک در داخل تصویر را تعریف می کند. در اینجا مثالی از تصویر نقشه می بینید.
<!DOCTYPE html> <html> <head> <title>USEMAP Hyperlink Example</title> </head> <body> <img src=" 012.jpg" width="250" height="150" alt="Tahlildadeh" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,40,126" href=" 02.jpg"> <area shape="circle" coords="90,58,20" href=" 04.jpg"> <area shape="circle" coords="124,78,20" href=" 05.jpg"> </map> </body> </html>
آموزش Image Link
سیستم مختصات
مقدار حقیقی مختصات کانال به شکل در سوال وابسته است. در اینجا خلاصه ای می بینید که قرار است با مثال های مفصل دنبال شوند.
rect = x1 , y1 , x2 , y2
x1 و y1 مختصات گوشه ی بالای سمت چپ از مستطیل می باشد.x2 و y2 مختصات گوشه ی سمت راست پایین می باشند.
xc و yc مختصات مرکز دایره و radius شعاع دایره می باشد. دایره ای به مرکز۵۰,۲۰۰ با شعاع ۲۱ دارای ویژگی coords=”۲۰۰,۵۰,۲۵″ بود خواهد
poly = x1 , y1 , x2 , y2 , x3 , y3 ,… xn , yn
جفت های مختلف y-x رئوس چند ضلعی می باشند، با یک خط که از یک نقطه به نقطه ی دیگر کشیده شده. یک چندضلعی لوزی شکل با بالا ترین راس آن در نقطه ی ۲۰ , ۲۰ و ۴۰ پیکسل، در عریض ترین نقطه ی خود دارای ویژگی coords=”۲۰,۲۰,۴۰,۴۰,۲۰,۶۰,۰,۴۰ می باشد.
تمام مختصات مربوط به بالا ترین گوشه ی سمت چپ تصویر می باشند. هر شکل دارای یک URL مربوطه می باشد. می توانید از هر نرم افزار تصویری برای دانستن مختصات موقعیت های مختلف استفاده کنید.
لینک ایمیل HTML
قرار دادن یک لینک ایمیل HTML روی صفحه ی وب خود کار سختی نیست، اما این کار ممکن است باعث بروز مشکل اسپم های غیر ضروری در اکانت ایمیل شما شود. افرادی هستند که می توانند برنامه هایی را برای جمع آوری چنین ایمیل هایی اجرا کنند و سپس آنها را با راه های مختلف برای اسپم کردن استفاده کنند. می توانید از گزینه دیگری استفاده کنید تا افراد به راحتی بتوانند به شما ایمیل ارسال کنند. یک گزینه می تواند استفاده از فرم های HTML باشد برای جمع آوری داده های یوزر و سپس استفاده از اسکریپت PHP یا CGI برای ارسال ایمیل.
برای یک مثال ساده، فرم Us Contact را چک کنید. با استفاده از این فرم یک فید بک از یوزر گرفته و سپس از یک برنامه ی CGI استفاده می کنیم که در حال جمع آوری این اطالعات و ارسال ایمیل به یک ID email ارائه شده می باشد.
برچسب HTML Email
برچسب <a> در HTML برای مشخص کردن یک آدرس ایمیل و ارسال ایمیل، گزینه هایی را به شما ارائه می دهد. در حالیکه از برچسب <a> به عنوان یک tag email استفاده می کنید، از address mailtoemail همراه با ویژگی href نیز استفاده خواهید کرد. در زیر ترکیب استفاده از mailto را به جای استفاده از http می بینید.
<a href= "mailto:abc@example.com">Send Email</a>
این کد لینک زیر را تولید خواهد کرد که می توانید به آن ایمیل ارسال کنید
اکنون اگر یوزر روی این لینک کلیک کند، client email آغاز به کار خواهد کرد (مانند notes lotus و outlook express و غیره) که روی کامپیوتر شما نصب شده است. ریسک دیگری در استفاده از این گزینه برای ارسال ایمیل وجود دارد، زیرا اگر یوزر client email نصب شده روی کامپیوتر خود نداشته باشد، ارسال ایمیل ممکن نحواهد بود.
تنظیمات پیش فرض
شما می توانید یک موضوع ایمیل و یک بدنه ی ایمیل پیش فرض همراه با آدرس ایمیل خود ایجاد کنید. در زیر مثال استفاده از بدنه و موضوع پیش فرض را مشاهده می کنید.
<a href="mailto:abc@example.com?subject=Feedback&body=Message"> Send Feedback </a>
این کد نیز لینک زیر را تولید خواهد کرد که می توانید ایمیل ارسال کنید.
ممنون که در این جلسه هم با ما همراه بودید در این جلسه به یادگیری آموزش Image Link پرداخته شد.
در جلسه ی آینده نیز به نکات کلیدی و پرکاربردی خواهیم پرداخت پس حتما با ما همراه باشید و جلسات آینده را از دست ندهید! برای تمرین هر جلسه میتوانید به وبسایت جهانی W3C مراجعه نمایید. تمرین مستمر همواره تاثیر بسیار خوب و مهمی در یادگیری و تقویت مهارت های شما دارد پس حتما آن را جدی بگیرید.
دیدگاه ها