hover imagen generico??

[catpaw]

Hola forer@s

tengo una duda, estoy haciendo un efecto de hover de imagenes a los enlaces, este es el codigo:

Código PHP:

  .cajas_icons{
    display:inline-block;
    width:110px;
    height:36px;
    margin-left:4px;
}
.cajas_icons a span{ /*el texto del enlace, aparece a un lado de la imagen*/
    text-decoration:none;
    color:#666;
    font-weight:bold;
    font-size:11px;
    line-height:34px;
    margin-left:36px;
}
.cajas_icons a span:hover{
    text-decoration:underline;
    color:#0b6138;
}
.cajas_icons a{ /* la imagen png contiene arriba el icono en gris y abajo en el color original, solo muestra el de arriba*/
    text-decoration:none;
    display:inline-block;
    width: 32px; 
    height: 32px; 
    background: transparent url(images/iconos/facebook-double.png) no-repeat; /*hacer esto generico*/
}
.cajas_icons a:hover { /* muestra la mitad de abajo de la imagen, el icono con el color original  */
    background-position: 0 -32px; 
} 
   

html:

Código HTML:

<div class="cajas_icons">
	 <a href="#"><span>Correo</span></a>
</div>
<div class="cajas_icons">
	 <a href="#"><span>Facebook</span></a>
</div>
<div class="cajas_icons">
	 <a href="#"><span>Twitter</span></a>
</div>
<div class="cajas_icons">
	 <a href="#"><span>YouTube</span></a>
</div>
<div class="cajas_icons">
	 <a href="#"><span>Clima</span></a>
</div>
<div class="cajas_icons">
	 <a href="#"><span>Cumpleaños</span></a>
</div>
<!-- mas enlaces --> 

Pero son muchos enlaces y no quiero hacer una clase a cada uno, porque es tedioso, no se presta para darle mantenimiento facil, es decir, los enlaces se cambian seguido y tendria que estar cambiando el html y el css.

Como tengo el codigo ahora a todos los enlaces les sale icono de facebook:


http://s2.subirimagenes.com/imagen/p...2607iconos.png

intente sacando la propiedad background del css y poniendola directo al html con el style"" en cada enlace, si cambia la imagen pero ya no hace el efecto del hover:

<div class="cajas_icons">
<a href="#" style="background: transparent url(images/iconos/correo-double.png) no-repeat;"><span>Correo</span></a>
</div>
<div class="cajas_icons">
<a href="#" style="background: transparent url(images/iconos/facebook-double.png) no-repeat;"><span>Facebook</span></a>
</div>
<div class="cajas_icons">
<a href="#" style="background: transparent url(images/iconos/twitter-double.png) no-repeat;"><span>Twitter</span></a>
</div>
...los demás links

como se podria hacer para que salga a cada enlace su imagen correspondiente sin tener que poner por cada enlace un:

background: transparent url(images/iconos/facebook-double.png) no-repeat;

gracias anticipadas por sus respuestas

[furoya]

A ver si entiendo : en ese ejemplo las imágenes son todas la misma, pero en realidad cada link va a llevar su propio logo, o sus dos logos en versió normal y hover tipo sprite.

Creo que se puede, pero me tendría que poner a probar. El mayor drama es que va una sola imagen con todos los logos; el sprite se haría así : al "cargar" el ancla se ubican los logos que corresponden, y al pasar por el enlace se desplazan a su versión hover.

Pero es una idea. Si me sale (y no me gana nadie y lo hace primero), te aviso.
Lo que me da pocas ganas es que tengo que hacer la imagen...

Un problema serio es la compatibilidad. ¿Seguro tiene que ser CSS?

[memoadian]

Pues la idea de furoya es la ideal si todos los iconos tienen el mismo tamaño facilita las cosas.
Pues solo sería cosa de sustituir el cadro de los iconos.
Pero si dices que lo que cambian son los enlaces es decir <a></a> entonces el problema es más grande.

[furoya]

Que los íconos son todos del mismo tamaño es evidente. El punto estaría en la dirección y el texto de los enlaces.

