1

Tengo el siguiente mape de imágenes,podría hacerle un efecto hover,para que cuando al cruzar el mouse se les haga zoom dando un efecto de crecimiento o como podría yo hacer esto?

<map name="mapa">
  <area shape="circle" coords="125,125,50" href="" />
  <area shape="rectangle" coords="325,75,425,175" href="" />
</map>
<img src="https://i.sstatic.net/GvHyu.png" usemap="#mapa" />

2 respuestas 2

3

Primero seria crear una clase para arriba y otra clase para abajo en css y jugar con eso dependiendo si esta en hover o no.

$("area").hover(function() {
  $(this).toggleClass('arriba').siblings().toggleClass('abajo')
})
#figuras {
  list-style: none;
}

.area1 {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  display: inline-block;
  transition: all 0.3s ease-in;
  border-radius: 50%;
  margin: 10px;
}

.area2 {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  display: inline-block;
  transition: all 0.3s ease-in;
  border-radius: 10%;
  margin: 10px;
}

.arriba {
  transform: scale(1.2);
}

.abajo {
  transform: scale(0.8);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<map name="mapa" class="figuras">
   <area id="p_area1" class="area1"   />
   <area id="p_area2"  class="area2"   />
</map>

5
  • Donde añado la funcion en el mismo script o como fue,no me queda muy claro aun..
    – psy
    Commented el 1 may. 2018 a las 13:43
  • y otra cosa es que trato de hacerlo con una misma imagen y quiero saber si es posible y si es similar
    – psy
    Commented el 1 may. 2018 a las 13:46
  • @psy quieres hacer zoom para las dos figuras de una imagen? si ese es el caso creo que no se puede, yo hice algo asi pero recortando las imagenes para que se haga zoom Commented el 2 may. 2018 a las 12:59
  • @psy si quieres el proyecto que hice escribeme a mi gmail porfavor Commented el 3 may. 2018 a las 20:24
  • si me lo podrias facilitar seria un placer.
    – psy
    Commented el 3 may. 2018 a las 20:38
2

Puede hacer algo como esto:

Hacer uso de :hover los elementos en la parte superior de la imagen (cambié los divs a a-blocks).

Ejemplo:

.area {
    background:#fff;
    display:block;
    height:475px;
    opacity:0;
    position:absolute;
    width:320px;
}
#area2 {
    left:320px;
}
#area1:hover, #area2:hover {
    opacity:0.50;
}
<map name="mapa">
   <area id="area1" class="area" shape="circle" coords="125,125,50" href="" />
   <area id="area2"  class="area" shape="rectangle" coords="325,75,425,175" href="" />
</map>
<img src="https://i.sstatic.net/GvHyu.png" usemap="#mapa" />

4
  • pero falta el zoom? Commented el 27 abr. 2018 a las 18:51
  • @x-rw me disculpo, estoy desde el móvil se me complica un poco poder codificar, quizás mas tarde pueda editar la pregunta y agregar el código así, o si desea puede agregarlo usted anímese a editar mi respuesta, Saludos! Commented el 27 abr. 2018 a las 19:27
  • Me faltaria que dicha area haga zoom con el hover
    – psy
    Commented el 27 abr. 2018 a las 20:06
  • creo que debes cortar en imagenes para que se pueda hacer el zoom respectivo para cada figura, bueno esa es una manera Commented el 27 abr. 2018 a las 21:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.