Utilizzando sprite con tag IMG?

StackOverflow https://stackoverflow.com/questions/4335957

Domanda

ho capito come utilizzare gli sprite, tuttavia, non è un attributo "src" necessaria per i tag IMG? Potrei sempre utilizzare un frammento o un altro tag e impostare lo sfondo / larghezza / etc, ma non sarà semanticamente corretto.

In sostanza, vorrei omettere la SRC per un tag IMG e utilizzare solo sprite, ma sono preoccupato per il codice HTML non essere tecnicamente valida a causa di esso. Grazie.

È stato utile?

Soluzione

A proposito di semantica correttezza:

Quando un'immagine ha un significato semantico, in modo che è considerato essere contenuti, utilizzare un tag IMG , senza sprite, e una di ALT impostato correttamente.

Quando un'immagine è solo decorazione, , come lo sfondo di una scatola, sfondo di un pulsante, sfondo di una voce di menu, ecc, non ha alcun significato semantico, in modo da poter semplicemente usarlo come sfondo di uno SPAN, DIV, ecc da CSS. È possibile utilizzare gli sprite in questo caso.

Altri suggerimenti

utilizzando sprite non significa necessariamente che devi definirle in sfondi CSS. È inoltre possibile utilizzare IMG tag sprite, per farlo è necessario fondamentalmente tagliare la vostra immagine. Ci sono due buoni articoli che spiegano che la tecnica:

http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp

http://www.artzstudio.com/2010/04/img-sprites- ad alto contrasto /

Entrambi i metodi di CSS e IMG hanno che i loro propri benefici, quindi è necessario capire quale si adatta meglio.

Uso un GIF trasparente 1x1 (cosiddetto distanziatore) per lo src. quindi impostare l'immagine di sfondo per il tag img con la corrispondente posizione bg. in questo modo si sta utilizzando la velocità di sprite e mantenendo la semantica del codice (è comunque possibile utilizzare l'attributo alt)

  

ho potuto sempre usare un frammento o un altro tag e impostare lo sfondo / larghezza / etc, ma non sarà semanticamente corretto

In realtà non c'è nulla di male su come utilizzare i CSS per impostare lo sfondo di un frammento o un div. Sarebbe in realtà essere sintatticamente corretto omettere lo src da un'immagine, come quello è il punto di tutta la tag. Non c'è nulla nelle norme dicendo che dovete mettere il testo all'interno di un arco. Sintatticamente parlando, modificando lo sfondo su un elemento sarebbe il modo più "corretto" per farlo.

Ecco l'arbitro sui tag img oltre al W3C: http : //www.w3.org/TR/html401/struct/objects.html#h-13.2

E un po 'di lettura in più: http: // www.w3.org/TR/html4/struct/global.html#h-7.5.3

  

Questi elementi definiscono contenuto sia in linea (SPAN) o livello di blocco (DIV), ma non impongono altri idiomi di presentazione del contenuto. Così, gli autori possono usare questi elementi in collaborazione con i fogli di stile, l'attributo lang, ecc, per misura HTML per le proprie esigenze e gusti.

È possibile utilizzare sfondi CSS, o HTML Canvas elementi al dinamicamente attingere. Con la tela di si ha la possibilità di immagini facilmente sottoinsieme ed eseguire effetti del metodo di fusione .

a risolvere questo da ripensare le opzioni.

È possibile creare un'area definita con un <a> con display:block; o <div> e l'uso overflow hidden; per nascondere troppopieno e position:relative;.

Poi si posiziona il <img> immagine sprite all'interno posizionato in modo assoluto, che è possibile dal momento che posizionato il genitore.

Quindi utilizzare :hover sull'immagine per cambiare posizione.

Ora il vostro sprite è basata su un tag img, in modo da poter utilizzare il testo alt.

A seguito di esempio si basa su uno sprite Facebook con due versioni di icone su uno sopra l'altro, ogni 50px da 50px, un'altezza totale di immagine essendo 100px: 

<!DOCTYPE html>
<html>
<head>
<style>
.icon {
    display:block;
    position:relative;
    width:50px;
    height:50px;
    border:1px solid red;
    overflow:hidden;
}
#fb {
    position:absolute;
    top:0;
    left:0;
}
#fb:hover {
    position:absolute;
    top:-50px;
    left:0;
}
</style>
</head>

<body>
<a href="https://facebook.com" class="icon" title="Facebook">
<img src="sprite-facebook.png" id="fb" width="50" height="100" alt="Facebook">
</a>
</body>
</html>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top