بسم الله ارحمن الرحیم

مطلب 167


روزنامه دیواری :: ترفندها

ساخت نقشه تصویری image map با استفاده از CSS

+ فیلم آموزشی

تا به حال شده که توی صفحات وب ببینید که سایت در تکه هایی از یک تصویر لینک داده؟!

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

اموزش image map

این آموزش از کتاب مرجع html , css الگو گرفته است . لینک صفحه ی کتاب در انتهای این مطلب موجود است.

در این کدها شما باید خودتون طبق عکس هایی که در نظر دارید تغییراتی رو اعمال کنید . پس اول فایل های ضمیمه شده رو دانلود کنید و از روی توضیحاتی که داده می شه عکس های خودتون رو بسازید و روی سایت خودتون آپلود کنید.

کد html زیر رو باید بین تگ های <body> قرار بدید .

 <div id="wrapper">
    <ul class="sheepImageMap">
      <li class="sheepOne"><a href="1"><span>Sheep one</span></a></li>
      <li class="sheepTwo"><a href="2"><span>Sheep two</span></a></li>
      <li class="sheepThree"><a href="3"><span>Sheep three</span></a></li>
    </ul>
    
  </div>

توضیحات کد html :

خط اول کلاس wrapper رو از css فراخوانی شده و وظیفه ی طراحی صفحه بندی رو داره . (هیچ تغییری نیاز نیست)

خط دوم کلاس sheepImageMap از css فراخوانی شده تا گروه لیست ترتیبی رو از روی کادر ایجاد شده و خاصیت های تعریف شده در css به صفحه ی وب بیاره . اسمش رو اگر خواستید عوض کنید باید با ابزار Replace در ورد یا ورد پد در css عوض کنید انجام این کار با تایپ کمی میزان خطا رو زیاد میکنه.

خط های بعدی کلاس های ترتیبی sheepOne , sheepTwo , sheepThree هم فراخونی شده اند و هر کدوم مخصوص یک تصویر هستند. اگر شما خواستید عکس های بیشتری داشته باشد یکی از این خط ها رو کپی کرده و تغییرات رو انجام بدید .

توجه داشته باشید که متن بین تگ های <span> برای زیرنویس عکس ها هستند .

کد css

.sheepImageMap {
        font: 1.0em/1 Arial, Helvetica, sans-serif;
        text-transform: uppercase;
        background: url(fake-image-map-gray.jpg);
        width: 500px;
        height: 375px;
        position: relative;
        margin-bottom: 10px;
        }

.sheepImageMap a {
        display: block;
        text-indent: -100000px;
        text-decoration: none;
        }

.sheepImageMap:hover .sheepOne, .sheepImageMap:hover .sheepTwo, .sheepImageMap:hover .sheepThree {
        border: 1px solid #000000;
        }

.sheepImageMap li {
        list-style: none;
        position: absolute;
        display: block;
        }

.sheepOne {
        width: 80px;
        height: 104px;
        left: 60px;
        top: 50px;
        }

.sheepOne a {
        height: 104px;
        }

.sheepOne a:hover {
        background: url(fake-image-map-color.jpg) -61px -51px;
        }

.sheepTwo {
        width: 200px;
        height: 126px;
        left: 141px;
        top: 108px;
        }

.sheepTwo a {
        height: 126px;
        }

.sheepTwo a:hover {
        background: url(fake-image-map-color.jpg) -142px -109px;
        }

.sheepThree {
        width: 68px;
        height: 38px;
        left: 418px;
        top: 19px;
        }

.sheepThree a {
        height: 38px;
        }

.sheepThree a:hover {
        background: url(fake-image-map-color.jpg) -419px -20px;
        }

.sheepImageMap a:hover {
        text-indent: 0;
        color: #ffffff;
        }

.sheepImageMap a:hover span {
        padding: 2px;
        background-color: #000000;
        position: absolute;
        bottom: 0;
        right: 0;
        }

توضیحات کد css

کلاس sheepImageMap در ابتدای کد ، خاصیت background داره که عکس سیاه و سفید رو اونجا قرار می دیم .(اگر دوست ندارید عکس در حالت اولیه سیاه و سفید باشه رنگیش رو بگذارید )

کد زیر وظیفه ی ایجاد کادر دور عکس ها رو داره

.sheepImageMap:hover .sheepOne, .sheepImageMap:hover .sheepTwo, .sheepImageMap:hover .sheepThree {
        border: 1px solid #000000;
}
        

اگر کلاس عکس ها در عنوان کد بالا قید نشه عکس مربوط به اون کلاس بدون کادر خواهد بود.

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

.sheepOne {
        width: 80px;
        height: 104px;
        left: 60px;
        top: 50px;
        }

در کد بالا مقدار width پهنای مستطیل دور گوسفند اولی رو نشون می ده .

مقدار height : بلندای مستطیل دور گوسفند اولی رو نشون می ده .

مقدار left :  فاصله ی مستطیل رو از محور y سمت چپ عکس نشون می ده .

مقدار top:  فاصله ی مستطیل رو از محور x سمت بالای عکس نشون می ده .

.sheepOne a {
        height: 104px;
        }

این کد مقدار ارتفاع محدوده فعال بودن لینک تصویر رو نشون می ده . ( باید با بلندای عکس که بالاتر گفتیم برابر باشه)

.sheepOne a:hover {
        background: url(fake-image-map-color.jpg) -61px -51px;
        }


این کد نشون می ده وقتی که موس روی گوسفند رفت .  عکس رنگی اون رو نشون بده . بعد از آدرس عکس مقدار های منفی برای مقعیت عکس دوم هستند و اولی مقدار منفی شده ی left و دومی مقدار منفی شده ی top هستند .
 ( دقت کنید که کادر دور گوسفند از سمت بالا و چپ یک پیکسل رو اشغال کرده و شما باید اون رو در این عدد های منفی لحاظ کنید.)


دموی این ترفند در نقشه ی تصویری سایت موجود هست .

دریافت فایل های ضمیمه شده به صورت rar

download

.

.


فیلم آموزشی این مطلب ( این فیلم به ساده ترین وجه ممکن شرح داده شده ، اگر پیش زمینه ی css دارید تحمل کنید)

لینک این فیلم در تخته سفید : http://takhtesefid.org/watch?v=703059106726

دریافت این کلیپ با کیفیت HD که 31دقیقه است و حجم 80 مگابات دارد .

download

.

.


منبع آموزشی : کتاب مرجع کاربردی css & html نویسنده Gaig Grannell ترجمه ی فاطمه فاتحی چاپ 1390