0

Buenos días a toda la comunidad.

Tengo una función en Javascript que lee datos desde JSON y me trae unas imágenes. Estas imágenes las estoy mostrando en una página HTML. Hasta ahora ningún problema; lo que no estoy logrando es encerrar estas imágenes dentro de un elemento <a> ya que quiero que tengan un link.

Este es mi código JS.

<script>
    var jsonData2 = '[{"idc":"8","ima":"exis.png","title":"EXIS","especialidades":"-1-2-3-4-5-6-9-10-11-12-13-14-16-17-18-19-20-22-23-24-25-26-27-28-29-34-35-36-"}]'

    $(document).ready(function()
{
  var data = JSON.parse(jsonData2);
  var rowImg = document.getElementById("rowImg");

  for (var i = 0; i < data.length; i++)
  {
    var object = data[i];
    var img = document.createElement("img");
    img.src = "images/" + object.ima;
    img.id = object.idc;
    img.class = "img-responsive";
    img.title = object.title;
    img.style = "width: 300px; height: 200px; margin: 0 auto";
    img.appendChild(document.createTextNode(object.ima));
    rowImg.appendChild(img);
    }
});
</script>

Así es como queda en el HTML:

  <div class="row" id="rowImg">
    <img src="images/exis.png" id="8" title="EXIS" style="width: 300px; height: 200px; margin: 0px auto;"></img>
  </div>

Esto es lo que estoy tratando de lograr:

  <div class="row" id="rowImg">
    <a href="#"><img src="images/exis.png" id="8" title="EXIS" style="width: 300px; height: 200px; margin: 0px auto;"></img></a>
  </div>
0

1 respuesta 1

3

No tienes más que crear un elemento link (a) igual que creas el de la imagen.

Añades la imagen como hijo del elemento link y es el link el que insertas en el DOM:

    var jsonData2 = '[{"idc":"8","ima":"exis.png","title":"EXIS","especialidades":"-1-2-3-4-5-6-9-10-11-12-13-14-16-17-18-19-20-22-23-24-25-26-27-28-29-34-35-36-"}]'

$(document).ready(function()
{
  var data = JSON.parse(jsonData2);
  var rowImg = document.getElementById("rowImg");

  for (var i = 0; i < data.length; i++)
  {
    var object = data[i];
    var link = document.createElement('a');
    link.href = "#";
    var img = document.createElement("img");
    img.src = "images/" + object.ima;
    img.id = object.idc;
    img.class = "img-responsive";
    img.title = object.title;
    img.style = "width: 300px; height: 200px; margin: 0 auto";
    img.appendChild(document.createTextNode(object.ima));
    link.appendChild(img);
    rowImg.appendChild(link);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rowImg"></div>

1
  • Genial. Realmente no me salía. Muchas gracias.
    – L_C
    el 28 feb. 2018 a las 14:22

Tu Respuesta

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

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