Question

<div id="mydiv">
<img src="myimage.jpg" />
</div>
<script language="javascript">
var a=document.createElement('a');
a.href='http://mylink.com';
document.getElementById('mydiv').appendChild(a);
</script>

该脚本无法在图像上创建链接

<div id="mydiv">
    <a href="http://mylink.com"><img src="myimage.jpg" /></a>
</div>

Answer 1

您正在图像后放置链接。

您需要移动图像，使其位于链接内。

var image = document.getElementById('mydiv').getElementsByTagName('img')[0]; a.appendChild(image);

Answer 2

    <div id="mydiv">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Cat_November_2010-1a.jpg/220px-Cat_November_2010-1a.jpg" />
</div>

<script language="javascript">
var a=document.createElement('a');
a.href='http://mylink.com';
var image = document.getElementById('mydiv').getElementsByTagName('img')[0];
b=a.appendChild(image);
document.getElementById('mydiv').appendChild(a);
</script>

感谢你的想法。这项工作

Answer 3

这是一个不需要额外div的解决方案，并在HTML页面中的每个图像周围放置一个链接：

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>

<script type="text/javascript" charset="utf8">
  $(document).ready(function(){
    var images = document.getElementsByTagName('img');
    for (var i = 0; i < images.length; i++) {
      var image = images[i];
      var parentElement = image.parentElement;
      var a = document.createElement('a');
      a.href = image.getAttribute('src');
      a.appendChild(image);
      parentElement.appendChild(a);
    }
  });
</script>

Answer 4

对于单个图像

您可以在其中按元素对象，ID或第一个src子字符串匹配项传递图像。采用可选的target属性，例如“ _blank”。不需要jQuery。

// By img element object
// (used by the functions below)
var addImageLink = function( elem, target ){
    if( !elem || !( 'tagName' in elem ) ){ return; }
    var image = elem;
    var parent = image.parentElement;
    var a = document.createElement( 'a' );
    a.href = image.getAttribute( 'src' );
    if( target ){ a.setAttribute( 'target', target ); }
    a.appendChild( image );
    parent.appendChild( a );
};

// By img element id
// <img src="images/gallery/1.jpg" id="image1" />
// <script> addImageLinkById( 'image1' ); </script>
var addImageLinkById = function( id, target ){
    addImageLink( document.getElementById( id ), target );
};

// By img element src (first match)
// <img src="images/gallery/1.jpg"/>
// <script> addImageLinkBySrc( '/1.jpg' ); </script>
var addImageLinkBySrc = function( src, target ){
    var image, images = document.getElementsByTagName( 'img' );
    if( typeof src == 'undefined' ){ src = ''; }
    for( var i = 0; i < images.length; i++ ){
        if( images[ i ].src.indexOf( src ) < 0 ){ continue; }
        addImageLink( images[ i ], target ); return;
    }
};

用于遍历所有图像

此解决方案在每个图像周围放置一个链接。这是Falko答案的扩展版本。

不使用jQuery
（可选）按href子字符串将图像列入白名单，例如“ images / gallery /”
指定可选的目标属性，例如“ _blank”
不会跳过图像的后半部分
^{_{（尝试他的代码时遇到了这个问题，但是可能是我做错了）}}

var addImageLinks = function( filter, target ){

    var parent, a, image;
    var images = document.getElementsByTagName( 'img' );
    var hasTarget = ( typeof target != 'undefined' );
    var hasFilter = ( typeof filter != 'undefined' );

    for( var i = 0; i < images.length; i++ ){

        image = images[ i ];
        if( hasFilter && ( image.src.indexOf( filter ) < 0 ) ){ continue; }

        // Skip over already-wrapped images, by adding an attribute
        if( image.getAttribute( 'data-wrapped-link' ) ){ continue; }
        image.setAttribute( 'data-wrapped-link', '1' );

        // Add the link
        parent = image.parentElement;
        a = document.createElement( 'a' );
        a.href = image.getAttribute( 'src' );
        if( hasTarget ){ a.setAttribute( 'target', target ); }
        a.appendChild( image );
        parent.appendChild( a );

        // We inserted a "new" image, so go back one step so we don't miss any
        // (due to being inside the "i < images.length" loop)
        i--;

    }

};

// Then:
// <img src="images/gallery/a.jpg"/>
// <img src="images/gallery/b.jpg"/>
// <img src="images/gallery/c.jpg"/>
// <img src="images/icons/a.gif"/> <- ignored

// Near bottom of the page (or in an onLoad handler, etc):
// </script> addImageLinks( 'images/gallery/', '_blank' ); </script>

如何使用Javascript在图像上创建链接

4 个答案:

对于单个图像

用于遍历所有图像