Saber Mogaddas
شنبه 06 آبان 1391, 20:30 عصر
سلام
با کمی دقت به سورس این html پی می بریم که طراح برای هر شهرستان از یک li استفاده کرده و کل نقشه عبارت است از یک لیست مرتب شده توسط دستور
position: absolute;
کد های html لیست نیز به این صورت هست :
<ul> <li id="city1"><a href="/about-us/subsidiaries/96"><span class="hideme">آذربایجان غربی</span></a> <p class="hideme">آذربایجان غربی<strong class="tel">۰۴۴۱-۳۳۷۹۹۳۸</strong></p> </li> <li id="city2"><a href="/about-us/subsidiaries/74"><span class="hideme">آذربایجان شرقی</span></a> <p class="hideme">آذربایجان شرقی<strong class="tel">۰۴۱۱-۳۳۷۶۷۴۷</strong></p> </li> <li id="city3"><a href="/about-us/subsidiaries/92"><span class="hideme">اردبیل</span></a> <p class="hideme">اردبیل<strong class="tel">۰۴۵۱-۷۷۴۷۵۴۰</strong></p> </li> <li id="city4"><a href="/about-us/subsidiaries/85"><span class="hideme">گیلان</span></a> <p class="hideme">گیلان<strong class="tel">۰۱۳۱-۲۲۴۶۴۲۳</strong></p> </li> <li id="city5"><a href="/about-us/subsidiaries/81"><span class="hideme">مازندران</span></a> <p class="hideme">مازندران<strong class="tel">۰۱۵۱-۲۲۶۱۷۸۳</strong></p> </li> <li id="city6"><a href="/about-us/subsidiaries/89"><span class="hideme">زنجان</span></a> <p class="hideme">زنجان<strong class="tel">۰۲۴۱-۴۲۵۴۱۲۴</strong></p> </li> <li id="city8"><a href="/about-us/subsidiaries/83"><span class="hideme">قزوین</span></a> <p class="hideme">قزوین<strong class="tel">۰۲۸۱-۳۳۵۳۰۱۵</strong></p> </li> <li id="city9"><a href="/about-us/subsidiaries/82"><span class="hideme">البرز</span></a> <p class="hideme">البرز<strong class="tel">۰۲۶۱-۴۴۸۴۰۳۱</strong></p> </li> <li id="city10"><a href="/about-us/subsidiaries/36"><span class="hideme">تهران</span></a> <p class="hideme">پناه شمال تهران <strong class="tel">۸۴۲۰۵۰۰۱</strong>پناه شرق تهران<strong class="tel">۸۴۲۰۵۱۰۱</strong>پناه غرب تهران<strong class="tel">۸۴۲۰۵۲۰۱</strong>پناه عمران <strong class="tel">۸۴۲۰۵۷۰۰</strong></p> </li> <li id="city11"><a href="/about-us/subsidiaries/94"><span class="hideme">گلستان</span></a> <p class="hideme">گلستان<strong class="tel">۰۱۷۱-۲۲۳۰۳۱۲</strong></p> </li> <li id="city12"><a href="/about-us/subsidiaries/91"><span class="hideme">خراسان رضوی</span></a> <p class="hideme">خراسان رضوی<br>(شامل خراسان شمالی)<strong class="tel">۰۵۱۱-۶۰۱۸۰۶۰</strong></p> </li> <li id="city13"><a href="/about-us/subsidiaries/75"><span class="hideme">اصفهان</span></a> <p class="hideme">اصفهان<br>(شامل چهارمحال و بختیاری)<strong class="tel">۰۳۱۱-۲-۶۲۶۹۱۲۱</strong></p> </li> <li id="city14"><a href="/about-us/subsidiaries/88"><span class="hideme">کرمان</span></a> <p class="hideme">کرمان<strong class="tel">۰۳۴۱-۲۱۲۱۳۲۵</strong></p> </li> <li id="city15"><a href="/about-us/subsidiaries/84"><span class="hideme">کرمانشاه</span></a> <p class="hideme">کرمانشاه<br>(شامل ایلام و کردستان)<strong class="tel">۰۸۳۱-۷۲۱۰۱۴۱</strong></p> </li> <li id="city16"><a href="/about-us/subsidiaries/87"><span class="hideme">همدان</span></a> <p class="hideme">همدان<br>(شامل لرستان)<strong class="tel">۰۸۱۱-۸۲۲۲۲۹۹</strong></p> </li> <li id="city17"><a href="/about-us/subsidiaries/80"><span class="hideme">مرکزی</span></a> <p class="hideme">مرکزی<br>(شامل قم)<strong class="tel">۰۸۶۱-۲۲۱۳۲۰۱</strong></p> </li> <li id="city20"><a href="/about-us/subsidiaries/76"><span class="hideme">خوزستان</span></a> <p class="hideme">خوزستان<strong class="tel">۰۶۱۱-۳۳۶۱۸۰۰</strong></p> </li> <li id="city21"><a href="/about-us/subsidiaries/86"><span class="hideme">فارس</span></a> <p class="hideme">فارس<br>(شامل کهکیلویه و بویراحمد)<strong class="tel">۰۷۱۱-۲۳۲۱۱۴۱</strong></p> </li> <li id="city22"><a href="/about-us/subsidiaries/93"><span class="hideme">خراسان جنوبی</span></a> <p class="hideme">خراسان جنوبی<strong class="tel">۰۵۶۱-۲۲۲۹۰۶۱</strong></p> </li> <li id="city23"><a href="/about-us/subsidiaries/78"><span class="hideme">یزد</span></a> <p class="hideme">یزد<strong class="tel">۰۳۵۱-۵۲۴۵۰۹۰</strong></p> </li> <li id="city24"><a href="/about-us/subsidiaries/95"><span class="hideme">بوشهر</span></a> <p class="hideme">بوشهر<strong class="tel">۰۷۷۱-۳۵۳۷۵۹۶</strong></p> </li> <li id="city25"><a href="/about-us/subsidiaries/90"><span class="hideme">هرمزگان</span></a> <p class="hideme">هرمزگان<br>(شامل کیش و قشم)<strong class="tel">۰۷۶۱-۶۶۷۹۹۲۰۶</strong></p> </li> </ul>با کمی توجه بیشتر به استایل های هر li درمیابیم که به تمامی li ها دستورposition: absolute داده شده و برای هر یک li برای اینکه در نقطه خود قرار بگیرند از خصوصیات left,right,bottom,top این دستور استفاده شده..
#city1 {
height: 121px;
left: 0;
top: 0;
width: 73px;
}
خوب اینم یک روشی هست کاملا سلیقه ای ولی دستوری به اسم map (http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap) در تگ های html هست ..طراح در این روش برای افکت ها از دستورات jquery استفاده کرده..که با hover شدن بر روی هر شهرستان اجزای انتخابی در آن قسمت ظاهر خواهند شد..همین کار توسط دستور map هم عملی هست و حتی می تونید توسط تگ div به صورت تو در تو در این کار استفاده کنید..
بهتر که ابتدا از جایگزاری هر شهرستان در قسمت مناسب شروع کنید و برای افکت دادن در این تالار و یا تالار jquery سوال کنید..
موفق باشید/