رفتن به مطلب

پست های پیشنهاد شده

اول از همه یه تشکر ویژه دارم از خانوم sun-shine بابت این تاپیک آموزش خوب و عالیشون.

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

 

پست #4 یه غلظ تایپی در بخش ایجاد خط (تگ HR>) درقسمت کد نویسی وجود داره که به جای تایپ حرف h حرف b تایپ شده .حیفم اومد نگم چون این مطلب بی نقص هستش اینم اصلاح بشه عالیه.

 

حال سوال خودم.

در پست 7 map رو توضیح دادید متوجه شدم سایز تصویر شما با سایزی که در سایت لود شده یکی نیست.

حالا این مشکلی برای پیدا کردن موقعیت و جانمایی هابوجود نمیاره؟

 

سلام آقا ناصر

خیلی خیلی ممنونم بابت این دقتتون :icon_gol::icon_gol::icon_gol:

بله حق با شماست، HR رو اشتباها BR نوشتم ولی متاسفانه نمی دونم چرا امکان ویرایش متن ندارم :ws52:

واسه عکسم راست میگین، عکس رو که کوچک کردم، دقت نکردم که مختصات نقاطو قبلا دادم :icon_pf (34): ولی خب طریقه بدست آوردن مختصاتشو کامل قبلش گفتم :ws3:

 

سلام مجدد:ws3:

میخوام یه سایتی رو معرفی کنم که کدهای اچ تی ام ال رو توش وارد میکنی و تو یه کادر دیگه نتیجه کارت رو بهت نشون میده

واسه کسایی که میخوان شروع کنن عالی هستش

سریع تغییرات رو میبینن

محتوای مخفی

    برای مشاهده محتوای مخفی می بایست در انجمن ثبت نام کنید.

 

چه سایت جالبیه، مرسی که معرفی کردین :icon_gol::icon_gol:

 

بازم ممنونم :icon_gol:

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

تصاویر و پیوند:

می توان یک تصویر را نیز بعنوان پیوند در نظر گرفت. تنها کافیست که بصورت زیر، تگ img را داخل تگ باز و بسته a قرار داد.

    <a href="...">
       <img src="..." />
   </a>

مثال:

    <a rel="nofollow" href="http://www.google.com">
       <img src="image/google.jpg" alt="load a picture" height="150" width="150" border="1"  />
   </a>

نقشه های تصویری (تگ map):

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

 

به این منظور بصورت زیر عمل می کنیم:

1. برای تگ map، یک خاصیت با نام name نوشته و یک نام به آن اختصاص می دهیم.

 

2. برای عکس، خاصیتی بنام usemap تعریف می کنیم که مقدار آن باید برابر با خاصیت name مربوط به تگ map باشد. قبل از اسم، علامت # گذاشته می شود.

 

3. در تگ map، یک تگ بدون فرزند area می نویسیم. این تگ دو خاصیت مهم دارد که عبارتند از:

الف- shape: که نوع شکل نقشه است و سه مقدار می گیرد: circle(دایره)، Rect(مستطیل) و Poly(چندضلعی) می گیرد.

 

ب-coords: مهمترین قسمت نقشه تصویری، دادن مختصات است که برای هر کدام از سه نوع، بصورت زیر است:

 

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

  • دایره: سه مقدار می گیرد که مختصات x و y نقطه مرکزی و شعاع دایره است.

cbo7lm38n0fyvug7mde.jpg

<area shape="circle" href="..." coords="X,Y,شعاع دایره" alt="..." title="..." />

  • مستطیل: در مستطیل خاصیت coords چهار مقدار می گیرد که بصورت زیر است.

eyadp7ba7ol5tzwnfrh0.jpg

<area shape="rectangle" href="..." coords="X1,Y1,X2,Y2" alt="..." title="..." />

  • چند ضلعی: در چند ضلعی، برای نوشتن مختصات، طول و عرض نقاط را در کنار هم می نویسیم. نکته مهم در چند ضلعی اینست که باید نقطه اول و آخر یکی باشد یعنی مختصات نقطه اول، باید در آخر نیز آورده شود تا بصورت محیط بسته شود. می توان مختصات نقاط منحنی را نیز به این صورت بدست آورد.

6wozt1oqxhvs16ghov0o.jpg

<area shape="poly" href="..." coords="X1,Y1,X2,Y2,......,X1,Y1" alt="..." title="..." />

مثال:

در مثال زیر، هر سه نوع shape را استفاده کردیم. این مناطق در شکل با رنگی متمایز، نشان داده شده است.

<html>
   <head>
       <title>
           map
       </title>
   </head>
   <body>
       <img src="image/images.jpg" usemap="#mymap" />
           <map name="mymap">
               <area shape="poly" href="#" coords="0,207,33,235,59,285,69,332,55,435,0,475,0,207" alt="منظومه شمسی" title="خورشید" />
               <area shape="circle" href="#" coords="420,237,54" alt="پلتن" title="پلتن" />
               <area shape="rectangle" href="#" coords="34,0,280,61" alt="پلتن" title="پلتن" />
           </map>
   </body>
</html>

خروجی مثال:

زمانی که ماوس بروی مناطق مشخص قرار داده شود، شکل کرسل ماوس به شکل دست تغییر می کند و با کلیک بروی این مناطق، به لینک های مشخص منتقل می شود.

 

prx8r1w86bfs76o1fxe.jpg

تمرینات این قسمت:

 

اولی رو من با فایل های ذخیره شده انجام دادم و در واقع فایلها در جایی ذهخیره شده و آدرس فایلهای ذخیره شده رو بهشون دادم

روی لینک زیر کلیک کنید تاببینید

محتوای مخفی

    برای مشاهده محتوای مخفی می بایست در انجمن ثبت نام کنید.

 

در دومی من بااکلیک روی سه قسمت مشخص شده به مسیرهایی از ویکی پدیا هدایت میشید

محتوای مخفی

    برای مشاهده محتوای مخفی می بایست در انجمن ثبت نام کنید.

لینک ارسال
  • 1 year later...
<!-- saved from url=(0050)http://justmechanic.persiangig.com/manzomeshamsi1/ -->
<html><head class="__web-inspector-hide-shortcut__"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <title>
           map
       </title>
   <style id="__web-inspector-hide-shortcut-style__" type="text/css">
.__web-inspector-hide-shortcut__, .__web-inspector-hide-shortcut__ *, .__web-inspector-hidebefore-shortcut__::before, .__web-inspector-hideafter-shortcut__::after
{
   visibility: hidden !important;
}
</style></head>
   <body>
       <img src="http://justmechanic.persiangig.com/manzomeshamsi1/images.jpg" usemap="#mymap">
           <map name="mymap">
               <area shape="poly" href="http://fa.wikipedia.org/wiki/%D8%AE%D9%88%D8%B1%D8%B4%DB%8C%D8%AF" coords="0,101,16,116,29,143,34,166,33,193,26,216,0,242" alt="منظومه شمسی" title="خورشید">
               <area shape="circle" href="http://fa.wikipedia.org/wiki/%D9%BE%D9%84%D9%88%D8%AA%D9%88" coords="209,119,28" alt="منظومه شمسی" title="پلوتون">
               <area shape="rectangle" href="http://fa.wikipedia.org/wiki/%D9%85%D9%86%D8%B8%D9%88%D9%85%D9%87_%D8%B4%D9%85%D8%B3%DB%8C" coords="19,0,141,30" alt="منظومه  شمسی" title="منظومه شمسی">
           </map>
   
</body></html>

لینک ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...