JMiur [E]

En CSS, un selector es un vínculo entre el HTML y la hoja de estilo. Todas las etiquetas son selectores y cada uno de ellas posee un conjunto de propiedades generales y particulares. Pero como esto es insuficiente, también existen selectores especiales que nos permiten crear reglas muy específicas.

leer artículo actualizado

votar

20 comentarios:

Carlos Martínez  

Interesante, buena la explicación =).... Saludos!

Responder
Tapestry Workerman  

Hola JMiur.
Una preguntilla: ¿cómo puedo poner el icono de la página delante de todos los enlaces internos de forma automática? (tal como está el tuyo).
No tengo muy claro el tema propiedades, entre otros ;)
Un saludo y gracias por tus brillantes soluciones.

JMiur  

En el ejemplo, dice algo así:

a.linkequ[href*="miblog."] {
background: url(http://miblog.blogspot.com/favicon.ico) no-repeat 5px 50% #666;
border: 1px solid #888;
border-radius: 4px;
color: #FFF;
display: inline-block;
padding: 2px 5px 2px 25px;
}

donde debes cambiar miblog por la url de tu blog y funcionará simpre que hayas colocado el favicon usando el sistema de Blogegr, sino, simplemente colcoa la url de ese favicon o la imagen que quieras.

Tapestry Workerman  

Ok.
¿Dónde coloco el código?. No tengo claro si tengo que agregar el código para cada enlace o ponerlo en algún sitio específico para que detecte los enlaces propios y aplique los cambios de forma automática.
... ya perdonarás.

JMiur  

Junto con el resto del CSS; dentro de <b:skin> </b:skin> o antes de </head> colocándolo dentro de etiquetas <style> </style>

Puesto de ese modo, afectará a todos los enlaces del sitio.

Tapestry Workerman  
Este comentario ha sido eliminado por el autor.
Tapestry Workerman  

Bueno... no consigo que aparezca el icono antes del enlace interno, sin recuadro, como pretendía.
He probado con el código que me proporcionas y tampoco, también lo he colocado entre las distintas etiquetas con el mismo resultado, ambos enlaces aparecen normalmente.
Te mando enlace al blog de pruebas por si ves algo que no haya hecho bien.
...

JMiur  

No veo que allí esté colocada ninguna regla de estilo para hacer esto.

Responder
Bonzu Pipinpadaloxicopolis III  

Hola Jmiur, ya que estamos con los enlaces ¿es posble que un script detecte la url de una imagen y que use esta url para añadirla como enlace a la imagen que le detectó la url?

JMiur  

Parece un trabalenguas :D

¿Es posible que un script detecte la url de una imagen? Si. Dependerá de como ea la etiqueta, si tiene una clase, un id o si se usan librerías etc, etc

Una vez detectada esa url es posible usarla para cualquier cosa pero, esa es la parte no se entiende de la pregunta. Amplia un poco o trata de darme un ejemplo.

Responder
Bonzu Pipinpadaloxicopolis III  

Por ejemplo, tengo esta imagen <img src="URL imagen1" />, el script detecta la url de esa imagen y le añade una etiqueta "a" con la misma url que detectó quedando así <a href="URL imagen1"><img src="URL imagen1" /></a>

JMiur  

En resumen, quieres transformar una imagen en un enlace. Para eso, lo primero es poder indentificarla, com odije antes, con una clase o id o de cualquier modo que se te ocurra porque debemos decirle al script cuál o cuáles son las etiquetas que deben cambiarse. Suponiendo:

<img class="ejemplo" img src="URL imagen1" />

si usas jQuery, la solución sería sencilla, algo así cambairía todas las imágenes con la clase "ejemplo":

$('.ejemplo').each(function() {
$(this).wrap('<a href="'+$(this).attr('src')+'"></a>');
})

que quedarían asi:

<a href="URL imagen1">
< class="ejemplo" img src="URL imagen1" />
</a>

Sin librerías, se complica un poco (bastante más) y tendrías que probar addEventListener/attachEvent o usar createElement

Responder
Bonzu Pipinpadaloxicopolis III  

No lo pude haber dicho mejor, es que a veces tomo muy en serio mi nombre sin darme cuenta (por lo del trabalenguas) :-). Ha funcionado estupendamente usando jQuery. Ahora te lo complico un poco, quiero que la url del enlace cambie.

Tú sabes que las imágenes alojadas en Blogger generan miniaturas, y tienen una terminación (por ejemplo) como esta "...s128/imagen1.jpg" y que para ver la original se cambia ese 128 por 000.

Bueno, en este ejemplo tengo <img src="URL MINIATURA imagen1" /> y quiero que pase a ser <a href="URL ORIGINAL imagen1"><img src="URL MINIATURA imagen1" /></a>

¿Es posible con jQuery, JMiur?

JMiur  

Si, eso puede hacerse con o sin jQuery.

Si sabes el tipo de miniatura, es simple; supongamos que es /s400/ :

$(this).attr('src').replace('s000','s400');

si hay varias posibilidades puedes repetirlo sin problemas:

$(this).attr('src').replace('s000','s320');
$(this).attr('src').replace('s000','s400');

imagino que debe haber alguna expresión regular para eso pero es un tema que desconozco así que me manejo con cosas sencillitas, nomás :D

Responder
Bonzu Pipinpadaloxicopolis III  

Una ayudadita JMiur (otra) No sé como utilizar esto:
$(this).attr('src').replace('s000','s400');

con esto
$('.ejemplo').each(function() {
$(this).wrap('');
})

Porque quiero que el reemplazo solo ocurra en el enlace generado. Ya le moví como pude y nada :-(.

JMiur  

Un ejemplo paso a paso:

$('.ejemplo').each(function() {
var nueva = $(this).attr('src').replace('s400','s000');
$(this).wrap('');
})

Me parece que en el comentario anterior puse los datos al revés. La sintaxis es:

.replace( VIEJO_VALOR , NUEVO_VALOR )

.replace('s400','s000')
cambia s400 por s000 ... etc etc etc

Sí, efectivamente, en el comentario anterior los escribí al revés :D

Responder
Bonzu Pipinpadaloxicopolis III  

Lo coloqué de esta manera:

$('.ejemplo').each(function() {
var nueva = $(this).attr('src').replace('s400','s000');
$(this).wrap('<a href="'+$(this).attr('src')+'"></a>');
})

pero la url del enlace sigue con s400.

JMiur  

Lo que pasa es que Blogger eliminó los < y > del comentario sin avisarme del error así que aquí va de nuevo:

$('.ejemplo').each(function() {
var nueva = $(this).attr('src').replace('s400','s000');
$(this).wrap('<a href="'+nueva+'"></a>');
})

si no funciona, dime donde está el ejemplo.

Bonzu Pipinpadaloxicopolis III  

Es perfecto, mi galería funciona!!!

Gracias JMiur.

Si tuvieras un centavo por consulta ahora serías millonario... o ya lo eres? ;-)

JMiur  

Perfecto, Bonzu :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

Suscribirse a los comentarios
 
CERRAR