1. Inicio
  2. Pregunta y respuesta
  3. Mejor técnica de sustitución de imágenes

Mejor técnica de sustitución de imágenes

2009-08-04 5 views
7

¿Cuál es la mejor técnica (como en el navegador cruzado) para realizar la sustitución de imágenes en CSS? Estoy usando sprites para hacer mi navegación, pero quiero que el marcado siga siendo amigable con el SEO. Dada la siguiente estructura HTML ...Mejor técnica de sustitución de imágenes

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

¿Cuál es la mejor manera de reemplazar el texto con una imagen de fondo con CSS solamente?

Actualmente estoy usando esto ...

text-indent: -9999px;

embargo, fracasa con CSS en y fuera de imágenes.

Fuente

2009-08-04 Josh Stodola

+0

¿Qué es SEO hostil sobre el uso de sprites? ¿Está colocando atributos 'title' en la etiqueta de anclaje? – beggs

+0

Nada es. Tengo un problema con la sustitución de la imagen. –

Respuesta

2

Si este es el 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>

Y este es el 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 
}

La imagen sería entonces de 300 px de ancho, y cada pestaña sería 100px de ancho.

Fuente

2009-08-04 03:56:46 Marius

+0

no se olvide 'background-position: ...' para el desplazamiento del sprite. – beggs

+0

La posición de fondo se establecería en otra regla, una para cada enlace. – Marius

1

La imagen de fondo se aplica generalmente al enlace <a>, dando una imagen a toda el área cliqueable. Para ocultar el texto, puede usar un valor negativo muy grande para text-indent.

Fuente

2009-08-04 03:57:08

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

La pantalla: bloque es importante o de lo contrario su ancho y altura pueden no verse bien.

Fuente

2009-08-04 03:58:23 Neil

+0

No se me ocurre ninguna manera de evitar el problema si apaga las imágenes pero deja css. Eso podría ser un poco demasiado cauteloso y probablemente debería suponer que las imágenes Y css estarán disponibles. Sin embargo, como una ventaja, si ve esto en un dumbphone (por ejemplo, un RAZR), su imagen no aparecerá, pero su texto lo hará (y no se quitará de la pantalla). – 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>

Editar: se ha añadido el texto del enlace de vuelta en ... porque se perdió. :-)

Fuente

2009-08-04 04:06:15 beggs

+0

Ummm, ¿qué tal el texto? ¿Sabes algo sobre SEO? –

+0

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

0

Este es el código que uso para reemplazar el texto del logotipo con una imagen, manteniendo el texto en el código pero no se muestra al usuario (esto está aprobado por Google). Ver el ejemplo completo aquí:

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

Aquí está el código completo (imágenes se pueden encontrar en el enlace de arriba - las imágenes pueden ser diferentes tamaños - toda la imagen se puede hacer clic y cambios sobre la libración):

<!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>

Fuente

2009-08-05 17:02:15 Elle

+0

Esto todavía falla con CSS activado y las imágenes desactivadas ¿correcto? –

2

En 2008, la presentación de Google en An Event Apart dejó en claro que el reemplazo de la imagen válida no será penalizado por Google. See Mezzoblue's post about it

Básicamente, siempre y cuando la imagen que reemplace el texto con el texto tiene misma en el mismo, se considerará válida y no tratando de engañar a los motores de búsqueda. ¿Cómo determinan si la imagen es válida o no? No tengo ni idea ... OCR? ¿Revisión manual?

En cuanto a CSS en/imágenes desactivadas, no hay una solución perfecta, todas requieren un marcado extra semántico. Ver el enlace css-tricks que beggs publicado en las diferentes técnicas.Personalmente, no me molesto con el porcentaje muy pequeño de usuarios que navegan con CSS pero no con imágenes.

Su elección es simple. Marcado adicional, o no se preocupan por css on/images off.

Fuente

2009-08-06 03:06:04 kmiyashiro

1

Me acaba de llegar con esto, parece que funciona en todos los navegadores modernos, sólo probado de entonces (IE8/compatibilidad, 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;}

Pros:

  • texto alt de la imagen es de las mejores prácticas para la accesibilidad/SEO
  • no marcado HTML extra, y el css es bastante escaso demasiado
  • obtiene alrededor de la CSS en la/las imágenes apagadas Problema donde las técnicas de "texto-guión" todavía ocultar el texto de usuarios de bajo ancho de banda

La mayor desventaja que puedo pensar es en el css off/images on situation, porque solo enviarás un gif transparente.

Podría ser posible escribir un pequeño javascript para ayudar con esto, reemplazando todas las fuentes de imagen con sus propiedades background-image css. Pero esto solo funcionaría si los navegadores siguen adjuntando propiedades CSS a los elementos y luego los ignora. No sé si este es el caso o no, tendré que probarlo. También querrá desarrollar una prueba basada en Javascript para ver si se está aplicando CSS a la página (tal vez verifique la posición de algún elemento de prueba).

Por cierto, me gustaría saber, ¿quién usa imágenes sin hojas de estilo? algún tipo de teléfono móvil o algo así?

edición:

Basado en comentarios a continuación ... estilos en línea HRM ... quizás debería hacer una función php ayuda semejante <?php echo css_image('image_id','my text','image_url');?> para generar algo de código como este:

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

a continuación, sólo unir un poco de CSS en la hoja de estilo

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

es una técnica anterior que estoy usando, aunque no estoy seguro de dónde la encontré. Funciona con CSS activado/desactivado, CSS desactivado/imágenes activado, CSS activado/imágenes activadas.

Si un usuario tiene desactivadas/desactivadas las visitas de CSS, verán el texto duplicado. Si una araña de un motor de búsqueda visita, verán texto alternativo y texto normal, una araña inteligente podría identificarlo fácilmente por lo que es, una inocente técnica de reemplazo de imágenes.

Por lo tanto, esta técnica es peor para los lectores de pantalla, ya que el texto alternativo se lee, pero estos usuarios pueden pasar al siguiente párrafo, por lo que cerré <p></p> alrededor de "mi texto".

Todos los demás con CSS y las imágenes apagadas son algún tipo de bot, ¿verdad?

Fuente

2010-04-14 13:11:01

+0

¡Gracias! En cuanto al escenario de CSS apagado/imágenes, no es muy probable. Pero lo que me preocupa es la captura de pantalla/datos de alimentación. Por ejemplo, si una herramienta externa analiza mi marcado y desea volver a formatearlo (como una fuente RSS), la imagen transparente aparecerá. Esto, por supuesto, se puede abordar mediante el uso de estilos en línea, pero esperaba que hubiera una solución perfecta. Parece que no hay (todavía). –

0

trucos CSS tiene uno de los mensajes más detallados sobre el tema here

Se muestran varias técnicas. El que resuelve el problema de la CSS y las imágenes en off es:

HTML:

trucos CSS tiene una de las páginas más detalladas sobre el tema here

Se muestran varias técnicas. El que resuelve el problema de la CSS en e imágenes fuera es la técnica # 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: Actualización del código de la muestra proporcionada.

PD: No he probado el código anterior.

Fuente

2012-09-23 02:02:19 PutzKipa

Cuestiones relacionadas

 Cuestiones relacionadas