Ir al contenido


Foto

Hacer un onmouseover de una imagen algo diferente

css html hover img

  • Por favor identifícate para responder
4 respuestas en este tema

#1 Richi

Richi

    Advanced Member

  • Miembros
  • PipPipPip
  • 83 mensajes

Escrito 02 diciembre 2016 - 11:49

Buenas chicos otra vez.

 

Estaba haciendo una web donde se aplica un hover, lo estoy haciendo de la siguiente manera


php
  1. <a href="#"> <img src="images/A1.png" onmouseover="this.src='images/B1.png'" onmouseout="this.src='images/A1.png'"">

Acá me hace el efecto, entonces me surge la idea de esta situación: Si tengo 4 imagenes de la forma de arriba claro A2 con onmouseover B2, A3 con mouseover B3  y asi respectivamente; como le hago para que cuando haga el mouseover a la A1, las otras cambien sus imagenes a un C2,C3 y asi respectivamente?

 

Gracias,

Saludos a todos


  • 0

#2 enecumene

enecumene

    Webmaster

  • Administrador
  • 7.409 mensajes
  • LocationRepública Dominicana

Escrito 02 diciembre 2016 - 12:43

Con CSS lo puedes lograr:


html5
  1. <a id="home"><img class="image_on" src="images/about.png" alt="logo" /><img class="image_off" src="images/aboutR.png" alt="logo" /></a>


css
  1. .image_off, #home:hover .image_on{
  2. display:none
  3. }
  4. .image_on, #home:hover .image_off{
  5. display:block
  6. }

Saludos.


  • 0

#3 Richi

Richi

    Advanced Member

  • Miembros
  • PipPipPip
  • 83 mensajes

Escrito 02 diciembre 2016 - 12:55

Gracias,

 

Ese me lo hace para 1, encontré mas sencillo el mio jaja pero lo que quiero saber es como se podria hacer si al pasar el mouse sibre el A1 el cambia a B1 (eso ya lo tengo mas que claro) pero cuando estoy en b1 las otras imanes (A2,A3...) pase a tener imagen C1,C2 y asi respectivamente


  • 0

#4 enecumene

enecumene

    Webmaster

  • Administrador
  • 7.409 mensajes
  • LocationRepública Dominicana

Escrito 02 diciembre 2016 - 01:46

Bueno, mi estimado, el tuyo es más complicado, te di la solución más sencilla que puedas encontrar, usando javascript deberás programar una función donde pasarle un parámetro y llamarlo desde el evento onmouseover.


  • 0

#5 Richi

Richi

    Advanced Member

  • Miembros
  • PipPipPip
  • 83 mensajes

Escrito 05 diciembre 2016 - 07:54

No, tienes razón, las dos hacen practicamente lo mismo. Lo que no se es si puedo poner otra clase de css o una función para que cuando esté sobre los A1 la imagen del b1,c1,d1 puedan ponerse en imagenes b3,c3,d3 mientras que la imagen de A1 esta en A2.


  • 0





Etiquetado también con una o más de estas palabras: css, html, hover, img