Migliore tecnica di sostituzione delle immagini

Qual è la tecnica migliore (come nel cross-browser) per eseguire la sostituzione delle immagini nei CSS? Sto usando sprites per fare la mia navigazione, ma voglio che il markup rimanga compatibile con SEO. Data la seguente struttura HTML ...Migliore tecnica di sostituzione delle immagini

<div id="menu"> 
    <ul> 
    <li><a href="#">Test</a></li> 
    <li><a href="#">Tester</a></li> 
    <li><a href="#">Testing Testing</a></li> 
    </ul> 
</div>

Qual è il modo migliore per sostituire il testo con un'immagine di sfondo utilizzando solo il CSS?

Attualmente sto usando questo ...

text-indent: -9999px;

Ma, non riesce con i CSS, e immagini off.

fonte

2009-08-04 Josh Stodola

Che cosa è SEO poco amichevole nell'usare gli sprite? Stai posizionando gli attributi 'title' nel tag anchor? – beggs

Niente è. Ho un problema con la sostituzione dell'immagine. –

Se questo è il codice html:

<div id="menu"> 
    <ul> 
    <li><a href="#" id="home">Home</a></li> 
    <li><a href="#" id="about">About</a></li> 
    <li><a href="#" id="contact">Contact</a></li> 
    </ul> 
</div>

E questo è il css:

#menu ul li a{ 
    display: block; 
    overflow: hidden; 
    text-indent: -9999px; 
    background: transparent url(yourpicture.png) no-repeat 0 0; 
    width: 100px; 
} 
#home{ 
    background-position: 0px 0px 
} 
#about{ 
    background-position: -100px 0px 
} 
#contact{ 
    background-position: -200px 0px 
}

L'immagine sarebbe allora 300px di larghezza, e ogni scheda sarebbe 100px di larghezza.

fonte

2009-08-04 03:56:46 Marius

non dimenticare "posizione sfondo: ..." per lo sprite offset. – beggs

La posizione dello sfondo verrà impostata in un'altra regola, una per ciascun collegamento. – Marius

L'immagine di sfondo viene applicata al collegamento <a>, dando all'intera area cliccabile un'immagine. Per nascondere il testo è possibile utilizzare un valore negativo molto grande per text-indent.

fonte

2009-08-04 03:57:08

#menu ul li a { 
    display: block; 
    background-image: url(images/someimage.png); 
    text-indent: -9000px; 
    width: 454px; 
    height: 64px; 
}

Il display: il blocco è importante oppure la larghezza e l'altezza potrebbero non sembrare corrette.

fonte

2009-08-04 03:58:23 Neil

Non riesco a pensare ad alcun modo per evitare il problema se si disattivano le immagini ma si lascia il css acceso. Potrebbe essere un po 'troppo cauto e probabilmente dovresti solo supporre che le immagini e il css saranno disponibili. Come un vantaggio però, se si visualizza questo su un dumbphone (ad esempio un RAZR), l'immagine non verrà visualizzata, ma il testo sarà (e non verrà rimosso dallo schermo). – Neil

-1

CSS:

#menu ul li a{ 
    display: block; 
    background-image: url(http://example.com/sprite.png); 
    width: 100px; 
    height: 50px; 
} 

#a { 
    background-position: <offset for sprite>; 
} 

#b { 
    background-position: <offset for sprite>; 
} 

#c { 
    background-position: <offset for sprite>; 
}

HTML:

<div id="menu"> 
    <ul> 
     <li id="a"><a href="#" title="Test">Test</a></li> 
     <li id="b"><a href="#" title="Tester">Tester</a></li> 
     <li id="c"><a href="#" title="Testing Testing">Testing Testing</a></li> 
    </ul> 
</div>

Edit: aggiunto il testo del link nel ... perche' era mancato. :-)

fonte

2009-08-04 04:06:15 beggs

Ummm, e il testo? Sai qualcosa di SEO ?! –

Verifica: http://www.mezzoblue.com/tests/revised-image-replacement/ e: http://css-tricks.com/css-image-replacement/ – beggs

