Botones en movimiento. Rollover | Oloblogger Darle un aspecto más "profesional" a nuestro blog, es cuestión de pequeños detalles. Los botones y los enlaces con efectos son u...

29 de septiembre de 2008

Botones en movimiento. Rollover


Darle un aspecto más "profesional" a nuestro blog, es cuestión de pequeños detalles. Los botones y los enlaces con efectos son uno de estos detalles. Además, aplicar un estilo más sofisticado a estos elementos, permite descubrir más fácilmente qué imágenes son a la vez enlaces.

Lo que explicaremos a continuación, son algunas maneras de destacar nuestros botones con el efecto denominado ROLLOVER. Se trata de sustituir la imagen original por otra, al pasar el cursor por encima de ella. Con esto se consigue la sensación de que el botón se mueve.



Hay diversos sistemas de realzar un enlace, pero para las imágenes lo más fácil es utilizar los eventos ONMOUSEOVER y ONMOUSEOUT. El primero se ejecuta cuando se pasa el cursor por encima de la imagen y el segundo cuando se sale de ella.

Tenemos una primera opción que requiere crear dos imágenes. Cada una se verá con cada uno de los eventos descritos. El esquema general del código es el siguiente:
<a href="URLenlace" onmouseout="getElementById('IdentificadorUnico').src='URLimagenORIGINAL';" onmouseover="getElementById('IdentificadorUnico').src='URLimagenBIS';">
<img id="IdentificadorUnico" src="URLimagenORIGINAL"/>
</a>
Así, por ejemplo, utilizando este código con estas dos imágenes
podemos conseguir este efecto que simula un botón pulsado:


Una vez más, IdentificadorUnico es un número o conjunto de caracteres, igual para las tres apariciones en el anterior código, pero único con respecto a otro elemento que lleve un ID. Por ejemplo un segundo botón.


Hay otra opción jugando con la instrucción BACKGROUNDPOSITION. En este caso construiremos una sola imagen conteniendo los dos dibujos a alternar, uno arriba y otro abajo. Con dicho atributo y de nuevo con ONMOUSE, indicaremos si queremos mostrar la parte superior de la imagen o la inferior. El código general es este:
<a href="URLenlace"><div style="width:ANCHOimagen px; height:LAmitadDELaltoDElaIMAGEN px; background: transparent url(URLimagen) no-repeat left top;" onmouseover="this.style.backgroundPosition='right bottom';" onmouseout="this.style.backgroundPosition='left top';"></div></a>

Ahora necesitamos una sola imagen similar a las que se encuentran a ambos lados de este párrafo. Sólo hay que tener en cuenta que la parte superior tiene que tener las mismas dimensiones que la de abajo. En el código, además de colocar correctamente la dirección del enlace y la de la imagen, hay que indicar la anchura y la altura del blogque (DIV) que contendrá la imagen final. En este caso, usamos una imagen base de 50x100 pixels, pero como sólo queremos ver una parte de ella, habrá que dimensionar a 50x50 pixels usando WIDTH0=50px; y HEIGHT=50px; tal y como se veía antes. Importante también es poner correctamente si deseamos ver la parte superior (LEFT TOP) de la imagen o la inferior (RIGHT BOTTOM). El resultado si todo lo hacemos bien sería este:






Por último, veamos como conseguir un efecto rollover con CSS, para los enlaces de texto y por qué no, para las imágenes.

Tenemos que crear en nuestra plantilla una nueva clase Luego designaremos con esa clase el elemento sobre el que queremos conseguir el efecto. En la clase se definiría el aspecto normal y el que tendría el enlace al pasar el ratón por encima (HOVER). Sólo veremos como hacer para que cambie el color del texto y su fondo, aunque también se puede conseguir con el tamaño del texto u otros atributos.

Podemos colocarla en dos sitios: antes de ]]></b:skin> tal y como se muestra a continuación o antes de la etiqueta </head>. En este último caso, al código habrá que añadirle una primera línea <style type='text/css'> y una última </style>:

.rollover {
color: #000000;
background: ffffff;
}
.rollover:hover {
color: #ffffff;
background: #000000;
}

Ahora lo que tendremos que hacer para que el efecto funcione donde queramos, será añadir class="rollover" a la etiqueta donde esté el enlace a rollovear. Podría ponerse incluso en otros elementos que no fueran enlaces, como párrafos, bloques DIV, imágenes... En este último caso, salvo que tuvieran alguna parte transparente, no apreciariais diferencia. La segunda línea en cada ejemplo, está construida incluyendo ya la clase rollover:

<a href="URLenlace">TEXTO DEL ENLACE</a>
<a class="rollover" href="URLenlace">TEXTO DEL ENLACE</a>

<p>TEXTO</p>
<p class="rollover">TEXTO</p>


Simulación de como quedaría sobre una imagen gif con fondo transparente y colocando en HOVER un fondo amarillo.
Y ahora un truquillo para hacer un sencillo rollover sin necesidad de crear dos versiones de la misma imagen. En este caso vamos a jugar con la transparencia, lo que nos permitirá que de la sensacion de que la imagen se realza. Realmente lo que haremos, será asignar al estado normal de la clase ROLLOVER una opacidad del 100%. Sin embargo, al pasar el cursor por encima, la opacidad será del 80% y se verá con menor intensidad. También se podría hacer al revés, claro.

