我们在一些文章发布系统中,后台使用的编辑器插入图片的时候并不会自动给图片加上链接,有时候图片太大了,会将窗口撑开,为了不影响美观,我们也许会将图片缩小,于是乎,就要将图片放大,有些编辑器非常复杂,更改起来不方便,那么我们可以直接在显示文章内容的页面使用Javascript给图片批量都加上onclick事件。。。
假设如下一段文章内容存放于如下一个DIV中:
以下是HTML代码: <div id="content">
<img src="1.gif" />
<img src="2.gif" />
<img src="3.gif" />
<img src="4.gif" />
<img src="5.gif" />
</div> 这样,可以使用如下JS:
以下是Javascript代码: <script type="text/javascript">
<!--
var obj_content = document.getElementById('content');
var objimg = obj_content.getElementsByTagName('img');
if(objimg){
for(var i=0; i < objimg.length ; i++){
//imgsrc = objimg[i].src;
objimg[i].title = '点击查看大图';
objimg[i].style.cursor = "pointer";
objimg[i].onclick = function() {window.open(this.src)};
//下面是自动调整图片大小的代码
if(objimg[i].width > 600){
objimg[i].style.width = '600px'
}
if(objimg[i].height > 500){
objimg[i].style.height = '500px'
}
}
}
//-->
</script> 以上代码在IE6、Firefox下测试通过。。。