При загрузке сайта, как вы динамически оборачиваете все изображения в ссылку, используя Javascript? - PullRequest
Новая
       21

При загрузке сайта, как вы динамически оборачиваете все изображения в ссылку, используя Javascript?

0 голосов
/ 23 марта 2010

У меня практически нет опыта работы с DOM и использования Javascript, и у меня есть очень специфическая задача, которую я пытаюсь выполнить.

Допустим, у меня есть изображение в моем HTML: 

<img src="foo.jpg" />

Когда сайт загружается, я хочу взять это изображение (фактически все изображения в документе) и обернуть ихссылка: 

<a href="http://www.foobar.com"><img src="foo.jpg" /></a>

Что я могу использовать для этого?Google мало что мне показало в отношении этой конкретной задачи.При загрузке я могу получить доступ и просмотреть все изображения в документе ... но я не уверен, куда идти, чтобы обернуть изображение в ссылку.

Ответы [ 2 ]

6 голосов
/ 23 марта 2010

Вы можете попробовать что-нибудь из строк: 

window.onload = function() {
    var images = document.getElementsByTagName('img');
    for (var i = 0, image = images[i]; i < images.length; i++) {
        var wrapper = document.createElement('a');
        wrapper.setAttribute('href', 'http://www.foobar.com');
        wrapper.appendChild(image.cloneNode(true));
        image.parentNode.replaceChild(wrapper, image);
    }
};

Я бы порекомендовал вам использовать превосходную библиотеку jQuery для управления DOM: 

$(function() {
    $('img').wrap('<a href="http://foo.com">');
});
0 голосов
/ 23 мая 2015

В следующем примере все изображения оборачиваются ссылкой на их источник.Поэтому, если изображение имеет src из //example.com, оно будет обернуто якорем (ссылкой) для //example.com.

Конечно, вам не нужно связывать некоторые изображения, чтобы выдобавить атрибут данных nolink, вот так:<img src="//lorempixel.com/400/200 data-nolink />

<!DOCTYPE html>
<html lang="en-GB">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Include jQuery 1.11.1 -->

  <script>
    $(function() {  //Run once DOM is ready
      
      $('img:not([data-nolink])').each(function() {  //Iterate through each img element
      
        $(this).wrap('<a href="' + $(this).attr('src') + '">'); //Wrap with link to own src
      
      });
    
    });
  </script>

  <style>
    h3 {
      text-align: justify;
    }
  
    img {
      width: 200px;
      margin: 24px;
    }
  </style>
  
</head>
<body>

  <h3>These images are generated randomly by <a href="lorempixel">loremPixel</a>; So you will be presented by a different image to what you see here, when you click on any of the links </h3>
  <hr />
  <br />

  <img src="//lorempixel.com/400/200?samp1" />
  <img src="//lorempixel.com/400/200?samp2" />
  <img src="//lorempixel.com/400/200?samp3" data-nolink/> <!-- Add data-nolink to prevent auto-linking -->
  <img src="//lorempixel.com/400/200?samp4" />
  <img src="//lorempixel.com/400/200?samp5" />
  <img src="//lorempixel.com/400/200?samp6" />
  
</body>
</html>
...