Hasta que catpaw venga a aclarar el panorama, vamos a dar por supuestas algunas cosas.
Como que no puede tocar el HTML. Sería un caso muy especial, pero es posible que el servidor le envíe la lista prearmada a su página, tomando los destinos de una base de datos que él no maneja. Porque desde PHP es muy sencillo escribir el nombre, el destino y el fondo del link para cada uno.
Pero yo quiero saber por qué no lo hace con JS, que sería compatible y sin tanto problema.

Lo de CSS sería experimental, como para probar que de alguna forma se puede poner el ícono que corresponda, y su animación. Por supuesto que con CSS no va a cambiar direcciones ni texto.

Lo que no entiendo bien es lo del mantenimiento. Porque si no puede cambiar ese HTML ¿qué hay que mantener?. Y si se puede cambiar, entonces que se escriba como corresponde y se terminó el problema. Es "copiar y pegar" (a mano o a máquina) cadenas pre-hechas.

Voy a ver si encuentro algo de tiempo y pruebo si sale. Lo malo es que no soy diseñador, y cualquier adefesio de ícono me va a tomar mil horas; todo antes de empezar a hacer el CSS .

(Para colmo me tengo que poner a escribir un par de respuestas que ni debería, y también me van a llevar su tiempo. Espero que lo tuyo no tenga urgencia, catpaw.)

[furoya]

Bueno, no me aguanté, y no fue tan difícil.

Lo dejo y después lo explico (si hace falta). A la noche lo veo de nuevo, porque ahora mi abogada ya me llamó tres veces que no me va a seguir esperando.

¡Nadie me copie el diseño de los íconos, eh!

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>COSO.</title>

<style type="text/css">
body {
	background-color: black;
	color: white;
	width: 700px;
}

.cajas_icons{
background-color: black;
	font-size: 20px;
	display: inline-block;
	width: 220px;
	height: 36px;
	margin-left: 4px;
}

.cajas_icons a span{ 
	font-weight: bold;
	font-size: 30px;
	line-height: 36px;
	padding-left: 40px;
}