Podeis verlo actualmente en los botones de categoría al principio de cada entrada de este blog y en la imagen al final de este post. Con imágenes de tinta plana queda mejor y nos sirvirá para no tener que redactar tanto código cada vez que queramos conseguir realzar un enlace.

Se trata de incorporar una nueva clase en nuestra parte CSS y con la pseudo clase HOVER, conseguir la transparencia. Para ello hay que redactar un código como este y después incluir en las imágenes enlazadas, la clase ROLLOVER:

.rollover {
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}

.rollover:hover {
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}

.../...

<a href="URL_ENLACE"><img class="rollover" src="URL_IMAGEN"/></a>

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

85 comentarios :

  1. Hola me gustaría preguntarte como poner dos botones juntos, ya tengo el diseño dos imágenes por cada botón pero no se cual es el código que debo utilizar.
    Esperando tu ayuda salvadora, y es que recien estoy empezando en el mundo de los blogs.
    GRACIAS

    ResponderEliminar
  2. Para dos imágenes independientes, cada una con su propia URL, tienes que usar el primero de los que aquí se explican.

    Un saludo.

    ResponderEliminar
  3. Muy buenas, a traves de varios blogs he llegado a ti... me parece un blog muy útil aunque en este caso pues no consigo llegar a donde quiero. Me gustaria que los botones laterales que hay en mi sidebar que yo mismo creé con imagenes y un solo enlace, pues se convirtieran y se mostraran como dices aquí, mas elegantes con esto del Rollover, lo que pasa es que intento hacer una prueba con dos imagenes que tengo subidas en el photobucket y si te digo la verdad no se donde hago lo malo, me podrias explicar mejor como crear el rollover del primer ejemplo que dices aqui, lo veo sencillo pero luego no se donde lo cometo el fallo para que no salga nada...
    Este es mi blog "http://elpoetasinvoz.blogspot.com/"
    Y bueno mis preguntas.- el codigo ese que nombras se ha de clavar, ¿dónde exactamente? y ¿que es todo lo que hay que rellenar a parte de los enlaces url? ¿hay que poner algo en identificador unico?

    Gracias atentamente luis, me será muy grata tu ayuda

    ResponderEliminar
  4. Hola EpsV:

    A ver, tienes que crear un nuevo elemento HTML en tu barra lateral. No le pongas título porque saldrá. En el contenido, pegas todo el código que se facilita. Por último sustituyes lo que se indica por tus propios datos:

    URLenlace. Dirección a enlazar

    IdentificadorUnico. Una palabra o código alfanumérico que identifique ese enlace. Cada botón debe llevar tres veces el mismo identificador (se indica dónde en el código) y el de cada botón debe diferir del de los otros.

    URLimagenORIGINAL. La dirección de la imagen que se verá inicialmente. A sustituir en dos sitios por botón.

    URLimagenBIS. La dirección de la imagen que se verá al pasar el puntero por encima.

    ResponderEliminar
  5. Muchas gracias pòr fin lo entendí, quizá era el día de ayer que estaba espesito, vamos era lunes y a mi hasta el martes o miércoles no se me despegan las neuronas... aún así enhorabuena por el blog y muchas gracias por tu ayuda.

    P.D.- Seguiré molestándote con mas cosas espero no te moleste.

    Atentamente Luis

    ResponderEliminar
  6. Por cierto, te enlace con el glogo de "escribir correctamente", espero no te moleste, pero me facilitarías el codigo html para que se transparente como a tí?

    Gracias antes de tiempo

    ResponderEliminar
  7. te lo dije que te molestaría más de la cuenta, bueno la primera prueba de los botones no está nada mal pero a ver si elaboro más los que tengo por que no se aprecia mucho, pero el resultado es perfecto, muchas gracias.... y tu ultima esplicación me hiczo verlo más sencillo.

    te dejo el blog por si quieres verlo;
    "http://elpoetasinvoz.blogspot.com/"

    ResponderEliminar
  8. Ví en su momento lo del globo sobre la escritura ;). Sobre lo de que se transparente tipo rollover, justamente se explica al final de este mismo post.

    El efecto rollover en tus botones es perfecto, cambian de color sin problemas. Te sugiero que hagas el fondo del mismo color que tu sidebar (o incluso transparente mediante gif) y que sea el cuerpo principal del botón el que cambie de color, aspecto, forma...

    ResponderEliminar
  9. Gracias por todo... date un paseo si quieres y mira otra vez los botones, con lo el tu enlace, bueno desisto ya se me ocurrira algo tranquilo...
    La verdad que llevaba ya un tiempo y mira lo que he descubierto en dos semans es tremendo y yo diciendo que mi plantilla no me gustaba y hay un mundo detras de la pantalla enorme, el siguiente blog sera echo a mi medida, te lo aseguro.
    Gracias por todo.
    Atentamente, Luis "http://elpoetasinvoz.blogspot.com/"

    ResponderEliminar
  10. hey me ha gustado las letras rojas q flotan, me podeis exlicar como las hs hecho!!!!con elcodigo por fa..

    ResponderEliminar
  11. Las letras rojas son una nube de tags llamada Blogumus. Utiliza el buscador con esa palabra y te saldrán diversos posts sobre el tema.

    ResponderEliminar
  12. Hola Oloman, tenía un problema con el último truco, el que aplica CSS. En mi blog no aparece el efecto, es decir, no funciona. A ver si puedes mirar que pasa. Gracias adelantadas.
    Saludos
    Juanma

    ResponderEliminar
  13. En IE no se ve el efecto, Juanma, al menos en versiones inferiores a IE8. Si en firefox tampoco se ve, tiene que ser otro problema, pero cómo no sé que imagen debe tener ese efecto, tampoco podría averiguarlo.

    De todas formas, se pueden incorporar más atributos a las clases para que la transparencia funcione en más navegadores. Ver: Transparencia

    ResponderEliminar
  14. Hola, lo he conseguido con un truco que utiliza HTML sin CSS. Pero con CSS no funciona. Por ejemplo el truco que te dije antes lo tengo puesto en la imagen de Twitter primera, a ver si puedes mirarlo y decirme algo. Muchas gracias.
    Saludos.
    Juanma

    ResponderEliminar
  15. En primer lugar, quita una definición ROLLOVER que tienes de más por encima de las dos que deberían ser las normales. Ahora es eso lo que te da problemas, pero si luego cambias algo sí.

    A ver, prueba esto otro que desde que escribí este post, he aprendido más cosas:

    .rollover, .rollover a {
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    opacity: 0.5;
    -khtml-opacity: 0.5;
    }

    .rollover a:hover {
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    filter:alpha(opacity=100);
    -moz-opacity:1.0;
    opacity: 1.0;
    -khtml-opacity: 1.0;
    }

    Y la clase class="rollover", métela dentro del enlace, no de la imagen (a href="...)

    ResponderEliminar
  16. Nada Oloman, sigue sin funcionar. Compruébalo tú mismo, creo que ya está todo correcto. Gracias por tu ayuda y espero que lo puedas solucionar.
    Saludos,
    Juanma

    ResponderEliminar
  17. Definitivamente, copia y pega este nuevo CSS que incluso he actualizado en el post...

    .rollover {
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    opacity: 0.5;
    -khtml-opacity: 0.5;
    }

    .rollover:hover {
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    filter:alpha(opacity=100);
    -moz-opacity:1.0;
    opacity: 1.0;
    -khtml-opacity: 1.0;
    }


    ...y luego sustituye el código de tu pajarito por este otro

    <a href="http://twitter.com/JuanmaTM"><img class="rollover" src="http://img9.imageshack.us/img9/28/32857289.png" title="Sígueme en Twitter!"></a>

    Lo he probado en varios navegadores y funciona sin problemas... a propósito ¿cual estás usando?

    ResponderEliminar
  18. Nada! Uso Google Chrome, pero también he probado en Firefox y tampoco. Yo creo que debe haber un error en la plantilla. A ver si le encuentras solución. Muchas gracias y perdón por el tuto.
    Saludos

    ResponderEliminar
  19. Borra las antiguas clases ROLLOVER y deja sólo las últimas que te pase. Te gusta dejar lo viejo ¿no? ;)

    Le he dado varias vueltas y no veo nada de nada que pueda causar el problema. Sólo esto último que te comento. Si ya con eso no funciona, tendrás que usar siempre javascript para ese efecto. Es más incómodo de programar, pero tiene como ventaja que funciona en IE6.

    ResponderEliminar
  20. Me gusta mantener los recuerdos, jajaja.
    Pues eso que nada de nada, voy a tener que vivir del JS toda la vida, jaja. Bueno, muchas gracias por tu ayuda.
    Saludos,
    Juanma

    ResponderEliminar
  21. Funciona!! Muchas gracias por todo Oloman!
    Saludos

    ResponderEliminar
  22. Bueno, pues ahora cámbialo también en la imagen del feed, que creo que se te ha olvidado ;)

    ResponderEliminar
  23. Hola oloman, creo que ya voy entendiento esto del Rollover

    una consulta :)
    Como haces para poner una imagen flotando por ahi?
    por ejemplo veo que en tu header, arriba
    tienes algo que dise : ¿Que es Esto?

    y la verdad se masomenos como hacerlo
    el problema esque como lo pongo en la plantilla para que quede en el lugar que quiero que flote, sin que me descuadre todo el blog

    e tratado poniendole un div despues de boby, inserte eso pero me descuadra el blog.

    alguna forma facil de hacer esos efectos flotantes?

    Gracias :)

    ResponderEliminar
  24. Claro Renzo. Lo del DIV está bien, pero ese DIV tiene que tener la propiedad POSITION:ABSOLUTE y el contenedor dónde lo coloques (en mi caso en el de la cabecera) debe tener POSITION:RELATIVE. Luego con TOP-BOTTOM-LEFT-RIGHT, lo colocas exactamente dónde quieras. Más info.

    ResponderEliminar
  25. ya entendi jeje gracias seguire provando entonses ;)

    por cierto otra pregunta, jeje estoy haciendo un blog desde 0 se podria desir,,,,,
    pero no puedo ponerle el formulario de comentarios :(
    tengo activada esa opcion pero no me sale nada en las entradas...esta tan modificada mi plantilla?
    o hay alguna forma de hacer que aparescar, arita estoy leyendo algunos temas tuyos para aver si lo arreglo, pero si puedes me ayudas :P

    ResponderEliminar
  26. Hay algunas entradas hechas sobre el formulario de comentarios. Quizás la que pueda resolver tu problema sea esta. Echale un vistazo.

    ResponderEliminar
  27. Hola oloman desde hace unos dias visito tu blog por q me estoy iniciando en esto del bloggin pero creo q estoy muy novato todavia :P a pesar de eso tu blog me ha ayudado bastante , me llamo mucho la atencion esto del rollover y queria aplicarlo en la imagen de cabecera de mi blog pero he probado de varias formas y no se por q no me hace el efecto, no se si sera por q tengo q modificar algo en el CSS, probe con los 2 1ros metodos q explicaste en esta entrada pero no me dio resultado, te agradeceria muchisimo si me puedes dar una ayudita, en mi blog tengo la plantilla minima black.
    P.D.: Tu blog esta muy bueno, de verdad te felicito, me gusta mucho

    ResponderEliminar
  28. Hola Psycho. No puedes aplicar casi nada en una cabecera, por lo que lo mejor, es eliminarla y luego incorporar un gadget HTML/JavaScript.

    Más info: http://oloblogger.blogspot.com/2009/08/blogger-como-eliminarsustituir-la.html

    ResponderEliminar
  29. Hola de nuevo oloman, oye de verdad q eres un genio en esto, muchisimas gracias me funciono a la perfeccion, un saludo.

    Gracias de nuevo

    ResponderEliminar
  30. Hola de nuevo oloman paso por aca de nuevo a molestarte ;), me gusto mucho este efecto del rollover e hice uno para mi firma de correo pero no funciona, estoy seguro que el código esta bien hecho la duda que tengo es si de verdad se puede hacer este efecto en firmas de hotmail o en firmas de foros por q estuve buscando bastante por la web y no consegui nada respecto al tema.
    Gracias de nuevo por toda la ayuda, saludos

    ResponderEliminar
  31. Hola Psycho. Normalmente, la mayoría de los códigos HTML no están permitidos en los foros y el JavaScript mucho menos (los primeros que se explican). Por eso aunque lo programes bien, no se verá.
    En el correo creo sí puedes meter algo de HTML pero no todo.

    ResponderEliminar
  32. Todo bien con tus instrucciones.
    Lo malo es que no me deja poner mas de uno. Puede ser por eso del identificador unico, no lo entiendo muy bien, esta medio confuso para mi cabeza de pollo.
    Quiero utilizar ese recurso en mas de una oportunidad y no lo logro.

    Serias tan amable de explicarme como si yo tuviera 5 años por favor te lo pido.

    Un beso y estaré atenta a tu respuesta.

    ResponderEliminar
  33. Alexa, supongamos que construimos un primer botón utilizando el primer código. Se copia este y a continuación se sustituyen las palabras IdentificadorUnico, por ejemplo, con el número 01243. La sustitución hay que hacerla en los tres sitios donde viene IdentificadorUnico y las tres usando el mismo número: 01243.

    Ahora vamos a hacer un segundo botón. Volvemos a copiar el código y también repetimos lo de la sustitución. Y aquí viene lo importante: para este segundo botón, tenemos que usar un número distinto del que hemos usado para el primero. Por ejemplo 01524. Los tres IdentificadorUnico de este segundo código se tienen que cambiar por 01524.

    La cosa es que asignamos a cada imagen un número (ID) y los eventos onmouseover y onmouseout tienen que saber a qué imagen tienen que aplicar el efecto correspondiente. Para ello buscarán cual es la que tiene ese mismo número que ellos (getElementById).

    Si ambas imágenes tienen el mismo identificador, el efecto no funcionará o lo hará mal. Si algún onmouse tiene un número que no se corresponde con una imagen existente, tampoco funcionará bien.

    En definitiva, cada número identifica una imagen y los onmouseover/onmouseout que van asociados a esa imagen. Los tres tienen que llevar el mismo número para funcionar correctamente. Pero si ahora hacemos otro efecto igual en otra imagen, necesariamente tenemos que usar otro número distinto para la nueva terna imagen, onmouseover, onmouseout.

    Una vez entendido (espero...) dónde digo número, vale cualquier combinación alfanumérica: 2156464, as52as5, pelpi, 1a1a1a...

    ResponderEliminar
  34. Ok oloman, me lo imaginaba pero necesitaba la confirmacion de un experto, saludos

    Si tienes un tiempito pasate por mi blog, la mayoria de los cambios que he hecho, o todos, han sido gracias a tus explicaciones, de verdad se te agradece tu aporte a los q como yo apenas estamos empezando en esto del blogging, sigue con tu excelente trabajo

    ResponderEliminar
  35. Me matais cuando decís lo de experto... :)

    ResponderEliminar
  36. Haaahahah Eres un amor.
    De verdad pensé que no me pescarias y no me responderias.
    Un beso grande grande desde aqui, Santiago de Chile (el fin del mundo) y luego paso para contarte como me fue.

    ResponderEliminar
  37. ¿ como logras tener imágenes que brillen al pasar el mause ? como las que tienes para suscribir a tu feed y seguir twitter arriba, quisiera hacer lo mismo pero en un espacio desubicado y al pasar el mause la imagen cambie por otra imagen diferente y de mayor tamaño.

    ResponderEliminar
  38. holaa Oloman, por favor por favor por favor ¿podria usar la imagen de sangre que tienes atrás del cuaderno de esta plantilla?

    ¿me podrias regalar el url? u.u

    ResponderEliminar
  39. Los botones que brillan están hechos en mi caso con el sistema en el que se ven los botones con la A y con la casa.

    Para hacer lo de cambiar uno por otro de mayor tamaño, puedes usar cualquiera de los sistemas. La cosa es que la imagen más pequeña sea realmente igual de tamaño que la grande, pero que lo no-dibujado vaya en transparente (gif)

    Y al que pide la sangre (que pretende ser tinta), decirle que forma parte de un dibujo mayor que forma media página. No está por separado. Lo siento.

    ResponderEliminar
  40. ¿como pongo esto en cualquier parte del blog ? como en imágenes desubicadas.

    ResponderEliminar
  41. Eso ya es algo más complicado. Ver este post y los dos sucesivos.

    ResponderEliminar
  42. Oloma, una vez mas yo molestandote pero te necesito...!

    mira lo que yo quiero hacer es que este elemento funcione en la cabecera de mi pagina, osea editando desde la plantilla no se si me comprendes... yo lo que quiero es que la imagen que tengo como banner en mi sitio tenga ese efecto.
    Te muestro como es mi html

    /* banner */
    #header-wrapper {
    clear: both;
    width: 880px;
    height: 250px;
    padding: 0 40px;
    margin: 0 0 5px 0;
    background: url(MI-BANNER.PNG) no-repeat;
    }

    ahi es donde quiero que aparezca el efecto, porfavor ayudame ;)

    ResponderEliminar
  43. Suponiendo que tu cabecera contenga un enlace a la página inicio que es lo que pasa habitualmente, tendrías que añadir dos clases más.

    #header-wrapper a {
    background: url(MI-BANNER.PNG) no-repeat;
    }

    #header-wrapper a:hover {
    background: url(MI-otroBANNER.PNG) no-repeat;
    }

    ResponderEliminar
  44. mmm.. no me funciono :(
    Gracias igual... ninguna otra sugerencia?

    ResponderEliminar
  45. Que habilites tu perfil para poder ver tu web o me pongas un enlace, porque entre tantos que sois, no recuerdo el tuyo ;)

    ResponderEliminar
  46. Hola Oloman,

    he utilizado el primero de los trucos del rollover y funciona correctamente. El problema está en que el botón con rollover aparece separado en la sidebar de los demás que no tienen rollover. ¿Cómo puedo hacer para que los botones con rollover se queden pegados unos encima de los otros como los que no tienen hecho este "truco"? Mi blog es http://blogtriforce.blogspot.com/
    Muchísimas gracias, como siempre

    ResponderEliminar
  47. Hola Pjehmaster. Si te refieres a los que has puesto a la derecha y en concreto al que tiene el rotulo "General", ahora mismo se ve en su sitio y con el mismo espacio entre botones que los otros.

    ResponderEliminar
  48. jajajaja, ¿por qué siempre se me va mal y a ti bien? Voy a ver si es que no tengo el último IE porque esto no es normal. Muchísimas gracias por responder tan rápido.

    ResponderEliminar
  49. Hola Oloman
    estoy creando mi sitio web y utilise el primer codigo de rollover para un boton del menu el efecto funciona bien pero la imagen aparece con un border y decala todos los otros botones este es el tamaño y alineacion que quiero darle a mi imagen
    BORDER="bb"VSPACE="1" HSPACE="45" heigth="20" width="200"
    cuando la aplico funciona bien pero el rollover desaparece.
    existe alguna solucion???

    ResponderEliminar
  50. Hola
    Debes meter el estilo que quieras forzar, dentro de la etiqueta IMG. Así, si no quieres borde...
    < img border="0" src=".... etc.

    ResponderEliminar
  51. ok muchas gracias ....el blog esta muy bueno ...perdon por la pregunta pero no conosco mucho en programacion.
    bueno estoy poniendo el rollover en los botones del menu y el primer y el segundo boton funcionan bien pero el tercero se combina con el segundo ,,, osea cuando paso el mouse por el segundo boton cambia la imagen del tercer boton

    probe cambiando el identificador unico pero el problema continua..
    si tienes alguna sugerencia oloman por favor!

    ResponderEliminar
  52. Lo que dices tenía pinta de que fuera problema de identificación de botones-enlace, pero si comentas que no es eso, necesitaría verlo. El blog de tu perfil no tiene ningún botón de este tipo.

    ResponderEliminar
  53. La verdad me sorprendiste.
    Eres el mejooooooooooor!!!!!
    Graciasss!

    ResponderEliminar
  54. Ola Oloman, una pregunta... porqué si pones dos imagenes... una de las dos cambia y se pone en el sitio de la otra??

    Gracias de Antemano. Un saludo

    ResponderEliminar
  55. Facundo, no es una sorpresa. Es HTML y JavaScript :D

    Probando111111111111, supongo que te refieres al primer código que se comenta para hacer un rollover con dos imágenes.
    La cosa se basa en los eventos onmouseover y onmouseout. Cada uno indica una acción que se desea realizar para cuando se pone el puntero ENCIMA de algo y FUERA de algo, respectivamente. En el caso indicado, lo que hacemos es conseguir el elemento con el IDENTIFICADOR utilizado y asignarle una imagen (.scr). Con cada uno de los eventos utilizamos una imagen distinta y así es como se produce el efecto rollover.

    ResponderEliminar
  56. Oloman he colocado el primer código en el header del blog,he conseguido poner los enlaces pero no me cambia al segundo icono cuando le paso el mouse.El header lo tengo dividido,no se que puede pasar,ayuda por favor.

    ResponderEliminar
  57. Se me olvidaba ¿que tengo que añadir para que cuando pase el mouse por encima salte una leyenda en cada icono ? gracias.

    ResponderEliminar
  58. Me parece que has mezclado alguna comilla simple con doble o algo así, porque se te ha desbarajustado todo el código. Si lo editas podrás ver que no es el que pusiste Juan Martin. Este es el que tienes que poner:
    <a href="http://twitter.com/checkapps" onmouseout="getElementById('1234').scr='http://3.bp.blogspot.com/_2TTDa66qlWU/TRpX74yz3VI/AAAAAAAAAg4/h1Ra0RE6adA/s100/twitter.png';" onmouseover="getElementById('1234').scr='AQUI LA DIRECCION DE LA IMAGEN ALTERNATIVA';">
    <img id="1234" title="TEXTO AL PASAR EL PUNTERO" src="http://3.bp.blogspot.com/_2TTDa66qlWU/TRpX74yz3VI/AAAAAAAAAg4/h1Ra0RE6adA/s100/twitter.png"/></a>

    Verás que he insertado una propiedad TITLE en la imagen (IMG). El texto que pongas ahí será lo que salga al pasar el puntero por encima de la imagen.

    ResponderEliminar
  59. Así da gusto hacer cualquier cosa en un blog,muchas gracias por la pronta respuesta,lo pruebo ahora mismo.

    ResponderEliminar
  60. Lo he vuelto a editar y sigue sin aparecer la segunda imagen,el código esta dentro de un DIV por si te sirve de ayuda,la leyenda si aparece.

    ResponderEliminar
  61. Sigue la cosa esturreada. Por más comprobaciones que he hecho, no veo dónde está la errata, pero copia y pega esto tal cual:

    <a href="http://twitter.com/checkapps" onmouseout="getElementById('1234').src='http://3.bp.blogspot.com/_2TTDa66qlWU/TRpX74yz3VI/AAAAAAAAAg4/h1Ra0RE6adA/s100/twitter.png';" onmouseover="getElementById('1234').src='http://3.bp.blogspot.com/_2TTDa66qlWU/TRpX8B3Go8I/AAAAAAAAAhI/gD6VVZFdPKo/s100/rss.png';"><img title="Twitter" id="1234" src="http://3.bp.blogspot.com/_2TTDa66qlWU/TRpX74yz3VI/AAAAAAAAAg4/h1Ra0RE6adA/s100/twitter.png" /></a>

    Eso seguro que funciona. Luego sólo sustituye la imagen de RSS por tu segunda imagen. Con los otros dos enlaces lo mismo, pero con otros ID distintos.

    ResponderEliminar
  62. Al comprobar el código cuando guardo la plantilla se visualizan nuevos elementos (&apos)que se colocan automaticamente al guardar la plantilla delante de la numeración y las dos primeras url de imagenes :

    He probado el código en el html de la sidebar agregandolo como archivo html manteniendo el otro código en la plantilla.Me aparecen en los dos sitios (header y sidebar)y cuando paso el mouse sobre los iconos del header si se cambian de color.

    ResponderEliminar
  63. Oloman ya lo he conseguido por fin agregando un b section en la plantilla,muchas gracias por toda la ayuda que nos ofreces.

    ResponderEliminar
  64. Juan Martin, ya he visto que funcionan.

    De todas formas aclaro la cosa porque con tu penúltimo mensaje comprendí cual era el problema. No se redacta igual en plantilla que en un gadget. Cuando añadiste un sección, realmente convertiste la cabecera en un gadget y por eso te funcionó.

    Para que ese mismo código corra correctamente en la plantilla, hay que cambiar todas las comillas dobles (") por simples (') y todas las simples por &quot;

    Y eso para cualquier tipo de código.

    ResponderEliminar
  65. Gracias por la info,ha sido un error mío no especificar que estaba trabajando en la plantilla,gracias de nuevo y felices fiestas..

    ResponderEliminar
  66. GRACIAS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    ResponderEliminar
  67. Hola Oloman.
    A ver, tengo un "leer más" al que me gustaría darle vidilla agrandando la imagen al paso del ratón y a los iconos de categorías en el title (que ya recordarás) también, la duda está en donde tengo que colocar el código en ambos casos... o lo que sea, que de sofás entiendo un rato, pero en estos menesteres soy el más torpe de los que anuncias en tu cabecera.
    Un saludo.

    ResponderEliminar
  68. ... y otra cosa, ¿por qué no sale mi avatar en tu página y en alguna otra?, ¿debería cambiarme el nombre por Invisibleworkerman? :)

    ResponderEliminar
  69. Tapestryworkerman, no sé cómo tienes montado ese leer más, pero si es cómo creo, puedes probar con insertar esta clase:

    .jump-link a {background:url(DIRECCION IMAGEN NORMAL);}
    .jump-link a:hover {background:url(DIRECCION IMAGEN HOVER);}

    Pero no confíes mucho en el resultado porque ese tipo de salto no lo he usado nunca y no sé de que manera insertaste la imagen. Esto creará una de fondo que cambiará al pasar el puntero por encima de ella.

    Sobre las imágenes de las categorías, en la matriz del script y para cada imagen, incluye un class="efecto":
    imagenes[1] = &quot;<img class="efecto" src='URLimagenETIQUETA1' style='float:left;display:block;border:solid 1px;' title='Categoría: ETIQUETA1'/>&quot;

    Luego creas las clases...
    .efecto {}
    .efecto:hover {}
    ...y les pones distintas propiedades según quieras. Por ejemplo distintos WIDTH o transparencia.

    Lo del avatar no tengo ni idea. Repasa tu cuenta Google a ver cómo tienes el tema del avatar.

    ResponderEliminar
  70. Hola Oloman.
    Tengo que decirte que me he quedado peor de lo que estaba, no entiendo este idioma por mucho que lo intente.
    He buscado en la plantilla y he encontrado esto:

    ...b:if cond='data:post.hasJumpLink'>
    <(...) class='jump-link'>
    <... src='http://img515.imageshack.us/img515/2426/leermsm.png'/>

    No sé si te servirá de algo, pero en el caso de ser lo que creías, ¿dónde debo insertar esto?:
    .jump-link a {background:url(DIRECCION IMAGEN NORMAL);}
    .jump-link a:hover {background:url(DIRECCION IMAGEN HOVER);}

    En relación a las etiquetas, estamos en las mismas, no sé ni donde ni cómo insertar las clases .efecto que me dices y mucho menos darle propiedades.
    Ya lo siento, pero soy un negado en estas lides.
    Gracias por todo.

    ResponderEliminar
  71. Vale, Tapestryworkerman, ya tengo más pistas. Supongamos que conservas esa imagen que usas y ahora creas otra para el efecto (leermsm2.png).
    Primero antes del cierre /b:skin, insertas esto
    .jump-link {width:120px;height:51px;display:block;}
    .jump-link a {background:url(http://img515.imageshack.us/img515/2426/leermsm.png);}
    .jump-link a:hover {background:url(DIRECCION IMAGEN leermsm2.png);}
    Con eso tendrás un 'cuadro' de 120x51px y un fondo igual al de tu imagen actual. Cuando se pase el puntero por encima, se 'activará' el HOVER y el fondo cambiará a la segunda imagen.
    Ahora falta quitar la imagen que pusiste de la parte HTML. Para eso, simplemente quita <... src='http://img515.imageshack.us/img515/2426/leermsm.png'/>
    Y ya está...

    Con las clases EFECTO igual, hay que meterlas antes del cierre del SKIN.

    ResponderEliminar
  72. Lo he repensado, Tapestryworkerman. De todo lo escrito, sólo quédate con la última línea. Lo demás lo reescribo próximamente en un post, que es algo más complicado de lo que creía... pero no mucho ;)

    ResponderEliminar
  73. Hola Oloman.
    Ya me daba por vencido,pero me has dado una alegría de dimensiones considerables... ya estoy esperando el día del post ;)
    Gracias de nuevo.
    Un saludo.

    ResponderEliminar
  74. Hola, ya estoy de nuevo por aquí.
    ¿Tengo que poner esto en cada etiqueta?:
    .efecto {background:url(DIRECCION IMAGEN NORMAL);}
    .efecto:hover {background:url(DIRECCION IMAGEN HOVER);}
    ¿O esto otro?:
    .jump-link a:hover {
    background:url(http://4.bp.blogspot.com/-d2UnnFjI4d0/TVhd91PuRqI/AAAAAAAANBY/oQbqZXeQbgA/s400/leermas2.gif) no-repeat;
    }
    ... ¿y luego añadir el .efecto antes del cierre del skin?
    ¿O ninguna de las dos es la buena?
    Soy un mar de dudas, ya me dirás.
    Un saludo y gracias por tu paciencia infinita ;)

    ResponderEliminar
  75. ¿Te parece que sigamos esta conversación a partir de esta entrada Tapestryworkerman?

    ResponderEliminar
  76. hola majo.
    como siempre que paso por aquí, lo primero darte las gracias por toda la ayuda que nos prestas.

    y ahora te cuento lo mío: en la última fase de pruebas, estoy intentando aplicar el efecto "rollover" en una portada de blog, que he preparado como DIV siguiendo otra explicación tuya. la portada y todos los enlaces se comportan según lo previsto, pero el rollover nada.

    lo estoy haciendo con la primera opción, usando dos imágenes. ya he probado a reemplazar las comillas según el comentario (64) y menos aún, me da el siguiente mensaje:
    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: Open quote is expected for attribute "{1}" associated with an element type "href".


    si le puedes echar un vistazo, a ver si se te ocurre algo antes de empezar a probar los métodos alternativos, ya que me ha llevado bastante trabajo (espero que se note ;-) y no quisiera repetirlo...

    ResponderEliminar
  77. Hola Ricardo. El error ese se refiere a las comillas. Al meter el "botón" dentro de la plantilla, el código exacto sería así:
    <a href='URLenlace' onmouseout='getElementById(&quot;IdentificadorUnico&quot;).src=&quot;URLimagenORIGINAL&quot;;' onmouseover='getElementById(&quot;IdentificadorUnico&quot;).src=&quot;URLimagenBIS&quot;;'>
    <img id='IdentificadorUnico' src='URLimagenORIGINAL'/>
    </a>
    Copia, pega y luego sustituye los ID y las direcciones del enlace y las imágenes.

    Una vez que veas que el primero te funciona, haz lo mismo con el resto. No olvides que las otras imágenes/enlaces deberán llevar unos ID distintos.

    Y sí, la portada te ha quedado genial :D

    ResponderEliminar
  78. GRACIAS!!!
    ya veo dónde estaba el problema, yo aplicaba el cambio de las comillas al DIV entero y por eso daba el error en blogger. al final, por la impaciencia, cambié y lo hice todo con el último truquillo de transparencia y ya está la página 100% operativa (megustanlascamisetas.com). bueno, pero siempre en re-construcción, jeje...
    creo que, ahora que sé cómo, voy a combinar las dos opciones: dejaré la parte principal como está con transparencias y los botones de abajo los haré con dos gif como era mi intención inicial.

    ¡¡MUCHAS GRACIAS DE NUEVO!! ¡¡IMPRESCINDIBLE TU AYUDA!!

    ResponderEliminar
  79. No hay de qué. Ya veo que está hecho Ricardo.

    ResponderEliminar
  80. HAST AAHORA ESTOY PEOR QUE HACE 10 MINUTOS. TENGO DOS IMÁGENES EN UNA CARPETA QUE ESTA EN MI ESCRITORIO.... ESA CARPETA TIENE DOS IMAGENES PARA UN ROLLOVER DE UN BOTON EN MI PÁGINA. Perdón por la mayúscula, si borro se me va la idea. Necesito, si alguien puede claro, el código exacto para insertar mis dos imágenes sin tanto rollo porque no entiendo ni "J" He estado trabajadno con html pero ésto ya me ha calentado la cabeza y no doy. hay muchos codigos por ahi que dicen son la solución peor no explican donde exactamente debo meter el nombre de la imágen y la ubicación de cada uno. Cabe mencionar que .... la ubicación que le de ahora, no será la definitva pues tengo ke subirla a un servidor, supongo que cambia la dirección de ubicación??? OJALÁ alguien me pueda ayudar. De antemano MIL GRACIAS.

    ResponderEliminar
    Respuestas
    1. Tendrías que usar el primer código de esta entrada y sustituir URLimagenORIGINAL (esta está en dos sitios) por la dirección de una imagen y URLimagenBIS por la de la otra. No olvides cambiar también URLenlace por el destino del botón.

      Eliminar
  81. Hola Oloman, gracias por el tutorial. He conseguido hacer el menú pero cuando pones el ratón encima de cada botón, a la izquierda de la imagen sale un pequeño subrayado, no debajo de la imagen sino a continuación, que parece del link... en la primera imagen de la izquierda no aparece pero en las restantes sí... ¿cómo hago para quitarlo? muchas gracias

    ResponderEliminar
    Respuestas
    1. Pásame un dirección dónde pueda ver eso, Olga.

      Eliminar
  82. Hola Oloman, quisiera saber si con el tutorial que has mostrado se puede crear algo como esto:
    http://www.designsave.net/preview?theme=free-anime-visual-blogger-template&l=2025

    al pasar el cursor por iconos situados en la parte de la cabecera (icono RSS, icono Mensaje), éstos crean otra imagen pero se desplaza a la derecha, dando la sensación de que la chica de Anime esté hablando jejejejeje :3


    "onmouseover"

    ResponderEliminar