ساختن لینک با استفاده از تصاویر

برای اینکه از یک عکس به عنوان یک لینک استفاده کنید با ید از دو نکته که قبلاً آموختیم استفاده کنیم.

  1. چگونه یک لینک بسازیم.
  2. چگونه یک عکس را به صفحه اضافه کنیم.
  • برای اینکه بخواهیم به یک صفحه لینکی را ایجاد کنیم باید از این تگ استفاده کنیم:

<a href="url">متن لینک</a>
  • اگر بخواهیم یک عکس را به صفحه اضافه کنیم باید از این تگ استفاده کنیم:

<img src="image.gif">

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

<a href="url"><img src="image.gif"></a>

تنها نکته ای که در اینجا باید به آن دقت کنید این است که نباید تگ لینک را قبل از ورود تصویر ببندید. یعنی تگ عکس باید بین تگ ابتدایی و انتهایی لینک قرار بگیرد تا به عنوان یک لینک عمل کند. به این مثال توجه کنید:

می خواهیم از عکسی با نام learn_html.gif که در پوشه همین صفحه قرار دارد به عنوان لینک به مقدمه آموزش HTML که در همین پوشه است استفاده کنیم(نام صفحه مورد نظر index.html است). به این صورت عمل می کنیم:

<a href="index.html"><img src="learn_html.gif"></a>

لینک به دست آمده مانند سطر زیر است:

Learn HTML with NeoPersia.org

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

اغلب مرورگرها به تصاویری که به عنوان لینک استفاده می شوند یک خط حاشیه (border) در لبه های تصویر اضافه می کنند. برای اینکه این خط دیده نشود شناسه زیر را به تگ عکس خود اضافه کنید:

border="0"

مثال قبل را با اضافه کردن شناسه بالا تکرار می کنیم:

<a href="index.html"><img src="learn_html.gif" border="0"></a>

نتیجه به این صورت در می آید:

Learn HTML with NeoPersia.org

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

<a href="index.html"><img src="learn_html.gif" border="5"></a>

نتیجه را در زیر مشاهده می کنید:

Learn HTML with NeoPersia.org

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


نظرات بازدید کنندگان
Mon, 27 Apr 2009 20:51:57 +0430 نویسنده : hamid yazdandoost
با سلام مجدد
می خواستم ببینم اگر آدرسی رو به عکس متصل کردیم و خواستیم با کلیک روی عکس یک صفحه دیگر باز بشه نه در خود اون صفحه باید چکار کنیم
 
Tue, 31 Mar 2009 14:13:16 +0430 نویسنده : وحید
اقا کارت خیلی درسته ممنون
 
Sun, 28 Dec 2008 19:00:30 +0330 نویسنده : لیلی
ادم در برابر این همه مطالب خوب که یاد می گیرد و از خوشحالی زبانش بند می اید که بگوید سپاس سپاس سپاس سپاس سپاس سپاس سپاس سپاس سپاس سپاس  
 
Sun, 21 Dec 2008 16:14:50 +0330 نویسنده : علیرضا
خیلی از مشکلاتم را حل کرد . متشکرم .
 
Wed, 03 Dec 2008 22:59:06 +0330 نویسنده : سعيده
سلام
لطف كرديد
متشكرم
استفاده كردم.
 
Sat, 26 Jul 2008 16:45:04 +0430 نویسنده : مهدی سجادی
خیلی خیلی خوب است عالیه من که از طرف خودم تشکر می کنم عالیه
 
Thu, 03 Jul 2008 17:08:11 +0430 نویسنده : مجتبی
سایتتون عالیه
خدا خیرتان بدهد.
 
Sun, 11 May 2008 02:15:37 +0430 نویسنده : Ali
با سلام به شما

واقعا از مطالب این سایت استفاده کردم.

موفق و پیروز باشی