This article describes the method of clicking on an image to copy the image address to the paste board by clicking on an image. Share it for your reference. The details are as follows:
The code copy is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="robots" content="all" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Click on the image to copy the image address directly to the paste board</title>
<style type="text/css">
#www_jb51_net_hidden {
position:absolute;
visibility:hidden;
}
img {
cursor:pointer ;
}
</style>
</head>
<body>
Click the picture below to get the address directly.
<div id="jb51_net">
<img src="images/m10.jpg"><br />
</div>
<span id="www_jb51_net_hidden"></span>
</body>
<script type="text/javascript">
<!--
$id=function(id) {
return document.getElementById(id);
}
var objs =$id("jb51_net").getElementsByTagName("img");
for (var i=0;i<objs.length;i++ ) {
objs[i].onclick=function () {
$id("www_jb51_net_hidden").innerHTML=this.src;
var my_range =document.body.createTextRange();
my_range.moveToElementText($id("www_jb51_net_hidden"));
my_range.execCommand("copy");
alert("The image address has been copied to the clipboard");
return false ;
}
}
//-->
</script>
</html>
I hope this article will be helpful to everyone's JavaScript programming.