Anteriormente vimos cómo cambiar una imagen por otra al pasar el mouse utilizando un script. Pero para quienes al igual que yo les gustan las cosas sin tantas complicaciones, veremos una forma simplificada de tener el mismo efecto, sin scripts, usando un sólo código.
Este es un ejemplo, pasa el cursor sobre la imagen para que cambie.
Sólo basta que pongas este código en una entrada o un elemento HTML/Javascript:
<img src="URL de la imagen UNO" onmouseover="this.src='URL de la imagen DOS';" onmouseout="this.src='URL de la imagen UNO';"/>
Cambia lo que está en rojo por la URL de la imagen que tendrás inicialmente, y lo que está en verde por la URL de la imagen que cambiará al pasar el mouse. Trata que las dos imágenes tengan el mismo tamaño para conseguir un mejor resultado.
Puedes usarlo para hacer algún menú o para mostrar fotos de "antes y después".
Ciudad Blogger
si esta muy bueno este script, aparte que es mucho mas simple.
ResponderEliminarSaludos.
si señor muy bueno el truco y además muy sencillo
ResponderEliminarsobre todo me encanta por la sencillez.a proposito se podría hacer algo parecido que cambie la imagen sin necesidad de tener que pasar el mouse.Saludos
Hola pepe, seguro será de mucha utilidad =)
ResponderEliminarSaludos.
Hola Guti, en ese caso podrías usar un banner cambiante, ahí puedes poner las imágenes que quieras y cambian automáticamente:
http://ciudadblogger.com/2009/04/banner-cambiante.html
Saludos.
Hey potro, esta muy buena la ciudad para el mobile.
ResponderEliminarSaludos.
Hola pepe,
ResponderEliminarGracias, apenas hoy lo hice. El fin de semana publico cómo hacerlo.
Saludos.
Mae esta muy bueno esas imajen.
ResponderEliminarHola por aca. . . . que linda ha quedado, tu casa, jajja, me gustan mucho tus cambios.-
ResponderEliminarLo del ratón. . . . lo voy a intentar. . .
La verdad, tu haces ver facil, todo.-
Muchos cariños
Anne
Todo lo dijo Anne!!!
ResponderEliminarHola ARMANDOKUN, igual a mí me gustaron las imágenes =)
ResponderEliminarSaludos!
Hola Anne, qué bueno que te gustó cómo quedó la nueva plantilla. Lo de las imágenes es muy simple, así que espero que no se le complique a nadie.
Cariños!
Hola Emanuel, gracias por comentar =)
Saludos!
Te quiero agradecer todo, todo todo lo que haces por gente como yo, que sabiendo poco, se cree que sabe mucho. He aprendido mucho aquí y espero seguir aprendiendo. Tanto sé, que me doy el lujo de sugerirte que la primera foto, debería haber sido de una persona encendiendo para luego ver el esqueleto. De todas maneras solo es una opinión. Este blog es el mejor que hay en toda la blogófera y no exagero, me estoy armando varios blogs y estoy "recorriendo" mucho. En el blog de trucos que estoy preparando, colocaré un banner destacado de ustedes a modo de agradecimiento. Un saludo gran y de nuevo, muchas gracias!
ResponderEliminarHola Amelio Luna,
ResponderEliminarEn algún momento todos nos damos cuenta de que sabemos muy poco y que aún hay mucho por aprender, lo importante es saber que siempre se puede aprender más.
Las fotos no son mías, la verdad es que no sabía qué imágenes poner de ejemplo y de casualidad me encontré la segunda y luego buscando más fotos me encontré en otro sitio la primera, pero ya no pude saber si las dos están hechas por casualidad o son una serie de varias fotos =S
Mucha suerte y éxito con tus blogs y gracias por el banner y por tus comentarios.
Cualquier cosa estoy a tus órdenes.
Saludos!
gracias!!!!
ResponderEliminaryo necesito hacer una especie de menu con este codigo que tu das, pero a su vez, lo meto dentro de este que permite abrirlo en otra ventana lo hago con lo que me dan aqui:http://soporte.miarroba.com/1368/6772545-como-hago-para-que-se-habra-otra-ventana/
por seperado me salen los 2 y juntos no. solo sustitullo donde dice imagen por el codigo que tu das y logicamente tendria que salir!!!
sabes la solucion!!!???
Hola Disniruña,
ResponderEliminarTendrías que usar este código:
<a href="URL del enlace" target="_blank"><img src="URL de la imagen UNO" onmouseover="this.src='URL de la imagen DOS';" onmouseout="this.src='URL de la imagen UNO';"/></a>
Saludos.
muchísimas gracias por esta información! por esta y por todas, lo haces todo tan sencillo... de veras, gracias!!!
Eliminarsiento no haberte podido dejar el codigo que usaba, pero esto no me dejaba.
ResponderEliminarese es es codigo que utilizo, es de logica pensé que el codigo de lo de las 2 fotos vaya en el lugar de la foto del codigo 2.
pero no me funciona. por separado me van bien.
lo has probado? es que ya no entiendo por que me pasa. tendría que funcionar.
Hola Disniruña,
ResponderEliminarCon el código que te di funciona, dime qué imágenes deseas usar en un ejemplo y a dónde debe enlazar para que te dé el código y con ese te bases para hacer los otros.
Saludos.
por ejemplo:
ResponderEliminarhttp://img41.xooimage.com/files/3/8/3/tematicos-agua-151fd5c.jpg
y
http://img45.xooimage.com/files/5/d/7/tematicos-agua2-151fd70.jpg
y por cierto muuuuchas gracias por la atención si no lo habia dicho antes
ResponderEliminarsoy disniruña desde otra cuenta.
gracias gracias gracias
Hola de nuevo =)
ResponderEliminarNo me dijiste a dónde debe enlazar así que puse como ejemplo a CiudadBlogger, el código sería este:
<a href="http://ciudadblogger.com" target="_blank"><img src="http://img41.xooimage.com/files/3/8/3/tematicos-agua-151fd5c.jpg" onmouseover="this.src='http://img45.xooimage.com/files/5/d/7/tematicos-agua2-151fd70.jpg';" onmouseout="this.src='http://img41.xooimage.com/files/3/8/3/tematicos-agua-151fd5c.jpg';"/></a>
De esta forma la imagen cambia por otra al pasar el mouse y la URL del enlace abre en otra ventana al hacer click.
Saludos.
por fin me funciona!!! gracias!!!!
ResponderEliminaraun a riesgo de parecer inutil, esta es la que ponia yo:
http://img41.xooimage.com/files/a/4/b/sin-t-tulo-1-152c4c3.jpg
(no me deja ponerlo en el comentario, os mando la imagen)
y yo la veo igual por más que la miro, hay algun detallle que se me escapa y no lo consigo ver. he sido muy malo siempre en esto de las 10 diferencias!
Jajajaja, yo también era malo buscando las 10 diferencias.
ResponderEliminarEl problema (y que es muy común) es que no ponías un espacio entre la URL del enlace y el target="blank" por eso es que no funcionaba. Tienes que dejar ese espacio en blanco para que funcione apropiadamente.
Saludos!
espectacular.
ResponderEliminarhas ganado un lector más
Hola Nosotros mismos,
ResponderEliminarQué gusto que te haya sido útil.
Bienvenido!
Estimado Potro, gracias por poder compartir con nosotros tus conocimientos, tengo una pregunta yo soy un novanto en esto y disculpa mi ignorancia, en este post cuando decis que cambie la url de la imagen, tengo que subir mi imagen a un servidor o la imagen la extraigo de mi compu, podes hacer el favor de aclararme eso.
ResponderEliminarSaludos
Benjamín
Hola José,
ResponderEliminarPuede ser cualquiera de las dos opciones, si ya tienes una imagen en un servidor usa esa imagen, si aun la tienes en tu compu súbela a un servidor y obtén su URL.
Saludos.
exelente :D
ResponderEliminarotra vez gracias :)
ResponderEliminaruna pregunta..
ResponderEliminarsi esta alojada en mi servidor (images/...)
porque no me funciona¿?
Eso sólo serviría si tu servidor fuera así:
ResponderEliminarhttp://tublog.com/images
Pero en Blogger eso no se puede, pues el servidor es blogspot y la única forma que se suben fotos desde ahí es con Picasa.
¿Como hago esto y que tenga un enlace que se abra en una nueva pestaña?
ResponderEliminarSólo encierra el código de la imagen así:
ResponderEliminar<a href="URL del enlace" target="_blank">
...código de la imagen...
</a>
Hola Potro,
ResponderEliminarante todo, mil gracias por la tarea que realizas de ayudar a los más novatos... Incluido un servidor! :)
Llevo unas semanas arreglando mi blog y no hay manera de conseguir que la plantilla de blogger que uso me permita hacer esta acción de cambiar la imagen al pasar por encima. Com este método que comentas tampoco me sale!!! Eso si, creando un gadget con un html y metiendo ahí el codigo no hay problema! Necesito poder incluirlo en la plantilla... Se te ocurre algo de lo que le pueda pasar a mi plantilla!!!!
Un fuerte saludo des de Barcelona!
Por cierto, el bloc en cuestión está oculto, por eso no he mandado la dirección.. Si hace falta cualquier cosa te la mandaré sin problema!!!
ResponderEliminarHola Sant Gaudenci,
ResponderEliminarEntra a esta página:
http://www.blogcrowds.com/resources/parse_html.php
Ahí pon el código para cambiar la imagen incluyendo las URLs de las imágenes, dale click en Parse y copia el código que saldrá, ese código úsalo directo en la plantilla, de esa forma sí funcionará.
Saludos.
Hola Potro!
ResponderEliminarMuchissimississimas gracias por el consejo!!! Lo he seguido y me ha ido de maravilla.... Com Mozilla Firefox. En Explorer no hay manera! Sabrias decirme porque??
Saludos y gracias de nuevo!!!
No lo sé, debería funcionar también en Internet Explorer :(
ResponderEliminarDebería.. pero no lo hace!!!! Mira que es complicado el mundo del código, eh???? :D
ResponderEliminarGracias por tu atención y supongo que hasta muy pronto!!!!
Hola Potro,
ResponderEliminarVuelvo a ti cada vez que necesito ayuda con mi bitácora. Mi cuestión es la siguiente:
Quiero poner una lista de nombres de personas y que al pasar el ratón sobre cada uno de los nombres aparezca una imagen flotante al lado derecho con la foto del individuo en cuestión.
¿Cómo lo hago?
Gracias de antemano.
excelente post
ResponderEliminarRicardo Baena, quizá puedas usar este método que es para agrandar una imagen, sólo que en tu caso usarías un texto (el nombre de la persona) y la imagen que se agrandará será la foto de esa persona.
ResponderEliminarMuchas Gracias. Había buscado en el blog a ver si encontraba algo pero no daba con la tecla. El método funciona a la perfección.
ResponderEliminarNo se que haría sin ti. :P
Perfecto Ricardo, me imaginé que ese te sería útil ;)
ResponderEliminarHola Potroa,
ResponderEliminarMe leido tu entrada para ver si en ella podria encontrar alguna idea que me aclarara respecto a lo que quiero lograr.
Por favor, necesito una ayuda en:
Quiero lograr mostrar/ocultar una imagen al marcar/desmarmar una casilla de verificacion. Llevo varios dias en esto y no he podido solucionarlo. He intentado muchas cosas, pero hasta ahora solo he logrado presentar la imagen oculta pero al marcar la casilla no se habilita la imagen.
En terminos de programacion escrita, te diria, que necesito:
evento 1: mostrar casilla verificacion + texto + imagen ("hidden", sin href);(esto lo he logrado).
evento 2: si la casilla de verificacion es "true" mostrar evento 3 y si es "false" mostrar evento 1.
evento 3: mostrar imagen "visible" + href
Muchas gracias
Supongo que eso puede hacerse con un script pero desconozco cómo sería la programación de dicho script.
ResponderEliminarEn forosdelweb.com seguro podrán orientarte mejor.
Hola Potro,
ResponderEliminarMuchas gracias por tu respuesta.
Por favor, tengo un gran problema: me registré gratis en 250free.com y alojé allí todas mis imagenes y archivos, y desde ayer esta fuera de servicio y no me dan explicaciones. Podrías recomendarme algun alojamiento (gratis, de momento) que pueda registrarme y redireccionar mis enlaces hacia allí.
Lo otro es, deseo ocultar los titulos de las paginas estaticas al ser cargadas, es decir cuando pinchas la pagina estatica, y te sale, aparece el titulo en la "entrada", eso no quiero mostrarlo. Si esto no es posible, cómo se puede enlazar una pagina estatica con una entrada, de manera que cuando pinchas la pagina estatica te salga dicha entrada.
Muchas gracias por todo.
Hola DaycareWeb,
ResponderEliminarPues hay varios servicios de alojamiento gratuito, en lo personal uso Dropbox y me ha salido bien, pero igual puedes probar otros como Google Sites.
Acerca del título en las páginas estáticas deja que entre hoy y mañana lo publique porque igual varios lectores me lo han estado pidiendo.
¡Saludos!
Hola Potro,
ResponderEliminarGracias por este truco!
Lo he utilizado para hacer un menú pero, aunque lo tengo dentro de un gadget, le tengo esta característica para que quede fijo al lado izquierdo del blog:
style="display:scroll;position:fixed;top:310px;left:0px"
En los navegadores y iPhones va de lujo. El problema que tengo es que cuando lo visualizo en un Blackberry, en el momento de hacer zoom in, los botones desaparecen y queda en reemplazo el texto "Click here"
Sabes de alguna solución para esto? Me serviría mucho porque lo BBs son muy importantes para mi blog.
Muchas gracias de antemano,
No tengo idea, en el caso de los navegadores de telefonía móvil así como sus sistemas operativos no tengo conocimiento :(
ResponderEliminarHola Potro.
ResponderEliminarMe pregunto si se puede hacer el efecto en la imagen "leer más" que tengo y en los botones de categorías en el title de las entradas, de poderse, ya me dirás cómo y dónde poner lo que sea... ya sabes de mi ignorancia.
Un saludo y gracias.
Hola ,
ResponderEliminarCon este método no, pero en esta entrada de Leer más se menciona cómo hacer para que el enlace de Leer más tenga estilos distintos en forma normal y al pasar el cursor. Lo único que tendrías que hacer es que en lugar de darle un color de fondo pongas la URL de una imagen, tanto para el estado normal del enlace como al pasar el cursor.
Saludos.
Hola Potro.
ResponderEliminarLa imagen de "leer más" la puse siguiendo tus pasos: (http://ciudadblogger.com/2009/11/personalizar-enlace-de-leer-mas.html)
Lo que no sé es que parte del código tengo que pegar, ni donde, para que al pasar el cursor cambie por otra imagen.
No sé si me hago entender, ya perdonarás.
Un saludo.
Sólo tienes que cambiar:
ResponderEliminarbackground: #04B4AE; /* Color de fondo */
Por:
background: url(URL de la imagen);
Lo mismo con:
background: #045FB4; /* Color de fondo al pasar el cursor */
Pero ese enlace es para el Leer más de Blogger, si es el Leer más automático entonces es lo mismo pero con las indicaciones que vienen en el enlace que te refería en el otro comentario.
Saludos.
Hola Potro.
ResponderEliminarComo comentas, es el "leer más" de blogger.
He copiado el código donde indicas y he cambiado los background, el resultado es que me lo ha cambiado de sitio desbarajustando los enlaces, los botones y el "publicado por..."
Me pregunto si es necesario todo el código, ya que me pide color de texto, bordes y márgenes cuando lo que quiero es que cambie una imagen:
.jump-link a {
color: #FFF; /* Color del texto */
text-decoration: none;
font-weight: bold;
Y es que sólo tuve que poner esto para cambiar el texto por la imagen:
Seguramente en algún sitio meto la pata y deba cesar en mis propósitos.
Ya me dirás maestro...
Un saludo.
... Y es que sólo tuve que poner esto para cambiar el texto por la imagen:
ResponderEliminarimagensrc="URL de la imagen"/
No me ha dejado publicarlo antes, ya perdonarás.
A ver, va de nuevo.
ResponderEliminarPon este código:
.jump-link {
float:right;
background: url(URL de la imagen);
width:90px;
height:25px;
padding: 1px 2px;
margin-left:20px;
}
.jump-link:hover {
background:url(URL de la imagen al pasar el mouse);
width:90px;
height:25px;
text-decoration:none;
}
En donde se indica debes agregar las URLs de las imágenes tanto en modo normal como al pasar el cursor.
NO cambies el texto Leer más por una imagen, déjalo como está.
Luego entra en Diseño > Elementos de la página, click en Editar sobre Entradas del blog, y en 'Texto del enlace de la página de entrada' escribe esto:
Con eso bastará. Saludos.
Hola Potro.
ResponderEliminar¿Soy duro,eh?.
Muchas gracias por tu atención. De momento me lo guardo en la lista de asuntos pendientes, para cuando me pille con más ganas de complicarme/te la vida :)
Lo dicho, gracias y hasta la próxima.
Un saludo.
No te preocupes, ya sabes que si se te ofrece algo y está en mis manos ayudarte con mucho gusto lo haré ;)
ResponderEliminarUn saludo.
Gracias Potro.
ResponderEliminarLo mismo digo, cuando necesites un tapicero ya sabes donde estoy ;)
Un saludo.
potro como esta puedes pasarme tu email
ResponderEliminarpara poder plantearte un problema acerca a de este codigo .... eh revisado los comentarios y no hay nada sobre esto espero me puedas ayudar
Hola Pornsynth!,
ResponderEliminarTodas las preguntas referentes a un tema de una entrada se hacen en la misma entrada para darle el seguimiento adecuado y para que pueda servir a otros quienes tengan el mismo problema.
Sólo dime cuál es el problema exacto que tienes con el código y en cua´l blog lo estás tratando de poner.
Saludos.
Hola Potro,
ResponderEliminarComo estas?..
Tengo una pregunta. No es exactamente este post, pero esta relacionada con la imagen del perfil que quiero que cambie..
Yo tengo 2 blogs entrelazados y en ambos tengo la misma foto. Es posible cambiar la foto del perfil de uno de los blogs sin que cambie la de la otra?>
Lo he intentado y no me deja. A lo mejor es que no se puede y tengo que crear un nuevo blog con un password diferente.
Un saludo y muchas gracias..
Tu seguidor fiel,
Jose
Hola Jose,
ResponderEliminarYa te he respondido esa pregunta en la otra entrada ;)
Saludos.
Buenos dias Potro,
ResponderEliminarAy, perdona!. En alguna ocasion me dio un error y lo envie por duplicado.
Perfecto!.. Si no se puede, un problema menos!.
Muchas gracias.
Jose
hola amigo Potro .. me gustaria saber qual es el codigo para hacer esto de camciar la imagen pero que tenga un link para la misma pagina y NO para otra ventana si no en la misma
ResponderEliminarMira el comentario #13, ahí está el código para que la imagen tenga un enlace, sólo elimina de ese código esto para que no abra en otra ventana:
ResponderEliminartarget="_blank"
muchas gracias (H) sige asi
ResponderEliminarLo que tambien se puede hacer es cambiar el mouse aqui: http://www.totallyfreecursors.com/
ResponderEliminara mi que me gusta tener muchas imagenes, ahora no se veran tan simples..!! Sencillo pero Muy Vistoso.
ResponderEliminarSaludos..!
A veces lo sencillo puede dar resultados sorprendentes :)
ResponderEliminarHola, Potro. Me gustaría saber si este truco puede ser aplicado a una imagen que tengo para expandir y contraer entradas cuando muestra sólo los títulos de los post. También quiero aplicar esto para la imagen que tengo en "Leer más", pero no me da resultados. ¿Por qué crees que pase esto?
ResponderEliminarPorque son áreas distintas y por lo tanto requieren procedimientos distintos. Para que la imagen de 'Leer más' cambie por otra al pasar el cursor primero quita el texto 'Leer más...'
ResponderEliminarLuego antes de ]]></b:skin> agrega esto:
.rmlink {
float:right;
background: url(URL de la imagen normal);
width:80px;
height:20px;
padding: 1px 2px;
margin-left:20px;
}
.rmlink:hover {
background: url(URL de la imagen al pasar el mouse);
width:80px;
height:20px;
}
Ahí pon las URLs de las imágenes que quieres y cambia el ancho y alto (width y height) de la imagen.
Saludos.
Quité, como me dijiste, el "Leer más" y luego en /b:skin agregué lo demás, pero no mostró nada. Me gustaría saber también cómo cambiar de imagen al pasar el cursor sobre la imagen de expandir/contraer (aquella que sólo muestra los títulos de los post en una búsqueda). Disculpa tanta molestia, Potro. Eres muy amable. (:
ResponderEliminarHola Daniel ...,
ResponderEliminarNecesito saber en qué blog lo has aplicado para poder ver dónde puede estar el error.
En la de expandir y contraer no lo he hecho, pero supongo que sólo debes cambiar la imagen por la del código de esta entrada.
Saludos.
He intentado cambiar la imagen por el código de esta entrada, pero no funciona. Por ahora he dejado el "Leer más" automático sólo con una imagen y con opacidad. Gracias, Potro. Saludos
ResponderEliminarwww.lasnoticiasdetulum.com
Pues yo veo que el de Leer más funciona perfectamente, al pasar el cursor cambia por otro tono de verde.
ResponderEliminarEn lo otro no mencionas detalles, ¿marca algún error al ponerlo? ¿o sólo no hace nada cuando lo pones?
Si no te marca error entonces déjalo puesto para que pueda verlo. Si te marca error dime qué te marca.
Saludos.
Lo que pasa es que le había aplicado una opacidad a la imagen de "Leer más", por eso se veía así. Ahora he colocado el código que me has dicho, pero no se muestra. Y respecto a la imagen de expandir/contraer que te decía, no marca error, pero sólo se muestra la primera imagen y al pasar el puntero no muestra la segunda.
ResponderEliminarLo he dejado puesto para que veas, Potro.
Disculpa tanta pregunta de mi parte. Eres muy amable. Gracias. (:
Hola Daniel,
ResponderEliminarAhora no veo el link de Leer más por ningún lado, pero sí he podido ver que el problema al menos de que no funcionaba el código que te di es que los has colocado erróneamente. Mira esta entrada para que veas los dos errores que hay:
http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html
Lo de la otra imagen veo que al guardarlo se agregan unos caracteres (diagonales invertidas) que causan que no surja efecto, quizá primero tengas que convertir a texto plano el código de la imagen y ese código convertido ponerlo ahí en su lugar.
Prueba con eso y dime si lo resuelve.
Saludos.
Eres un genio, Potro. Efectivamente, se me había olvidado cerrar la llave de un código anterior, además de que había puesto mal unas anotaciones; y respecto a la otra imagen, bastó con que convirtiera a texto plano el código para cambiar la imagen al pasar el cursor.
ResponderEliminarMuchas gracias por tu ayuda, Potro. ¡Eres bárbaro!
Gracias, gracias. (:
Este comentario ha sido eliminado por un administrador del blog.
ResponderEliminarWow!! Esta maginifico este truquillo!!! Es lo que buscaba! Ademas tiene poco coidog, entonces no sobre carga la plantilla.
ResponderEliminarSolo una cosilla, no sabes por que en el navegador Firefox me sale un enorme espacio arriba de este efecto?
(Son los dos enormes botones al lado del buscador: http://ganardinerotrabajandoadistancia.blogspot.com/)
Si puedas echarle un ojo! Estaria genial! También te dejo la tabla por si fuera eso lo que falla:
<table width="432" height="83" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="208" height="83" align="left" valign="top"><a href="http://ganardinerotrabajandoadistancia.blogspot.com/p/inscribirse.html"><img src="http://2.bp.blogspot.com/-UlEbQFU5rx0/TrFvn-nWvCI/AAAAAAAAFEY/7PrHrq-Ocjk/s1600/Tiendas-Anunciate1.png " hspace="0" vspace="0" border="0" onmouseover="this.src='http://1.bp.blogspot.com/-SCzNrjvuc90/TrFvoRy2_hI/AAAAAAAAFEc/iCt5_zRoT8c/s1600/Tiendas-Anunciate2.png';" onmouseout="this.src='http://2.bp.blogspot.com/-UlEbQFU5rx0/TrFvn-nWvCI/AAAAAAAAFEY/7PrHrq-Ocjk/s1600/Tiendas-Anunciate1.png ';"/></a></td>
<td width="11" height="83"> </td>
<td width="208" height="83" align="right" valign="top"><a href="http://ganardinerotrabajandoadistancia.blogspot.com/p/inscribirse.html"><img src="http://3.bp.blogspot.com/-ajdHQc2NxbA/TrFvpNewdDI/AAAAAAAAFEo/e70ySxBdtbY/s1600/Tiendas-trabaja1.png" hspace="0" vspace="0" border="0" onmouseover="this.src='http://4.bp.blogspot.com/-9L0xs8Eu9jQ/TrFvp4kbSkI/AAAAAAAAFEs/peK3cxPrkbA/s1600/Tiendas-trabaja2.png';" onmouseout="this.src='http://3.bp.blogspot.com/-ajdHQc2NxbA/TrFvpNewdDI/AAAAAAAAFEo/e70ySxBdtbY/s1600/Tiendas-trabaja1.png';"/></a></td>
</tr>
</table>
Si tienes cosas mejores que hacer, porfavor no te molestes!
Las tablas suelen generar espacios aunque no sé si este sea el caso, de cualquier forma pon los códigos de la tabla todos juntos, es decir, uno detrás del otro para evitar estos espacios.
ResponderEliminar<table width="432" height="83" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td width="208" height="83" align="left" valign="top"><a href="http://ganardinerotrabajandoadistancia.blogspot.com/p/inscribirse.html"><img src="http://2.bp.blogspot.com/-UlEbQFU5rx0/TrFvn-nWvCI/AAAAAAAAFEY/7PrHrq-Ocjk/s1600/Tiendas-Anunciate1.png " hspace="0" vspace="0" border="0" onmouseover="this.src='http://1.bp.blogspot.com/-SCzNrjvuc90/TrFvoRy2_hI/AAAAAAAAFEc/iCt5_zRoT8c/s1600/Tiendas-Anunciate2.png';" onmouseout="this.src='http://2.bp.blogspot.com/-UlEbQFU5rx0/TrFvn-nWvCI/AAAAAAAAFEY/7PrHrq-Ocjk/s1600/Tiendas-Anunciate1.png ';"/></a></td><td width="11" height="83"></td><td width="208" height="83" align="right" valign="top"><a href="http://ganardinerotrabajandoadistancia.blogspot.com/p/inscribirse.html"><img src="http://3.bp.blogspot.com/-ajdHQc2NxbA/TrFvpNewdDI/AAAAAAAAFEo/e70ySxBdtbY/s1600/Tiendas-trabaja1.png" hspace="0" vspace="0" border="0" onmouseover="this.src='http://4.bp.blogspot.com/-9L0xs8Eu9jQ/TrFvp4kbSkI/AAAAAAAAFEs/peK3cxPrkbA/s1600/Tiendas-trabaja2.png';" onmouseout="this.src='http://3.bp.blogspot.com/-ajdHQc2NxbA/TrFvpNewdDI/AAAAAAAAFEo/e70ySxBdtbY/s1600/Tiendas-trabaja1.png';"/></a></td></tr></table>
No.. igual se ve con espacios! Bueno lo bueno es que me distes la idea de hacer sin tabla! simplemente con espacios!
ResponderEliminarGracias potro! Siempre de gran ayuda!
Ok, pero si no usas la tabla y quieres que queden alineados horizontalmente entonces igual que la tabla pon los códigos de las imágenes uno detrás del otro, así se ordenarán en una sola línea.
ResponderEliminarGracias el Potro! Despues de varios intentos, me di cuenta que era el script que hacia ese espacio tan raro.. entonces pondre botones sin el efecto y listo!
ResponderEliminarTambién te queria comentar algo fuera de este tema! xD
Pense mas en tu caso.. de que no te dan tantas donaciones como se quisiera, y real-mente tus ayudas son de enorme ayuda ya que casi todos hacemos mejoras para en un futuro recibir algun tipo de beneficio.
Bueno el caso es que encontre una web (www.amigos.com) donde paga 0,50$ por cada hombre que se registre y 1,50$ por cada mujer.
No hay reglas.. ya que puedes ir diciendo que se registren y nadie te penaliza.. y el regitro es muy simple y pequeño.
Entonces poner un enlace nuevemente en los comentarios con un mensaje agradable con el enlace de afiliado, pidiendo que se registren como mujer para agradecer o dejar propina... pero a ellos nos le va a costar nada.. ademas poner que los datos pueden ser falzos menos el email.. por que se tiene que validar.
Bueno yo lo probe, y ya llevo 26$ sin apenas hacer nada..
Tambiém me informe y la empresa paga, y ademas es seria y lleva mucho tiempo trabajando...
Bueno me aria ilucion que lo hicieras! Y ganaras con donaciones sin depender si el visitante tiene dinero o no.
Te dejo el registro: https://secure.amigos.com/p/partners/main.cgi
Saludos Potro! Éxitos!! Y ya ire frenando con los comentarios xdd eso era lo ultimo ;)
Muchas gracias por el tip. Aquí no creo ponerlo, pero podría probar en alguno de los otros dos blogs que tengo, con suerte y me hago de un dinerito extra :)
ResponderEliminarPor los comentarios ni te preocupes, eso es lo que mantiene con vida a un blog, así que síguele dando oxígeno :D
disculpa no me funciona tu codigo en crhome me podrias decir porque?¿
ResponderEliminareste es el codigo que menciono porfavor si me pudiese ayudar seria magnifico de antemano muchas gracias:
ResponderEliminar<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="Equipo5" name="author">
<title>Diseños Verona</title>
<link rel="stylesheet" href="Temas/GrisHome.css" type="text/css" media="all" />
</head>
<body>
<div id="panel_contenedor" name="div_contenedor" class="div_principal">
<div id="panel_superior" name="div_superior" class="div_sup">
<div id="panel_logo" class="div_logo">
<img id="img_logo" alt="" src="Imagenes/Textura1.png" class="img_logo">
</div>
<div id="menu" class="div_menu">
<a href="catalogo.html" target="_blank"><img src="Imagenes/quien.png" onmouseover="this.src='Imagenes/quien1.png';" onmouseout="this.src='Imagenes/quien.png';"/></a>
<!--
<img id="boton_Inicio" alt="" src="Imagenes/inicio.png" class="botonInicio"></a>
<img id="boton_Catalogo" alt="" src="Imagenes/recortr.png" class="botonCatalogo">
<img id="boton_Quienes" alt="" src="Imagenes/quien.png" class="botonQuienes">
<img id="boton_Contacto" alt="" src="Imagenes/contct.png" class="botonContacto">-->
</div>
El código está bien. En la primera y tercera URL que dice Imagenes/quien.png debe ir la imagen que se verá por defecto en su estado normal. Y en la segunda URL que también dice Imagenes/quien.png debe ir la imagen que se mostrará al pasar el cursor.
ResponderEliminarOOOhhh!!! tienes toda la razón, el acomodo de las imágenes y el nombramiento por mi parte estuvo mal muchas gracias y tu blog sigue asombrándome
ResponderEliminarHola Potro Puse una corona en mi blog me puedes decir por que no cambia del segundo nuevamente al primero?saludos y buen dia...quetal mis cambios?
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarPon el código así Ady:
ResponderEliminar<img src="http://www.yodibujo.es/_uploads/_tiny_galerie/200811/corona-navidad5-source_4db.gif" onmouseover="this.src='http://imagenes.gifmania.com.pr/Gifs-Animados-Navidad/Animaciones-Coronas-Navidad/corona-navidad104.gif';" onmouseout="this.src='http://www.yodibujo.es/_uploads/_tiny_galerie/200811/corona-navidad5-source_4db.gif';" oncontextmenu="alert('desactivado');return false" oncopy= "alert('desactivado');return false"/>
GRACIAS MIL POTROOOO ERES GENIAL..!!!!Y GRACIAS POR TOMARTE TU TIEMPO.. BESOS..
ResponderEliminarCONTACTO ESTA DESACTIVADO? PUES NO PUEDO ENTRAR POTRO QUERIDO...
ResponderEliminarEstá activado, lo desactivo a veces cuando se satura de correos pero ya está de vuelta ;)
ResponderEliminarok ya recibí tu respuesta, no quedó como me decías pero me dió una ayudadota .. muchas gracias..!!!Una pregunta porque mis animaciones flash de repente quedan en blanco y luego regresan o de plano se quedan unos en blanco y ya no se ven..O será que sólo yo los veo así? saludos
ResponderEliminarPuede ser tu navegador, el hosting donde estén alojados, o quizá cuando los ves al mismo tiempo tienes abiertas otras páginas o programas que consumen recursos del ordenador.
ResponderEliminarTendrías que probar verlos cuando no tengas nada más abierto, y de ser posible desde otro navegador para mirar si ahí sucede lo mismo con las animaciones.
ok .. ya le pegunté a mis contactos y todos lo ven igual osea en blanco total, los tengo en el sitio de google.. eso tendrá que ver?? en cualquier otro navegador los veo igual osea en blanco..
ResponderEliminarEntonces podría ser el código que estás usando. ¿Cuál es el blog donde tienes el problema y cuál es el gadget que aparece en blanco?
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarhttp://ady-migranespacio.blogspot.com/2011/11/bailarina-de-la-3a.html
ResponderEliminarLo primero es que tus archivos en Google Sites están como privados, así que sólo tú podrás verlos, el resto de la gente no podremos verlos hasta que cambies los permisos a Público.
ResponderEliminarLo segundo es que el código que estás usando está un tanto incompleto, mira aquí cómo sería el código que utilizarías para un archivo flash:
http://ciudadblogger.com/2009/06/insertar-banners-en-flash.html
Gracias Potro andaba perdido tu comentario.. apenas lo vi..!! un abrazo...:P
Eliminarhola! te vengo molestandoo de nuevo...
ResponderEliminares que quiero que esa imagen cuando aparesca la otra tenga un desvanecimiento. como se hace?¡?
Supongo que habría que usar un script más complejo, aunque por ahora no se me ocurre alguno :(
ResponderEliminarQUE TAL POTRO, MIRA COMO SERIA EL CODIGO PARA OCULTAR Y MOSTRAR UN BOTON DE AYUDA AL PASAR EL RATON, ESPERO ME PUEDAS AYUDAR TENGO YA EL BOTON PERO ESTATICO
ResponderEliminarNo he entendido bien, ¿me puedes dar un ejemplo?
EliminarHola Potro! quiero agradecerte este genial truco, lo he utilizado en mi blog para poner distintas imagenes retocadas de antes y depues de ser editadas, y me ha funcionado a la primera, cosa extraña en mi, queda muy efectivo visualmente y es lo que precisamente andaba buscando.
ResponderEliminarMil gracias por tu labor.
Saludos.
Hola Tesa, qué gusto que hayas tenido los resultado que esperabas ¡y a la primera! :)
EliminarGracias por tu visita.
Saludos!
Osea me refiero a que quiero tener un Boton e ayuda al lado izquierdo de mi pagina pero quiero que ese boton se esconda y al pasar el raton aparesca no se si me explique bien, en mi pagina puedes ver ese botoncito de ayuda en el lado derecho de del blog, es esta www.variedadespalencia.tk te cuento que esta hecha en un 90% con tus trucos gracias de verdad que ayudas muchisimo sigue asi hermano es muy valiosa tu ayuda
ResponderEliminarGracias por los detalles extra :)
EliminarTe había dejado un comentario haciendo referencia a otra entrada para que consigas lo que deseas, pero no me había fijado que ya estabas allá :P
Pues eso, el botón puedes hacerlo con el menú de pestañas que se esconde :)
Ola potro ayudarme quiero esto pero con un efecto de cambio de color si quieres un ejemplo mira a donde dice download en este link http://www.pixeden.com/psd-web-elements/retro-web-ribbons-vintage-psd-pack
ResponderEliminarayudame lo mas tronto ¡potro! sos el mejor!
Ese es un DIV normal, sólo que le han aplicado un color de fondo distinto al pasar el cursor. Por ejemplo:
Eliminar<div class="caja1">Descargar</div>
Y luego en los estilos especificas cómo se verá en su estado normal:
.caja1 {
background:#ccc;
width:150px;
height:80px;
}
Y luego el color de fondo que tendrá al pasar el cursor:
.caja1:hover {
background:#000;
}
me podéis hacer una entrada? Gracias!
ResponderEliminarPORTRO !
lo siento si te molesto!
No es ninguna molestia, sólo que tomará algo de tiempo porque aun tengo otras entradas pendientes :/
EliminarSaludos!
GRandiosooo *o* tengo una duda saliendome de este tema ´pero como puedo hacer "invisible" una aplicación para blogger , por ejemplo hay paginas en las que puedes poner cursores o lluvia de nieve pero tienen su respectivo logo mi duda es como puedo hacerlo invisible sin que desaparesca su funcion ,para ahorrar espacio :s
ResponderEliminarDepende de cada código, no hay una regla general ya que cada uno agrega su publicidad de distintas formas. Usualmente sólo es quitar una parte del código, pero puedes probar, ir quitando partes del código que te han dado hasta que te dé resultado :)
EliminarHola!
ResponderEliminarDisculpa, esto funciona si las imágenes son .gif?
Porque ya lo he puesto y no cambia a la imagen Dos, se queda en la uno y no entiendo cual es el problema..
Me ayuda usted?
Funciona para cualquier imagen. Necesitaría ver el código que has puesto, quizá en la colocación está el error. ¿En cuál blog has puesto el código y en qué parte está exactamente?
EliminarHola potro, muy bueno el post. Me preguntaba como se podia poner que de UNA imagen (ocultando otras cosas que tiene la imagen) cuando pases el cursor cambié por el otro pedazo que no se muestra en la imagen norma. Acá te mando un ejemplo de lo que mas o menos es a la imagen https://twimg0-a.akamaihd.net/a/1330626450/t1/img/twitter_web_sprite_icons.png. Pero de ahí cambian y se muestra solo algunos pedazos pero todo sigue siendo una imagen. Encontré unos códigos (http://cosasparaelblog.com.ar/2009/02/botones-con-imagenes-cambiar-imagen-al.html) para que (creo) que es lo que to quiero. Pero no sé utilizarlos :( Me explique bien? quiero que se muestren pedasos y que cambien por otros el pasar el cursor.
ResponderEliminarSaludos
Hola Dante, esos se llaman "sprites". Por ahora no tengo alguna entrada sobre ese tema, pero busca en Oloblogger, ahí han abordado ese tema un par de veces. Saludos.
EliminarGracias! Encontre justo lo que queria (http://www.oloblogger.com/2010/04/rollover-con-css-y-sprites.html)
ResponderEliminarSaludos
No me funciona, y eso que es sencillo ¿por qué? ¿Algún otro código le impide que funcione?
ResponderEliminarQuizá lo estás poniendo en la pestaña Redactar, o después de ponerlo has cambiado a esa pestaña. Asegúrate de ponerlo en la pestaña Edición de HTML del editor de entradas, y una vez que esté puesto no cambiar a la de Redactar.
EliminarNo, no, lo quiero poner en un gadget de la sidebar, y lo hago directamente en edición HTML, sin pasar a Redactar, por lo que no entiendo qué pasa. Lo hago meticulosamente, una y otra vez, sin borrar nada que no se deba borrar, pero de momento, no da resultado. Se ve que no quiere aparecer por mi blog :) ¿Alguna idea Potro?
ResponderEliminarTendría que ver dónde lo has puesto.
EliminarPues te informo. Está en este blog: http://filologabibliofila.blogspot.com/
ResponderEliminarEstá puesto el truco en el gadget de la sidebar titulado "Bibliofiliómetro, rating lecturas". A mi al menos no me funciona. Se ve la primera imagen, pero al pasar el mouse para que se vea la segunda imagen, todo se queda en blanco y desaparece. Por eso no entiendo qué ocurre, porque antes me funcionaba.
A ver si puedes ayudarme Potro. Gracias.
Lo que pasa es que la URL del enlace que has puesto no funciona, si abres el link verás que la imagen no existe:
Eliminarhttps://lh3.googleusercontent.com/-b3gihvpjl64/t2zpwydh_ti/aaaaaaaaijk/gnqftcnvdfa/s381/puntuaciones.png
Ya lo veo. Pues entonces no entiendo por qué falla el enlace porque vuelvo a subirlo a Picasa con otro nombre y sigue igual. Gracias de igual modo por la ayuda Potro.
ResponderEliminarPotro, finalmente funcionó, pero curiosamente no con tu truco. Si me permites informarte qué hice te paso el script que apliqué en mi blog para que funcionara este efecto con las imágenes:
ResponderEliminarhttp://elbalcondejaime.blogspot.com/2008/11/imgenes-que-cambian-pasando-el-cursor.html
Es del Balcón de Jaime. Te lo paso porque ya digo, tu truco no me funciona si aún cambiando la url de la 2ª imagen que dio problemas, y dado que puede pasarle esto a demás personas, puedes creer conveniente editar el código o algo. Lo dicho, gracias y salu2.
¿Sabes cuál debió ser el problema? Que Blogger trae por ahí un bug desde hace tiempo, y a raíz de ese error cambia las URLs a minúsculas, cuando es así entonces las URLs como de las imágenes no funcionan:
Eliminarhttp://ciudadblogger.com/2010/12/las-mayusculas-y-las-minusculas-en-las.html
Saludos.
Gracias por el dato de las mayúsculas y minúsculas, lo ignoraba, y es bueno tenerlo en cuenta en el futuro. Un saludo.
ResponderEliminarHola potro disculpa la molestia pero por favor ayudame con algo...Este código para cambiar una imagen al pasar el cursor me funciona perfectamente en las entradas pero como gadget no me funciona.. que tengo que hacer para que me funcione... cuando lo agrego como gadget al pasarle el cursor por encima se me pone la imagen minichiquita como un cuadrito y así se queda... "De lo peor" por favor ayudame... y muchisias gracias!
ResponderEliminarSe coloca de la misma forma. Si te aparece un cuadrito pequeño entonces es muy posible que lo que esté mal es la URL de la imagen que has puesto. Revisa ambas URLs, sino fuera eso dime en cuál blog lo has puesto, y en qué parte exactamente.
EliminarNo es eso las URLS están perfectas y lo puse de la barra de al lado de gadget del lado derecho pero ya lo quité por que da mal aspecto que hago?... a un amigo mio le funciona y perfectamente pero a mi nop solamente en las entradas pero no como gadget!!!
EliminarComo te dije, sino es eso entonces necesito verlo puesto para poder ver el código que colocaste.
Eliminarok potro pero por favor que sea rápido ya que son muchas visitas al dia mas de 1400!!!!!, esta es la URL de la página: http://codigos-con-jim011.blogspot.com/ :( Y gracias po la ayuda que me puedas ofrecer!!
EliminarNo tienes que apresurarme, respondo tan rápido como puedo pero el blog no es lo único que tengo que hacer.
EliminarEn efecto, la URL de la imagen está mal, y eso es fácil comprobarlo si tú directamente ingresas a la URL que pusiste:
http://4.bp.blogspot.com/-whaxpl1u0my/t6rrsguarei/aaaaaaaacmu/j6jtm4p58bw/s1600/trackers.png
Posiblemente Blogger te esté cambiando las mayúsculas de la URL por minúsculas y por eso deja de funcionar.
Prueba cambiar todas las comillas simples ' (pero sólo las simples) por esto:
'
lo siento, perdón no quise apurarte!, y muchas gracias por todo lo que me has enseñado durante tanto :) veré si me funciona...
EliminarHola potro, fíjese que a mi nada me ha funcionado de los consejos que le ha dado a Jim 011. Le dejo link a mi blog, talvez sabe qué pasa o es que blogger hizo cambos.
ResponderEliminarEl error que dá es el siguiente: cuando paso el mouse no cambia a la otra imágen y más bien se elimina por completo.
http://otakunonikaarticulos.blogspot.com/
Hola FUNK, ¿exactamente cuál gadget es?
EliminarHola Potro. Ya resolví. Muchísimas gracias por contestar. La verdad es que de acá mismo saqué la solución, era eso de que la comilla simple me la pasaba a otra cosa. Pero, yo lo redactaba mal y tu solución no me daba por eso, hasta que la escribí bien resultó.
EliminarYa resolví. Gracias nuevamente.
Hola Potro. Gracias por compartir, me ha servido de mucho.
ResponderEliminarTengo el problema que la imagen desaparece cuando paso el cursor por arriba y desaparece todo. Lo puse en un gadget HTML/JavaScript. Blogger me convierte todo a minúscula, aúnque lo copié con mayúsculas. También probé desde Mozzilla, Chrome e IE, y en todos se cae.
Ah, las imágenes las tengo en picassa 3. Y en lo demás anda todo bien.
Qué podrá ser? Gracias de antemano. Te dejo mi blog: http://scsarquitecto.blogspot.com/
Hola Sebastian, cambia todas las comillas simples ' (sólo las simples) por esto:
Eliminar'
Luego pon de nuevo las URLs de tus imágenes.
Saludos.
Gracias, me funcionó! La otra vez lo probé y no se qué error habré cometido. Ahora sí todo anda bien. Muchas gracias Potro!
ResponderEliminarPor nada ;)
EliminarOlle potro ami me llevo 1:30, Buscando que me fallaba, lo que me paso es que subia mis imagenes a imgur.com o desde el blog pero el caso es que me daba 1 URL Con mayusculas y minusculas creo que por esto: ''
ResponderEliminarHasta que subi a tinypic mis imagenes me funciono ya que Tinypic me dio la URL con minusculas.
Gracias Auque me tarde Jajajaja.☺
Mi Blog: Pro Conexion
Es mejor si las subes a Picasaweb, las imágenes del blog cargan más rápido ahí ;)
EliminarGran truco. Me sirvió, aunque tuve que hacerle un pequeño apaño para adaptarla a mis propósitos. Muchas gracias.
ResponderEliminarMe alegro que te haya servido, saludos!
Eliminarhola potro. Esto es lo que busco sólo que en vez de pasar el ratón quiero que sea al hacer clic. Es posible?
ResponderEliminarHola JuanMa, el código sería así:
Eliminar<img src="URL de la imagen UNO" onclick="this.src='URL de la imagen DOS';" ondblClick="this.src='URL de la imagen UNO';"/>
Con un click cambiaría a la segunda imagen, con doble click regresaría a la imagen original.
hola potro y como puedo hacer para que las imagen me mande a un link
ResponderEliminarMira el comentario #30 pero quítale el target="_blank"
EliminarHola potro=)
ResponderEliminarComo usar una imagen como esta para el boton de "Leer Mas"???
Thank!=)
Igual, sólo usa el código de esta entrada en lugar del texto "Leer más".
EliminarHola!
ResponderEliminarse podría hacer igual pero q al ser mouseHover fueran cambiando varias fotografias y con mouseOut que volviera a la original. Como una preview de videos :D
Hola!
ResponderEliminarSe podría hacer igual pero con más de una imagen? quiero decir que cuando pasas el ratón por encima pasen varias imagenes y cuando lo quitas vuelve a la que estaba. Como una preview de video.
gracias!
No S·B, para eso necesitarías un script más complejo, esta función es demasiado simple y sólo admite una imagen sin efecto carrusel ni nada por el estilo.
EliminarHola!
ResponderEliminarme gustaria saber si agregandole algo a ese codigo (o con algun otro...) se puede hacer que paresca que la imagen da la vuelta (como lo de vistas dinamicas> flipcard de blogger)
Hola Zahira, con este método no, no sé si haya alguno que lo haga, supongo que necesitarías un script de jQuery para hacer algo parecido, aunque como te decía, no conozco alguno :(
Eliminarumm ok, vale gracias :/ buscare por ahi entonces :P
EliminarDisculpa otra pregunta porque en una imagen no sale la mano al ponerse encima de ella con el raton. Sale la flecha?
ResponderEliminarQue hay que hacer?
¿En cuál imagen?
EliminarHola potro.
ResponderEliminar¿Se puede hacer esto en una imagen flotante fija?
Muchas Gracias
Sí, aplícale al código de esta imagen los estilos para hacerla flotante:
Eliminarstyle="position:fixed; bottom:0px; right:0px"
Genial gracias!!!!!!
ResponderEliminarHola, quiero hacer un menu de aproximadamente 20 botones y alojaría cada imagen (en total 40) en Picassa y luego lo colocaría en un HTML/Javascript. Mi pregunta es: ¿se enlentecerá mucho la carga de la página, ya que tiene que llamar a 40 imágenes y 20 enlaces? Muchas gracias por tu atención, saludos cordiales =)
ResponderEliminarSí, sobre todo si las imágenes son grandes. En esos casos es mejor usar sprites:
Eliminarhttp://www.ayuda-bloggers.info/2011/09/como-usar-css-sprites-para-acelerar-el.html
Hola Potro buenas tardes;
ResponderEliminarMe gustaría conseguir el efecto que se puede ver en el footer de la siguiente web http://www.lenceria-sexy.net/, como se puede ver hay un cambio de color y una variación ya que cambia la "+i" por una flecha.
¿Cómo podría conseguirlo?.
Gracias y un saludo.
Hola Rubén, supongo que puedes hacer algo parecido usando sprites:
Eliminarhttp://www.oloblogger.com/2010/04/rollover-con-css-y-sprites.html
Potro, estoy usando el slider de imágenes (Easy Slider) en mi blog. Ahora acabo de aplicar este código para cambiar las imágenes al momento de pasar el mouse Y quiero que la imagen que se vea en el slider sea la que se muestra al pasar el cursor y no la que se ve. ¿Me dejo entender?. Por ejemplo, yo quiero que se vea en el slider la foto a color y no la de blanco y negro como puedes ver en las dos primeras entradas de mi blog. http://mano-cambiada.blogspot.com/
ResponderEliminarQuiero saber si es esto posible y como. :S
Hola Diego, el problema con estos sliders automáticos es que toman por defecto la primera imagen que encuentren siempre, no la segunda ni las subsecuentes :/
Eliminarsaludos, interesante la forma de hacer la transición de imágenes con el maus, mi consulta es si es posible poner un tiempo para que cambie las imágenes, ya que es muy rápido el efecto
ResponderEliminarsaludos, una consulta , es posible poner tiempo al momento de cambiar las imágenes, ya que cambia muy rápido las imágenes
ResponderEliminarNop, no se puede controlar el tiempo con el que cambia.
Eliminarse puede que si le dan clic a la imagen los llebe a un link
ResponderEliminarSí, se puede. Mira el comentario #30.
Eliminarhola Potro, me parece excelente este y el efecto de que se agrande la imagen pero tengo un problema, de entrada tengo una imagen muy pequeña la cual tuve que reajustar desde corel exportandola para web, con esa opción se distorsiona mucho la imagen entonces al agrandarla pues tu imaginaras que pixeleada se ve, no se si me puedas recomendar que hacer, te has de preguntar por que no solo le ajusto el tamaño de forma manual?... lo hago desde corel por que debe tener ciertas dimensiones y con la opción de EXPORTAR PARA WEB me da la opción de poner el tamaño correcto, saludos y bastante bueno y explicito tu blog.
ResponderEliminarSaludos Potro, antes que nada felicitarte por tu blog, muy explicito en todo, oye mi pregunta es... como hacer para que la imagen que se agrande no se distorcione, por desgracia la imagen que tengo en pequeño esta algo distorcionada pero por la que quiero que se vea en grande esta muy clara pero es de mayor tamaño, saludos y gracias
ResponderEliminarTendrás que hacer la imagen más grande, al menos con mayor resolución y un formato como PNG. Te recomiendo que uses otro programa para las imágenes, tal vez Photoshop u otro similar.
EliminarSaludos!
Hola, primero que nada darte las gracias por tu aportación, me ha sido muy util.Esta aplicación la tengo en botones de un menu. Mi duda es que me gustaria que se quedara en enonmouseover="this.src='img2/boton/productos_am.png';" cuando este en la pagina actual.
ResponderEliminarAsi es como lo tengo en mi primera página que estoy creando claseshtml.com : src="img2/boton/productos_az.png" onmouseover="this.src='img2/boton/productos_am.png';" onmouseout="this.src='img2/boton/productos_az.png';"/>
Hola, primero que nada darte las gracias por tu aportación, me ha sido muy util.Esta aplicación la tengo en botones de un menu. Mi duda es que me gustaria que se quedara en enonmouseover="this.src='img2/boton/productos_am.png';" cuando este en la pagina actual.
ResponderEliminarAsi es como lo tengo en mi primera página que estoy creando claseshtml.com : src="img2/boton/productos_az.png" onmouseover="this.src='img2/boton/productos_am.png';" onmouseout="this.src='img2/boton/productos_az.png';"/>
Hola, primero que nada darte las gracias por tu aportación. Tendo una duda que me gustaría resolver. He puesto tu aplicacion en mi menu principal. Pero me gustaria que se quedara marcado la segunda imagen a razon de la pagina en la que estes, sabrias la funcion?.
ResponderEliminarYo lo tengo puesto ahora mismo asi: Gracias de antemano.
src="img2/boton/inicio_az.png" onmouseover="this.src='img2/boton/inicio_am.png';" onmouseout="this.src='img2/boton/inicio_az.png';"/>
No sé cómo pueda hacerse, lo siento :(
EliminarHermano gracias por la generosidad.
ResponderEliminarLo hice y resulta, pero de modo muy lento...si la comparo con la imagen que tienes al inicio del articulo..la mia demora demasiado, un par de segundos y cambia..se muere el efecto...las imagenes las he alojado en google sites, sera por eso?...si es eso..me indicas otro hosting--o el q usaste para cargar tu imagen inicial...
Desde ya , muchas gracias...
PD: Lo hago en una pagina de jimdo
Hermano, gracias por la generosidad
ResponderEliminarLo hice y me resulta, pero de modo muy lento... como trabado...las imagenes las aloje en google sites,,sera por eso?..si es eso me indicas otro hosting o el que usaste para tu imagen que abre el articulo, esa velocidad requiero, pero no es la q obtengo...
Me puedes ayudar?
Desde ya muchas gracias!
Puede ser por el hosting, o por el tamaño de la imagen, prueba con una imagen más pequeña (en kilobytes), si te sucede lo mismo entonces cambia de hosting, el de Picasaweb suele ser más rápido, y también es de Google.
EliminarHola....no se porque al poner la segunda imagen no me sale!! hace como si no reconociera la segunda foto y copio tu ejemplo de nuevo para ver que me falta y pongo mi ruta de enlace y nada de nada.
ResponderEliminarGracias!
Jajajajajajjaa buenisimo tal y como me gustan las cosas cuando tiene muchas más que hacer jejeje (y)
ResponderEliminarBuenisimo jejejeje tal y como deben de ser las cosas cuando hay muchas más por hacer Gracias...
ResponderEliminarHey potro, muchisimas gracias!!! Me has ahorrado bastante tiempo!!
ResponderEliminarMuchas gracias Mr. Potro!!... Me has ahorrado bastante tiempo!!
ResponderEliminareh Potro, como hago para que mientras el mouse este sobre la imagen me pasen de forma ciclica varias imagenes?
ResponderEliminareh Potro, como hago para que al dejar el cursor del mouse sobre la imagen me cambie automaticamente y ciclicamente varias imagenes
ResponderEliminareh Potro, como hago para que al dejar el cursor del mouse sobre la imagen me cambie automaticamente y ciclicamente varias imagenes
ResponderEliminarHola, te explico.
ResponderEliminarTengo un código HTML para mostrar un widget en mi web. Mi pregunta es si puedo hacer que, cuando un usuario de mi web pase el ratón por encima de tal widget, si puedo hacer que se muestre otra imagen, que este "oculta" encima del widget y que aparezca cuando pase el raton por encima, y que cuando clique los lleve a una pagina de mi web wordpress. Gracias
Hola! Hace unos días vi en la pág de no recuerdo cual fotógrafo un efecto (ANTES Y DESPUÉS) muy bueno.
ResponderEliminarSucedía lo siguiente, en la interfaz, habían imágenes divididas en el medio por una linea vertical, la cual moviendola hacia los lados podías ver en el mismo mapa de bits la foto original y la foto final.
Mi pregunta es, con que programa puedo lograrlo?
Ojalá haya sido claro y agradezco cualquier info.
Bien ahi el blog!
Hola! Consulta... Hace días en no recuerdo cual pág de un fotógrafo vi un efecto (antes y después) muy bueno.
ResponderEliminarSe trataba de lo siguiente. En la interfaz habían imágenes divididas al medio por una linea vertical que deslizándola a un lado veias la imagen original y moviendo dicha linea al otro lado dejaba ver la imagen editada. (en el mismo mapa de bits) Aunque dudo que fuera un mapa de bits.
En fin, espero haber sido claro.
Saludos y arriba este blog!
Hola!, oye que grandiso eres! cuantas dudas has resuelto, y realmente estoy cerca de lograr lo que quiero pero no me deja!, podrias ayudarme???.
ResponderEliminarLo que pasa es que quiero hacer un menu y que cambien las imagenes como que a prendido cuando se pasa sobre ellas, y vi que resolviste una duda similar y copie este codigo:
En si abre el link y muestra la primera imagen bien, pero al pasar sobre la imagen se quita y no vuleve a aparecer la primera, yo suponia que es un error de que no esta bien la direccion de las imagenes pero , ya hice la prueba de poner primero la on y pasa lo mismo pero si aparece de primera vez, solo cuando pasa sobre se quita y no vulven a aparecer hasta que se actualice la pagina.
Me ayudarias?, me entendiste?