Como crear imágenes con links

Como crear imágenes con links

Ya pensé hace un tiempo en hacer una entrada como esta. En alguna otra ocasión ya me surgió la necesidad de crear imágenes con links, y tenía pendiente subirlo al blog para quien tenga una necesidad similar. Además si lo combinamos con javascript hay un mundo de posibilidades.

Lo básico serán los tag, <img>, <map> y <area>.

<html>
<head>
<tilte>Imágen mapeada</title>
</head>
<body>
<div>
<h1>Imágen mapeada</h1>
<img src="kriversia.png" alt="Kriversia" usemap="#kriversia">
<map name="kriversia">
<area shape="poly" coords="511,317,593,271,591,177,512,131,429,179,430,271" alt="Kriversia" href="https://kriversia.com">
</map>

</div>
</body>
</html>

Este sería el ejemplo básico, sin utilizar jQuery, pero si queremos mostrar por ejemplo un tooltip cuando pasemos el mouse sobre la sección de la imágen que nos interesa podríamos hacerlo así:

<html>
<head>
<tilte>Imágen mapeada</title>
<script>
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"
</script>
<script>
$(document).ready(function(e) {

  $('area').hover(function() {
  $('#axome-tooltip').html('<span>'+$(this).attr('alt')+'</span>');
  $('#axome-tooltip').show();
  }, function() {
  $('#axome-tooltip').hide();
  });
  $('area').mousemove(function(e) {
  var offsetX = -210,
  offsetY = -15;
  $('#axome-tooltip').offset({left: e.pageX + offsetX, top: e.pageY + offsetY});
  });
  });
</head>
<body>
<div>
<h1>Imágen mapeada</h1>
<img src="kriversia.png" alt="Kriversia" usemap="#kriversia">
<map name="kriversia">
<area shape="poly" coords="511,317,593,271,591,177,512,131,429,179,430,271" alt="Kriversia" href="https://kriversia.com">
</map>
<div style="background:white; width:fit-content; padding:2em;" id="axome-tooltip"></div>
</div>
<body>
</html>

Y aquí tenéis el ejemplo si lo queréis descargar.

Pin It on Pinterest