.cajas_icons a{ 
	color: lime;
	background-image: url(http://img684.imageshack.us/img684/1632/logos0t.jpg);
	background-repeat: no-repeat; 
	text-decoration: none;
	display: inline-block;
	width: 32px; 
	height: 36px; 
	padding-left: 10px;
}


.cajas_icons a[title="ALFA"]{ 
	background-position: 0 0; 
}
.cajas_icons a[title="ALFA"]:hover{ 
	color:red;
	background-position: -40px 0; 
}


.cajas_icons a[title="FOXTROT"]{ 
	background-position: 0 -40px; 
}
.cajas_icons a[title="FOXTROT"]:hover{ 
	color:red;
	background-position: -40px -40px; 
}


.cajas_icons a[title="KILO"]{ 
	background-position: 0 -80px; 
}
.cajas_icons a[title="KILO"]:hover{ 
	color:red;
	background-position: -40px -80px; 
}


.cajas_icons a[title="PAPA"]{ 
	background-position: 0 -120px; 
}
.cajas_icons a[title="PAPA"]:hover{ 
	color:red;
	background-position: -40px -120px; 
}


.cajas_icons a[title="UNIFORME"]{ 
	background-position: 0 -160px; 
}
.cajas_icons a[title="UNIFORME"]:hover{ 
	color:red;
	background-position: -40px -160px; 
}


.cajas_icons a[title="ZULU"]{ 
	background-position: 0 -200px; 
}
.cajas_icons a[title="ZULU"]:hover{ 
	color:red;
	background-position: -40px -200px; 
}

</style>
</head>
<body>
<h2>... ¿Y qué nombre le pongo a esto? <h2>

<div class="cajas_icons">
	 <a href="#" title="ALFA"><span>ALFA</span></a>
</div>
<div class="cajas_icons">
	 <a href="#" title="FOXTROT"><span>FOXTROT</span></a>
</div>
<div class="cajas_icons">
	 <a href="#" title="KILO"><span>KILO</span></a>
</div>
<div class="cajas_icons">
	 <a href="#" title="PAPA"><span>PAPA</span></a>
</div>
<div class="cajas_icons">
	 <a href="#" title="UNIFORME"><span>UNIFORME</span></a>
</div>
<div class="cajas_icons">
	 <a href="#" title="ZULU"><span>ZULU</span></a>
</div>

</body>
</html>

[catpaw]

que tal, gracias por sus respuestas, disculpen por la tardanza es que por alguna razon los mensajes de aviso de foros del web me estan llegando al correo no deseado y no habia visto que me habían respondido

a ver:

furoya:

A ver si entiendo : en ese ejemplo las imágenes son todas la misma, pero en realidad cada link va a llevar su propio logo, o sus dos logos en versió normal y hover tipo sprite.

Creo que se puede, pero me tendría que poner a probar. El mayor drama es que va una sola imagen con todos los logos; el sprite se haría así : al "cargar" el ancla se ubican los logos que corresponden, y al pasar por el enlace se desplazan a su versión hover.

Exacto, el drama que quiero evitar es hacer una sola imagen con todos los iconos. Gracias por tu ejemplo

memodian:

Pero si dices que lo que cambian son los enlaces es decir <a></a> entonces el problema es más grande.

ese es el dilema

furoya:

Hasta que catpaw venga a aclarar el panorama, vamos a dar por supuestas algunas cosas.
Como que no puede tocar el HTML. Sería un caso muy especial, pero es posible que el servidor le envíe la lista prearmada a su página, tomando los destinos de una base de datos que él no maneja. Porque desde PHP es muy sencillo escribir el nombre, el destino y el fondo del link para cada uno.
Pero yo quiero saber por qué no lo hace con JS, que sería compatible y sin tanto problema.

Lo de CSS sería experimental, como para probar que de alguna forma se puede poner el ícono que corresponda, y su animación. Por supuesto que con CSS no va a cambiar direcciones ni texto.

Lo que no entiendo bien es lo del mantenimiento. Porque si no puede cambiar ese HTML ¿qué hay que mantener?. Y si se puede cambiar, entonces que se escriba como corresponde y se terminó el problema. Es "copiar y pegar" (a mano o a máquina) cadenas pre-hechas.

Bueno para aclararnos, lo que quiero es tocar en lo menos posible el css no el html, de echo el html es lo que mas se cambia, por ejemplo:

tener la clase css predeterminada

.imagen{
ancho de la imagen
alto de la imagen
sin borde
color de texto
margenes del texto
}
.imagen:hover{
usar algo como background-position: para redireccionar las coordenadas de la imagen con el logo normal y el sprite
z-index 1 para que remplace la imagen por default
}

y en el html tener:

<a class="imagen"><img src="ruta/nombre.png" />Texto del enlace</a>

por lo que para facilitar el mantenimiento del sitio seria solo cambiar la ruta de la imagen (lo que esta en negritas)

Pero bueno viendolo bien, creo que necesitare de jqwery

[memoadian]

usa una base de datos y un formulario que actualice esos datos con un click ;)

[furoya]

memoadian : no opines.

