Responsive CSS Image Anchor-Tags - Image Maps style

Ich habe an einer Responsive-Site gearbeitet und bin mit Image Maps zu einem Problem geworden. Es scheint, dass Imagemaps nicht mit prozentbasierenden Koordinaten arbeiten. Nach ein bisschen Googeln fand ich eine JS Workaround - . Allerdings möchte ich die Website mit JS deaktiviert arbeiten.Responsive CSS Image Anchor-Tags - Image Maps style

Also nach der Erschöpfung dieser Möglichkeiten entschied ich mich zu prüfen, mit relativ positionierten Anchor-Tags über die Bilder, um das gleiche zu tun. Dies ist sowieso eine bessere Option IMO. Ich habe versucht, die Anker-Tags über dem Bild mit prozentualer Position und Größe zu platzieren, aber wenn ich den Browser neu skaliere, bewegen sich die Anker-Tags überproportional zum Bild.

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; 
}

Hier ist ein jsFiddle zu beschreiben, was ich meine - http://jsfiddle.net/wAf3b/10/. Wenn ich die HTML-Box skaliere, wird alles verzerrt.

Jede Hilfe sehr geschätzt.

Quelle

2012-11-21 kabatwa

versuchen Sie mit Rand-links und Rand oben statt oben und links. –

Sie hatten ein paar Probleme mit Ihrem CSS in der Geige, die Sie gepostet haben (sowie einem fehlenden abschließenden div Tag). Nachdem sichergestellt wurde, dass #block relativ positioniert war, nicht 100% Höhe, und dass Ihre Anker block/absolut positioniert waren, war ich in der Lage, die Tags mit den Blöcken zu bewegen. Hier

ist die aktualisierte Geige:

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>

Ein wichtiger thi ng mit dem neuen HTML zu notieren ist die Verwendung von DOCTYPE. Aus irgendeinem Grund mögen einige Browser es nicht, wenn es nicht großgeschrieben wird.

Quelle

2012-11-21 19:29:25 Kyle

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

@Jawad Danke für den Link. Ich hatte persönlich gedacht, dass die DOCTYPE-Deklaration ebenfalls nicht zwischen Groß- und Kleinschreibung unterschieden würde, hatte aber vor etwa einem Jahr ein Problem, das durch Kapitalisierung behoben wurde. – Kyle

Wie ändern sich die Zeiten? Es war nur ein paar Jahre zurück, JEDER wich HTML aus und bevorzugte XHTML. Jetzt sind alle wieder im Wagen der HTML5-Syntax. – Jawad

Absolut positionierte Elemente sind nicht länger Teil des Layouts, daher können sie keine relativen Dimensionseigenschaften von ihren übergeordneten Elementen erben. Sie benötigen JavaScript, um zu tun, was Sie wollen.

Leute, die JS deaktivieren, erwarten bereits eine verschlechterte Erfahrung.

Quelle

2012-11-21 19:05:42

Responsive CSS Image Anchor-Tags - Image Maps style

Antwort

Verwandte Themen