ورود

View Full Version : سوال: درخواست کمک برای استفاده از تگ map و استفاده از آن در اسکریت نمایش پنجره popup


mokhtasatxyz
سه شنبه 05 مرداد 1395, 12:09 عصر
سلام

کارفرما به من عکسی داده و باید کاری کنم که در صورت کلیک در چند قسمت از تصویر پنجره popup همراه با مطلب و متن مختص خودش مشاهده شود. و سایت نیز تا حد امکان باید ریسپانسیو باشد.
برای پنجره popup از اسکریپت Remodal می خواهم استفاده کنم

مشکلات من:

1 - تاکنون از تگ map و طریقه دادن مختصات مکان به تگ area استفاده تخصصی و تا این حد نکرده ام.

2 - چگونگی ترکیب و معرفی اسکریپت Remodal با تگ map.

3- ریسپانسیو بودن سایت و تگ map.

تصویر ارائه شده توسط کارفرما:
141660
دانیال دزفولی
سه شنبه 05 مرداد 1395, 13:23 عصر
پیشنهاد من برای این کار :
1. برای هر کدوم از دکمه هایی که روشون عدد نوشته شده
بکگراند بسازی (توی photoshop ,...) که اینجا 6 تا باید درست کنی

2. 6 تا تگ a با position absolute میاری اونجایی که میخوای و اون بکگراند هارو به تگ های a نسب میدی

3. popup - http://dinbror.dk/bpopup/

4. توی گوشی دیگه حالت دایره ای رو باید از دست بده و زیر هم لیست بشن
mokhtasatxyz
چهارشنبه 06 مرداد 1395, 11:35 صبح
سلام
از توجه و پاسختان ممنون
یک چیزی ساختم البته بدون ریسپانسیو بودن. لطفا یه نگاه میندازیدhamrah-maskan.ir (http://hamrah-maskan.ir)

چطور تصویر رو ریسپانسیو کنم (با روش های مختلف ریسپانسیو کردم ، ولی کارفرما ذهن و درک گرافیکی متفاوتی داره و از آن ها راضی نبود) و در صورت ریسپانسیو بودن ، آدرس پیکسلی تصویر در تگ map را چطور به دست بیارم و تنظیم کنم

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

در مرورگر کروم موبایل مشکل داره. چطور اینو حل کنم؟
دانیال دزفولی
چهارشنبه 06 مرداد 1395, 12:45 عصر
اگه میخوای روش خودتو پیش بگیری
برای body باید background: url(file) center / cover fixed no-repeat;
و همینطور min-width: 980px

ولی روشی که من گفتم راحت تره- توی ریسپانسیو فقط اون عکسهارو مستطیل میکنی

پ.ن : عکس بکگراند باید یه عکس جدا باشه
saadatieathar
پنج شنبه 07 مرداد 1395, 14:16 عصر
سلام

این یه نمونه رسپانسیو استفاده از تگ map هست

http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html