catpaw : Sigo sin entender.
Hay un detalle en el ejemplo que puse y que no aclaré por falta de tiempo (quise enviarlo apenas lo tuve funcionando). Tampoco es nada inventado, el 'detalle' es CSS3, pero ahora lo amplío.
Allí se usa para elegir el ícono que le corresponde a cada enlace un title="". Esto fue porque no tenía los enlaces a cada sitio (en el original eran #'s). Pero resulta que ni siquiera hay que poner un tooltip ni una clase, se supone que el CSS "sabe" a donde apunta el link, y le da el ícono que le corresponde.

Por ejemplo, si en el engendro anterior el ancla "FOXTROT" apuntara a FdW, el HTML quedaría así

Código HTML:

</div>
<div class="cajas_icons">
	 <a href="http://www.forosdelweb.com/"><span>FOXTROT</span></a>
</div> 

Y el CSS así

Código:

.cajas_icons a[href*="forosdelweb"]{ 
	background-position: 0 -40px; 
}
.cajas_icons a[href*="forosdelweb"]:hover{ 
	color:red;
	background-position: -40px -40px; 
}

¿Menos mantenimiento que ése? ¡Lo único que debe tener el enlace es la ruta, lo demás se hace solo!

Por supuesto que también doy por hecho que los enlaces son siempre los mismos. Habrá uno, tres, cinco, pero si el sitio permite agregar enlaces para contacto, hay una cantidad limitada, porque no te vas a poner a hacer un ícono por cada sitio nuevo que te inventen.
Ahí veo uno para email, otro para Tw, otro para el tiempo, otro para FB, otro para YT y uno para el cumpleaños. Habrá un par más para escáip y mensajero, pero en cualquier caso, el número es limitado a las opciones para cargarlos. Así que la imagen única no es problema.

Ahora, si además de la ruta de destino, también quieres poner una ruta para la imagen ... ¿cuál era la dificultad, si eso es CSS 2.x? Es un hover común y corriente.

Código HTML:

<div class="cajas_icons">
	 <a href="#" style="background-image: url(images/iconos/facebook-double.png)"><span> algo </span></a>
</div> 

Por último, ni se te ocurra hacer el disparate de usar yaicuery por un hover. De última, se hace con JS.

[memoadian]

Desconozco que pasé por tu cabeza furoya, pero a mi nadie me dice que hacer, sobre todo por que el que no entiende eres tú.

Furoya: deja de trollear en el foro

Catpaw: No terminas por aclararte, furoya te esta dando un ejemplo en el que usa un sprite (no se por que el problema de usarlo) para que lo único que hagas es cambiar ese sprite y listo ya tienes otro menú.

Pero insistes un quere usar <img> por eso mi comentario de que hagas un menu en la base de datos (que algunos no comprenden) debido a esa insistencia.

si no vas a cambiar la dirección de los enlaces, usa el ejemplo que te dan.

[furoya]

memoadian : madura.

¿Cómo vas a hacer el papelón de decir que trolleo el foro? ¡Y en este tema, donde terminé armando todo un ejemplo y tú solamente vienes a repetir lo que yo ya dije!
Por no decir que ni entendiste lo que estoy proponiendo, pero es lógico : boqueas, pero no lees.


Bien, no perdamos tiempo. Un comentario más y explico a qué volví.
Aunque no parezca, estos demos para postear en el Foro dan su buen trabajo para crearlos. Especialmente a mí, que no me dedico a esto. Y por hacerlo a las apuradas me quedó bastante feo. En realidad, es la idea; porque los ejemplos son para que los estudie quien ya sabe algo del tema y no para "deslumbrar" con diseño a los que vienen a chusmear.
Pero la verdad es que éste pudo haber terminado mejor. Me iba a desquitar en los próximos ejemplos, ya que hay otras formas y versiones que se podrían postear para hacer comparaciones, y lograr que este tema juntara algo de valor agregado.

Y ya no lo voy a hacer. No sólo porque en estos días ando con poco tiempo para ver el Foro, sino porque entre las explicaciones a medias o los códigos sin etiquetas de catpaw y los comentarios siempre fuera de lugar de memoadian, ya me quitaron la voluntad.
Lamento por todos los que sé que siguen los temas donde posteo, para desarmar los ejemplos, pero una cosa es pelearla solo, y otra pelearla contra esta gente.
Hasta que no nos deshagamos de ellos, voy a terminar poniendo muchos menos ejemplos y trucos de los que ponía cuando este sitio era un poco (bastante) más profesional.


Ahora sí, al post : con el apuro, me olvidé de linkear la imagen. No es que no la puedan extraer del CSS, pero es una cuestión de respeto poner un ejemplo con todos los recursos disponibles (sí, catpaw, todavía estamos esperando tus direcciones absolutas).
Aquí está

Imagen :


◙


Por último, una Fe de Burratas.

Donde dice : "Es un hover común y corriente"; debería decir "Es un rollover con hover común y corriente".

Saludos
furoya