Responsive CSS Image Anchor tags - Image Maps style

Pracuję nad responsywną stroną i mam problem z mapami obrazów. Wygląda na to, że Mapy obrazów nie działają z współrzędnymi opartymi na wartościach procentowych. Po nieco googlowaniu znalazłem obejście JS - http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html. Jednak chcę, aby strona działała z wyłączonym JS.Responsive CSS Image Anchor tags - Image Maps style

Po wyczerpaniu tych możliwości postanowiłem sprawdzić, czy za pomocą obrazów umieszczam względnie umieszczone znaczniki zakotwiczenia, aby zrobić to samo. To i tak jest lepsza opcja IMO. Próbowałem umieścić znaczniki kotwicy nad obrazem w oparciu o pozycję i rozmiar w procentach, ale za każdym razem, gdy przeskalowuję przeglądarkę, znaczniki kotwicy poruszają się nieproporcjonalnie do obrazu.

HTML:

<div id="block"> 
    <div> 
    <img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png"> 
    </div> 
    <a href="#" class="one"></a> 
    <a href="#" class="two"></a> 
</div>

CSS:

#block img { 
    max-width: 100%; 
    display: inline-block; 
} 

a.one{ 
    height:28%; 
    width:19%; 
    top:-36%; 
    left:1%; 
    position:relative; 
    display:block; 
} 
a.two{ 
    height:28%; 
    width:19%; 
    top:37%; 
    left:36%; 
    position:absolute; 
}

Oto jsFiddle opisać, co mam na myśli - http://jsfiddle.net/wAf3b/10/. Kiedy zmieniam rozmiar okna HTML wszystko staje się przekrzywione.

Każda pomoc bardzo ceniona.

Źródło

2012-11-21 kabatwa

spróbuj z marginesem-lewym i margines-górnym zamiast u góry i po lewej. –

Masz kilka problemów ze swoim CSS w opublikowanym filmie (a także brakujący znacznik zamykający div). Po upewnieniu się, że #block był względnie ustawiony, a nie 100% wysokości, i że twoje kotwice były zablokowane/absolutnie ustawione, udało mi się uzyskać znaczniki do poruszania się z blokami.

Oto aktualizowane skrzypce:

http://jsfiddle.net/wAf3b/24/

CSS

html, body { 
    height: 100%; 
} 

#block{ float:left; width:100%; max-width: 400px; position: relative; } 

#content{ 
    height: 100%; 
    min-height: 100%; 
} 

#block img { 
    max-width: 100%; 
    display: inline-block; 
} 

a.one{ height:28%; width:25%; position: absolute; top:55%; left:5%; display:block; background:rgba(0,255,0,0.5);} 
a.two{ height:28%; width:25%; position: absolute; top:60%; left:70%; display: block; background:rgba(255,0,0,0.5);}

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> 
    <title>Bulky Waste</title> 
</head> 
<body> 
    <div id="content"> 
     <div id="block"> 
      <div> 
       <img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png"> 
      </div> 
      <a href="#" class="one"></a> 
      <a href="#" class="two"></a> 
     </div> 
    </div><!--/content--> 
</body> 
</html>

Jedna ważna jes Zauważ, że z nowym html jest użycie DOCTYPE. Z jakiegoś powodu niektóre przeglądarki nie lubią, gdy nie są pisane wielkimi literami.

Źródło

2012-11-21 19:29:25 Kyle

http://stackoverflow.com/questions/7020961/uppercase-or-lowercase-doctype – Jawad

@Jawad Dziękujemy za link. Osobiście uważałem, że deklaracja DOCTYPE również nie jest wrażliwa na wielkość liter, ale miał problem około roku temu, który został rozwiązany przez kapitalizację. – Kyle

Jak zmieniają się czasy? Dopiero kilka lat temu KAŻDY był shunning html i wolał XHTML. Teraz wszyscy wracają do wagonu składni HTML5. – Jawad

Elementy z absolutną pozycją nie są już częścią układu, więc nie mogą dziedziczyć względnych właściwości wymiarowych od ich elementów nadrzędnych. Będziesz potrzebował JavaScript, aby zrobić to, co chcesz.

Osoby, które wyłączają JS, oczekują już pogorszonego doświadczenia.

Źródło

2012-11-21 19:05:42

Responsive CSS Image Anchor tags - Image Maps style

Odpowiedz

Powiązane problemy