asp中 鼠标指向 切换图片 图片是动态调取的
图片切换都下载好了,就是现在应用到asp文件中,鼠标指向,图片不变了?要怎么调下面是指向图片时,图片变化的站位符
<img src="images/03.jpg" alt="懒人图库" name="main_img" width="500" height="400" border="0" id="main_img" rel="images/03.jpg" />类似这样的效果:如下
图片切换都下载好了,就是现在应用到asp文件中,鼠标指向,图片不变了?要怎么调下面是指向图片时,图片变化的站位符
<img src="images/03.jpg" alt="懒人图库" name="main_img" width="500" height="400" border="0" id="main_img" rel="images/03.jpg" />类似这样的效果:如下
图片先传到csdn相册。。再先上来鼠标指向是什么意思?点击?静态的是好的?而动态的不行?如果静态的是好的,而动态的不行,把JS代码放在</body>标签之前,再试。
就是一个onmouseover事件,改变大图的路径?那应该很简单啊你在对应的事件中首先确定你动态的代码和静态的是否有区别,如果没有用alert调试调试思路:
1.在移上事件的方法中第一行alert,确定是否进入这个方法2.在取当前移上图的大图路径时alert一下路径,看路径是否取对3.在给大图重新赋SRC时,看是否赋上
<tr>
<td width="550" align="center">
<img src="images/03.jpg" alt="懒人图库" name="main_img" width="500" height="400" border="0" id="main_img" rel="images/03.jpg" />
</td>
<td width="195" align="center" valign="top">
<img src="images/gotop.gif" width="100" height="14" id="gotop" />
<div id="showArea">
<%
查询语句
%>
<img src="<%=rs_xc("LSmallPic")%>" alt="<%=rs_xc("LTitle")%>" width="80" height="50" border="0" class="thumb_img" rel="images/01.jpg" />
<%
rs_xc.movenext
next
end if
%>
</div>
<img src="images/gobottom.gif" width="100" height="14" id="gobottom" />
</td>
</tr>
</table>
<script language="javascript" type="text/javascript">
function $(e) {return document.getElementById(e);}
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
}
var MyMar;
var speed = 1; //速度,越大越慢
var spec = 1; //每次滚动的间距, 越大滚动越快
var ipath = 'images/'; //图片路径
var thumbs = document.getElementsByClassName('thumb_img');
for (var i=0; i<thumbs.length; i++) {
thumbs[i].onmouseover = function () {$('main_img').src=this.rel; $('main_img').link=this.link;};
thumbs[i].onclick = function () {location = this.link}
}$('main_img').onclick = function () {location = this.link;}
$('gotop').onmouseover = function() {this.src = ipath + 'gotop2.gif'; MyMar=setInterval(gotop,speed);}
$('gotop').onmouseout = function() {this.src = ipath + 'gotop.gif'; clearInterval(MyMar);}
$('gobottom').onmouseover = function() {this.src = ipath + 'gobottom2.gif'; MyMar=setInterval(gobottom,speed);}
$('gobottom').onmouseout = function() {this.src = ipath + 'gobottom.gif'; clearInterval(MyMar);}
function gotop() {$('showArea').scrollTop-=spec;}
function gobottom() {$('showArea').scrollTop+=spec;}</script>
</div>
</div>
</div>
</body>
</html>
他的布局你不要修改,然后按照他的套用进去,。在小图地方循环就好了!小图不滚动是不是图太少了?你循环的时候,最后标明ID,一个图对应一个ID,大图对应小图,另外,你打开它的JS看下,是不是有控制小图循环几张的,你先看看是否设置了,如果是封装的,那你就不用管了。 仔细看下!