大家好,我先将问题描述一下,我想做一个动态显示图片的效果,就是将鼠标滑上一个按钮就换一个图片,但是该按钮是在该图片的前面,为什么在FF下是ok的,但是IE6就是有问题呢?
代码如下:
<ul class="banners" id="promotion_banners">
<script type="text/javascript">
<!--{foreach from=$categore_ad_list item=ad name=ad_name}-->
var index = {$smarty.foreach.ad_name.index} + 1;
var str = "<li id='banners_" + index +"_body_1' ";
<!---{if $smarty.foreach.ad_name.index==0}-->
str += "style='display:block;'>";
<!--{else}-->
str += "style='display:none;'>";
<!--{/if}-->
str += "<a target='_blank' href='{$ad.url}'>" ;
str += "<img src='{$ad.img_src}' />";
str += "</a></li>";
document.write(str);
<!--{/foreach}-->
</script>
</ul>
<div class="switcher">
<ul id="banners" class="points">
<script type="text/javascript">
<!--{foreach from=$categore_ad_list item=ad name=ad_name}-->
var index = {$smarty.foreach.ad_name.index} + 1;
var str = "";
<!---{if $smarty.foreach.ad_name.index==0}-->
str = "<li id='banners_" + index +"' class='current' onMouseOver='changePC(" + index + ")'>" + index + "</li>";
<!--{else}-->
str = "<li id='banners_" + index +"' onMouseOver='changePC(" + index + ")'>" + index + "</li>";
<!--{/if}-->
document.write(str);
<!--{/foreach}-->
</script>
</ul>
</div>
CSS如下:.pb{ margin:9px 0px 0px 0px; width:617px; float:left; position:relative}
.pb .points li {
background:url("images/pb_btn_01.gif") no-repeat scroll left top transparent;
}
.pb .banners{ padding:0; margin:0; float:left; }
.famaleright2_l ul{ width:165px; }
.pb .switcher{ position:absolute; background-position:left -76px; float:right; z-index:99999; left:300px; top:110px; height:25px; }
.pb .points {
font-size:12px;
margin:8px auto 0;
padding:0;
}
.pb .points li {
background-position:0 0;
color:#FFFFFF;
cursor:pointer;
font-family:Arial;
height:15px;
line-height:15px;
margin:0 0 2px 3px;
overflow:hidden;
text-align:center;
width:16px;
float:left
}
.pb .points li.current {
background-position:-19px 0;
margin-left:0;
text-align:center;
text-indent:3px;
width:19px;
}
代码如下:
<ul class="banners" id="promotion_banners">
<script type="text/javascript">
<!--{foreach from=$categore_ad_list item=ad name=ad_name}-->
var index = {$smarty.foreach.ad_name.index} + 1;
var str = "<li id='banners_" + index +"_body_1' ";
<!---{if $smarty.foreach.ad_name.index==0}-->
str += "style='display:block;'>";
<!--{else}-->
str += "style='display:none;'>";
<!--{/if}-->
str += "<a target='_blank' href='{$ad.url}'>" ;
str += "<img src='{$ad.img_src}' />";
str += "</a></li>";
document.write(str);
<!--{/foreach}-->
</script>
</ul>
<div class="switcher">
<ul id="banners" class="points">
<script type="text/javascript">
<!--{foreach from=$categore_ad_list item=ad name=ad_name}-->
var index = {$smarty.foreach.ad_name.index} + 1;
var str = "";
<!---{if $smarty.foreach.ad_name.index==0}-->
str = "<li id='banners_" + index +"' class='current' onMouseOver='changePC(" + index + ")'>" + index + "</li>";
<!--{else}-->
str = "<li id='banners_" + index +"' onMouseOver='changePC(" + index + ")'>" + index + "</li>";
<!--{/if}-->
document.write(str);
<!--{/foreach}-->
</script>
</ul>
</div>
CSS如下:.pb{ margin:9px 0px 0px 0px; width:617px; float:left; position:relative}
.pb .points li {
background:url("images/pb_btn_01.gif") no-repeat scroll left top transparent;
}
.pb .banners{ padding:0; margin:0; float:left; }
.famaleright2_l ul{ width:165px; }
.pb .switcher{ position:absolute; background-position:left -76px; float:right; z-index:99999; left:300px; top:110px; height:25px; }
.pb .points {
font-size:12px;
margin:8px auto 0;
padding:0;
}
.pb .points li {
background-position:0 0;
color:#FFFFFF;
cursor:pointer;
font-family:Arial;
height:15px;
line-height:15px;
margin:0 0 2px 3px;
overflow:hidden;
text-align:center;
width:16px;
float:left
}
.pb .points li.current {
background-position:-19px 0;
margin-left:0;
text-align:center;
text-indent:3px;
width:19px;
}
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货