Questo è il codice che uso per sostituire il testo del logo con un'immagine mantenendo il testo nel codice ma non mostrato all'utente (questo è approvato da Google). Visualizza l'esempio completato qui:

http://discretiondesigns.com/overflow/imagereplacement/

Ecco il codice completo (le immagini possono essere trovate al link qui sopra - le immagini possono essere varie dimensioni - l'intera immagine è cliccabile e modifiche su hover):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Image Replacement</title> 
<style type="text/css"> 
<!-- 
#menu li { list-style: none; } 

#menu #a { font: .9em Verdana, Arial, Helvetica, sans-serif; color: #E9E7E0; height: 20px; width: 100px; padding-top: 8px; padding-left: 8px; float: left; } 
#menu #a a { background: url(http://discretiondesigns.com/overflow/imagereplacement/a_off.gif) no-repeat left top; height: 20px; width: 100px; display: block; } 
#menu #a a:hover { background: url(http://discretiondesigns.com/overflow/imagereplacement/a_on.gif); } 
#menu #a span { display: none; } 

#menu #b { font: .9em Verdana, Arial, Helvetica, sans-serif; color: #E9E7E0; height: 20px; width: 100px; padding-top: 8px; padding-left: 8px; float: left; } 
#menu #b a { background: url(http://discretiondesigns.com/overflow/imagereplacement/b_off.gif) no-repeat left top; height: 20px; width: 100px; display: block; } 
#menu #b a:hover { background: url(http://discretiondesigns.com/overflow/imagereplacement/b_on.gif); } 
#menu #b span { display: none; } 

#menu #c { font: .9em Verdana, Arial, Helvetica, sans-serif; color: #E9E7E0; height: 20px; width: 100px; padding-top: 8px; padding-left: 8px; float: left; } 
#menu #c a { background: url(http://discretiondesigns.com/overflow/imagereplacement/c_off.gif) no-repeat left top; height: 20px; width: 100px; display: block; } 
#menu #c a:hover { background: url(http://discretiondesigns.com/overflow/imagereplacement/c_on.gif); } 
#menu #c span { display: none; } 
--> 
</style> 
</head> 

<body> 
<div id="menu"> 
    <ul> 
    <li id="a"><a href="#" title="This is A!"><span>Nav A</span></a></li> 
    <li id="b"><a href="#" title="This is B!"><span>Nav B</span></a></li> 
    <li id="c"><a href="#" title="This is C!"><span>Nav C</span></a></li> 
    </ul> 
</div> 
</body> 
</html>

fonte

2009-08-05 17:02:15 Elle

Questo fallisce ancora con i CSS e le immagini disattivate , corretta? –

Nel 2008, la presentazione di Google ad An Event Apart ha chiarito che la sostituzione dell'immagine valida per il modello non sarà penalizzata da Google. See Mezzoblue's post about it

In sostanza, fino a quando l'immagine che si sostituire il testo con il testo ha stessa in esso, sarà considerata valida e non cercando di ingannare i motori di ricerca. Come determinano se l'immagine è valida o no? Non ne ho idea ... OCR? Revisione manuale?

Per quanto riguarda le immagini CSS disattivate, non esiste una soluzione perfetta, tutte richiedono un extra markup non semantico. Vedi il link css-tricks che si basa sulle diverse tecniche.Personalmente non mi preoccupo della piccola percentuale di utenti che navigano con i CSS ma senza immagini.

La tua scelta è semplice. Markup extra, o non preoccuparti di css on/immagini off.

fonte

2009-08-06 03:06:04 kmiyashiro

Ho appena si avvicinò con questo, sembra funzionare in tutti i browser moderni, ho appena provato quel momento in poi (IE8/compatibilità, Chrome, Safari, Moz)

HTML

<img id="my_image" alt="my text" src="images/small_transparent.gif" />

CSS

#my_image{ 
    background-image:url('images/my_image.png'); 
    width:100px; 
    height:100px;}

Pro:

testo dell'immagine alt è best-practice per l'accessibilità/seo
senza markup HTML in più, e il CSS è piuttosto minimale troppo
aggira il css on/immagini off problema in cui le tecniche di "text-indent" ancora nascondono testo utenti con larghezza di banda ridotta

