Una ayudita con un hover ;)

Chuiso · 25 Oct 2013

Bueno amigos, soy un paquetorro en programación, así de claro.

Quiero meterle un hover a la imagen del logo de mi nueva web: Todo Revuelto! | Tu web de noticias y curiosidades

El código del header saca la imagen de las opciones del theme. Adjunto código:

Código:

<div id="header">
<?php if ($mts_options['mts_logo'] != '') { ?>
					<?php if( is_front_page() || is_home() || is_404() ) { ?>
						<h1 id="logo" class="image-logo"><a href="<?php echo home_url(); ?>"><img src="<?php echo $mts_options['mts_logo']; ?>" alt="<?php bloginfo( 'name' ); ?>"></a></h1>
					<?php } else { ?>
						<h2 id="logo" class="image-logo"><a href="<?php echo home_url(); ?>"><img src="<?php echo $mts_options['mts_logo']; ?>" alt="<?php bloginfo( 'name' ); ?>"></a></h2>
					<?php } ?>
				<?php } else { ?>
					<?php if( is_front_page() || is_home() || is_404() ) { ?>
						<h1 id="logo" class="text-logo"><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1>
					<?php } else { ?>
						<h2 id="logo" class="text-logo"><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h2>
					<?php } ?>
				<?php } ?>
				<?php dynamic_sidebar('Header Ad'); ?>

En el css tenemos:

Código:

#logo a { float: left }
#logo a img { float: left }
.widget-header {
    float: right;
    max-width: 77.7%;
    margin-bottom: 15px;
}

Yo quiero que modifique la imagen del logo que he metido en las opciones del theme por otra, para que el usuario al pasar el mouse por el logo muestre la otra. ¿Alguien da luz a este paquetorro?

Gracias!

uabrules · 25 Oct 2013

Si supiera te ayudaba, pero soy paquetorro también ! xd

Bleed · 25 Oct 2013

Prueba con :

Código:

#logo:hover {
background: url(ruta_a_la_imagen/imagen_raton_encima.jpg) no-repeat;
height: ALTOpx;
width: ANCHOpx;
}

Con JavaScript hay una funcion OnMouseOver que tambien te podria valer :

Código:

<img src="logo.jpg" onmouseover="this.src='logo2.jpg';" alt="Logo" />

lobogris · 25 Oct 2013

Prueba con esto, soy relativamente nuevo con JS... a ver como va:

Código:

 var imagen = $("#logo img");
     sinhover = "http://miimagen.com/principal.png"
     onhover = "http://miimagen.com/quesustituye.png";

  imagen.mouseover(function(){
            $(this).attr("src", onhover);
        })
        .mouseout(function(){
            $(this).attr("src", sinhover);
        });

Esto mételo en el document.ready se podría mejorar cacheando la imagen sin hover, pero esto debería servirte

Saludos

Chuiso · 25 Oct 2013

lobogris dijo:
Prueba con esto, soy relativamente nuevo con JS... a ver como va:

Dónde está el document.ready??

- - - Actualización- - -

Bleed dijo:
Prueba con :

Código:

#logo:hover { background: url(ruta_a_la_imagen/imagen_raton_encima.jpg) no-repeat; height: ALTOpx; width: ANCHOpx; }

Con JavaScript hay una funcion OnMouseOver que tambien te podria valer :

Código:

<img src="logo.jpg" onmouseover="this.src='logo2.jpg';" alt="Logo" />

El segundo código añadido sí funciona, el único problema es que se queda el hover, no vuelve a la imagen original cuando quitas el mouse del logo, hay alguna forma de cambiar eso?

Gracias!!

Bleed · 25 Oct 2013

Chuiso dijo:
Dónde está el document.ready??

- - - Actualización- - -

El segundo código añadido sí funciona, el único problema es que se queda el hover, no vuelve a la imagen original cuando quitas el mouse del logo, hay alguna forma de cambiar eso?

Gracias!!

Añade un OnMouseOut para volver a la primera imagen y solucionado.

Enviado desde mi LG-P700 usando Tapatalk now Free

uyx · 25 Oct 2013

HTML:

<img id="logo" src="https://foro20.com/img/logo1.png" />


<script>
//cargas jquery del repo de google

$("#logo").hover(function(){
  $("#logo").attr("src","../img/logo2.png");
},function(){
  $("#logo").attr("src","../img/logo1.png");
})
</script>

pruebale ahí :mola:

Chuiso · 25 Oct 2013

Gracias a todos! Con un poquito de cada he conseguido dejarle tal y como quería, echarle un vistazo, queda chulo, le he metido un transition también

lobogris · 26 Oct 2013

Chuiso dijo:
Dónde está el document.ready??

Veo que ya lo has solucionado, y más fácil con CSS, pero ya que me has preguntado te digo con ello me refiero a tu archivo .js principal donde estén definidas la mayoría de las funciones, en WP suele ser functions.js.

jQuery(document).ready lo definiría como un parámetro quee indica a otros cuando actuar, y es cuando el el DOM está preparado (cargado en el navegador)es decir, cuando tu navegador ha recibido y procesado todo el árbol de etiquetas HTML ahí entra en acción el document ready y ejecuta funciones o las prepara para cuando sea necesario en el caso de que necesiten alguna acción para ejecutarse.

Puede que no lo haya explicado con las palabras adecuadas, pero así es como lo entiendo, más o menos para que te hagas una idea...

Saludos

Una ayudita con un hover ;)

Comparte esta página