Jump to content


Photo

Hacer un onmouseover de una imagen algo diferente

css html hover img

  • Please log in to reply
4 replies to this topic

#1 Richi

Richi

    Advanced Member

  • Miembros
  • PipPipPip
  • 83 posts

Posted 02 December 2016 - 11:49 AM

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
  • 7419 posts
  • LocationRepública Dominicana

Posted 02 December 2016 - 12:43 PM

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 posts

Posted 02 December 2016 - 12:55 PM

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
  • 7419 posts
  • LocationRepública Dominicana

Posted 02 December 2016 - 01:46 PM

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 posts

Posted 05 December 2016 - 07:54 AM

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





Also tagged with one or more of these keywords: css, html, hover, img

IP.Board spam blocked by CleanTalk.