Il più grande svantaggio che posso pensare è il css off/immagini sulla situazione, perché invierai solo una gif trasparente.

Potrebbe essere possibile scrivere un piccolo javascript per risolvere questo problema, sostituendo tutte le fonti di immagini con le loro proprietà css background-image. Ma ciò funzionerebbe solo se i browser aggiungessero ancora proprietà CSS agli elementi e quindi li ignorassero. Non so se questo è il caso o no, dovrò provarlo. Dovresti anche sviluppare un test basato su JavaScript per vedere se il css viene applicato alla pagina (forse controlla la posizione di qualche elemento di test).

btw, mi piacerebbe sapere, chi usa le immagini senza fogli di stile? una specie di cellulare o qualcosa del genere?

edit:

Sulla base di commento qui sotto ... gli stili inline hrm ... forse dovrei solo fare una funzione PHP aiuto come <?php echo css_image('image_id','my text','image_url');?> per generare un po 'di codice come questo:

HTML

<div id="image_id" style="background-image:url('image_url')" class="image"> 
<img src="image_url" class="alt_text" alt="my text" /> 
<p>my text</p> 
</div><!--/#my_image-->

poi basta allegare qualche CSS nel foglio di stile

#image_id{width:*image width*;height:*image height*} 

.alt_text{position:absolute;top:0px;left:0px} 
.image{display:block;background-position:left top} 
.image p{position:absolute;left:-9999em}

è una tecnica più vecchia che sto usando, non sono sicuro di dove l'ho trovata. Funziona con i CSS su/immagini disattivate, CSS off/immagini on, CSS on/images on.

Se un utente con disattivazione/disattivazione delle immagini CSS visita, vedrà un testo raddoppiato. Se uno spider di un motore di ricerca visita, vedrà alt text e testo normale, un ragno intelligente potrebbe facilmente identificarlo per quello che è, una innocente tecnica di sostituzione dell'immagine.

Quindi, questa tecnica è la peggiore per gli screen reader, poiché il testo alt è letto, ma questi utenti dovrebbero essere in grado di saltare al paragrafo successivo, motivo per cui ho bloccato <p></p> in "my text".

Tutti gli altri con CSS e immagini disattivati sono una specie di bot, giusto?

fonte

2010-04-14 13:11:01

Grazie! Per quanto riguarda la disattivazione/le immagini CSS sullo scenario, non è altamente improbabile. Ma la cosa di cui mi preoccupo è lo screen scraping/alimentazione dei dati. Ad esempio, se uno strumento esterno analizza il mio markup e vuole riformattarlo (come un feed RSS), l'immagine trasparente verrà visualizzata. Questo, ovviamente, può essere risolto usando gli stili in linea, ma speravo che ci sarebbe stata una soluzione perfetta là fuori. Sembra che non ci sia (ancora). –

Questo viene propagandato a lavorare, non importa le impostazioni delle immagini css /:

http://www.tjkdesign.com/articles/tip.asp

fonte

2010-11-03 20:00:29 Billy

Trucchi CSS ha uno dei post più dettagliate sull'argomento here

Essi mostrano varie tecniche. Quello che risolve il problema di css sulle immagini e off è:

HTML:

Trucchi CSS ha una delle pagine più dettagliate sull'argomento here

Essi mostrano varie tecniche. Quello che risolve il problema di css acceso e immagini fuori è la tecnica # 8:

HTML:

<div id="menu"> 
    <ul> 
     <li><a href="#"><span></span>Test</a></li> 
     <li><a href="#"><span></span>Tester</a></li> 
    </ul> 
</div>

CSS:

#menu a { 
    width: 350px; height: 75px; /*your values here*/ 
    position: relative; 
} 

#menu a span { 
    background: url("images/li.jpg"); /*your image here*/ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
}

EDIT: aggiornato il codice per l'esempio fornito.

PS: Non ho testato il codice sopra.

fonte

2012-09-23 02:02:19 PutzKipa

Migliore tecnica di sostituzione delle immagini

risposta

Problemi correlati