今天调试代码的时候,本来的意思是用一个a元素包含一个div元素,div里面包含img元素,这样单击div元素的时候就可以跳转对应的页面地址。可以把下面页面复制到html页面中,点击图片查看是否可以跳转到百度,代码如下:
一、代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
.thumb_item{
float:left;
width:105px;
margin:6px;
overflow: hidden;
cursor:default;
}
.thumb_item .thumb{
position:relative;
height:90px;
padding:2px;
margin-bottom:4px;
background:center center no-repeat;
border:1px solid lightgrey;
text-align:center;
vertical-align:middle;
cursor:hand;
}
.thumb_item .attrs{
height:20px;
line-height:20px;
white-space:nowrap;
overflow:hidden;
}
.thumb_item .attrs_selected{
height:20px;
line-height:20px;
white-space:nowrap;
overflow:hidden;
background-color:#bef1c2;
}
.thumb_span{
font-size:12px;
font-family:"宋体";
color:#013f06;/*#097f12*/
}
.thumb_image_a{
text-decoration:none;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
//调整图片大小
function resizeIfNeed(_imgloaded){
if(!_imgloaded){
return;
}
var height = _imgloaded.height;
var width = _imgloaded.width;
if(height > 90 || width > 105){
if(height > width){
_imgloaded.height = 80;
width = 80*width/height;
height = 80;
//对宽度进行再次处理
if(width>97){
width = 97;
}
}else{
_imgloaded.width = 97;
height = 97 * height/width;
width = 97;
//对高度进行再次处理
if(height>80){
height = 80;
}
}
}
_imgloaded.width = width;
_imgloaded.height = height;
_imgloaded.style.left = Math.floor((104-width)/2)+"px";
_imgloaded.style.top = Math.floor((90-height)/2)+"px";
}
//缩放图片
function img_zoom(_nCurrIdNumber){
var currImg = document.getElementById("div_img_" + _nCurrIdNumber);
if(!currImg){
return;
}
var zoom = parseInt(currImg.style.zoom, 10) || 100;
zoom += event.wheelDelta / 12;
if (zoom> 0){
currImg.style.zoom = zoom + "%";
}
return false;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<DIV class=thumb_item>
<A class="thumb_image_a" href="http://www.baidu.com" target=_blank name="test">
<DIV class="thumb" title="点击查看原图,滚动滚轮进行缩放" >
<IMG style="POSITION: absolute; TOP: 32px; LEFT: 3px" id=div_img_9 src="http://pic.nipic.com/2008-09-04/20089423244653_2.jpg" width=97 height=25 />
</DIV>
</A>
</DIV>
</BODY>
</HTML>
二、点击图片,看看
产生的原因在于上边的红色部分,用a元素包含了div元素造成的。由于a元素是内联元素,div是块元素,内联元素是不可以包含块元素的,所以导致了上边的错误,只需要把a元素调整到div元素里面即可实现点击图片跳转,以后得注意使用了。调整后的代码,如下(粉红色部分为调整的)
<DIV class=thumb_item>
<DIV class="thumb" title="点击查看原图,滚动滚轮进行缩放" >
<A class="thumb_image_a" href="http://www.baidu.com" target=_blank name="test">
<IMG style="POSITION: absolute; TOP: 32px; LEFT: 3px" id=div_img_9 src="http://pic.nipic.com/2008-09-04/20089423244653_2.jpg" width=97 height=25 />
</A>
</DIV>
</DIV>