ساخت لینک بر روی یک تصویر ریسپانسیو [بایگانی]

mokhtasatxyz

شنبه 29 خرداد 1395, 12:21 عصر

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

html, body{height:100%;}

body {
background: url(images/a.jpg) center center fixed;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
}

.displayed {
position: absolute;
margin:auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 70px;
height: 70px;
border-radius: 3px;
border:#F00 thin solid;
}

<body>
<div class="displayed"></div>
</body>

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

مکان موجود در تصویر درست در وسط عکس قرار دارد

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

همچنین ابتدا قصدم این بود که تصویر را صورت تگ img وارد نمایم و با خواصیت map آن این کار را انجام نمایم ولی ریسپانسیو بودن آن و دادن مختصات مکان لینک در تصویر برایم مشکل بود.

تصویر من:
140910

لطفا من را در حل این مشکل یاری نمایید

سعید کشاورز

شنبه 29 خرداد 1395, 19:39 عصر

زمانی که تصویر رو به صورت background : cover میدی کار خیلی سخت میشه
دلیلش اینه بر اساس مانیتور های مختلف این سایز به شدت تغییر میکنه
شما به نظرم با دستورات media screen این کار رو انجام بده و توی حالت های مختلف بهش Possition بده
یه نکته دیگه هم بگم:
بعضیا هستن استاندارد براشون مهم نیست ..فقط دوست دارن حرفشون رو زده باشن.اینجا زیاد خودت رو اذیت نکن..بهشون بگو من این کار رو انجام میدم اما دیگه ریسپانسیو نمیشه فقط توی لپ تاپ و مانیتور های بزرگ سایت درست نمایش داده میشه..
خودت رو خلاص کن
بعضی چیزا واقعا ارزش وقت گذاشتن نداره و اینم یک نمونه از اونا بود..