[英]How to create link on image using Javascript
<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>
The script doesn't work to create link on image 该脚本无法在图像上创建链接
<div id="mydiv">
<a href="http://mylink.com"><img src="myimage.jpg" /></a>
</div>
You are putting the link after the image. 你是把图像后的链接地址。
You need to move the image so it is inside the link. 您需要移动图像,使其位于链接内。
var image = document.getElementById('mydiv').getElementsByTagName('img')[0];
a.appendChild(image);
<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>
Thank's for the idea. 谢谢你的想法。 this work
这项工作
Here is a solution that doesn't need the additional div and puts a link around every image within the HTML page: 这是一个不需要额外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>
Where you can pass the image by element object, ID, or the first src
substring match. 您可以通过元素对象,ID或第一个
src
子字符串匹配来传递图像。 Takes an optional target attribute, like "_blank". 采用可选的目标属性,例如“_blank”。 No jQuery required.
不需要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;
}
};
This solution puts a link around every image. 该解决方案围绕每个图像建立链接。 It's an expanded version of Falko's answer.
这是Falko答案的扩展版本。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.