Tag di ancoraggio dell'immagine CSS reattivi - Stile mappe immagine

Ho lavorato a un sito reattivo e ho riscontrato un po 'di problemi con le mappe immagine. Sembra che le mappe immagine non funzionino con le coordinate basate sulla percentuale. Dopo un po 'di ricerca su google ho trovato una soluzione JS - http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html. Tuttavia voglio che il sito funzioni con JS disabilitato.Tag di ancoraggio dell'immagine CSS reattivi - Stile mappe immagine

Quindi, dopo aver esaurito tali possibilità, ho deciso di esaminare l'uso di tag di ancoraggio relativamente posizionati sulle immagini per fare la stessa cosa. Questa è un'opzione migliore comunque IMO. Ho provato a posizionare i tag di ancoraggio sull'immagine con la posizione e le dimensioni in base alla percentuale, ma ogni volta che ridimensiono il browser i tag di ancoraggio si muovono in modo sproporzionato sull'immagine.

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

Ecco un jsFiddle per descrivere quello che voglio dire - http://jsfiddle.net/wAf3b/10/. Quando ridimensiono la finestra HTML, tutto diventa distorto.

Qualsiasi aiuto molto apprezzato.

fonte

2012-11-21 kabatwa

provare con margin-left e margin-top anziché top e left. –

Hai avuto qualche problema con il tuo CSS nel violino che hai postato (oltre a un tag di chiusura mancante div). Dopo essersi assicurato che #block fosse posizionato relativamente, non al 100% in altezza e che i punti di ancoraggio fossero bloccati/posizionati in modo assoluto, sono stato in grado di spostare i tag con i blocchi.

Ecco il violino aggiornamento:

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>

One Thi importanti ng da notare con il nuovo html è l'uso di DOCTYPE. Per qualche motivo, ad alcuni browser non piace quando non è in maiuscolo.

fonte

2012-11-21 19:29:25 Kyle

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

@Jawad Grazie per il collegamento. Personalmente avevo pensato che la dichiarazione DOCTYPE fosse insensibile alle maiuscole e alle minuscole, ma aveva un problema circa un anno fa, risolto con la capitalizzazione. – Kyle

Come cambiano i tempi? Solo pochi anni fa EVERYBODY evitava l'html e preferiva l'XHTML. Ora tutti sono di nuovo sul carro della sintassi HTML5. – Jawad

Gli elementi posizionati in modo assoluto non fanno più parte del layout, quindi non possono ereditare proprietà dimensionali relative dal genitore. Avrai bisogno di JavaScript per fare ciò che vuoi.

Le persone che disattivano JS si aspettano già un'esperienza degradata.

fonte

2012-11-21 19:05:42

Tag di ancoraggio dell'immagine CSS reattivi - Stile mappe immagine

risposta

Problemi correlati