求助js如何对多个图片进行作用 10C
<div id="zuo3">
        <img name="img" onmouseover="bigger()" onmouseout="smaller()" src="img/1.jpg"
                style="cursor:pointer;width:100px;height:100px;" />
        <img name="img" onmouseover="bigger()" onmouseout="smaller()" src="img/2.jpg" 
                style="cursor:pointer;width:100px;height:100px;" />

<script type="text/javascript">
var img = document.getElementsByName('img');
 function bigger(){
  img.name.width = '200px';
  img.name.height = '200px';
 }

 function smaller(){
  img.name.width = '90px';
  img.name.height = '100px';
 }
</script>
    </div>

    这是我的网页里的代码 我想把鼠标移到图片上的时候,就对图片进行放大,但是不知道为什么这样做会报错 我没怎么学习过js 所以请求大神帮忙解决一下

16个回答

图片说明
以上代码已验证(请放心使用)
注意:
1:script块代码可以放在head或body里面,但是script块代码和div代码是相互独立的,你的script代码放在了div里面,应该拿出来
2:此处对象是多张图片,需要用this,和function XXX(obj) 定位到当前对象

有问题可以随时追问,乐意彼此之间交流,如果对你有帮助,请好评,点赞,谢谢!

gggyyyhhh29
gggyyyhhh29 大概明白了谢谢
大约 2 年之前 回复
qq_41487961
qq_41487961 这是什么编译工具?
大约 2 年之前 回复
qq_37429244
qq_37429244 非常好用,谢谢
大约 2 年之前 回复



<br> function bigger(obj){<br> obj.style.width = &#39;120px&#39;;<br> obj.style.height = &#39;120px&#39;;<br> }<br> function smaller(obj){<br> obj.style.width = &#39;100px&#39;;<br> obj.style.height = &#39;100px&#39;;<br> }<br>



style="cursor:pointer;width:100px;height:100px;" />
style="cursor:pointer;width:100px;height:100px;" />




以上代码已验证(请放心使用)
注意:
1:script块代码可以放在head或body里面,但是script块代码和div代码是相互独立的,你的script代码放在了div里面,应该拿出来
2:此处对象是多张图片,需要用this,和function XXX(obj) 定位到当前对象

有问题可以随时追问,乐意彼此之间交流,如果对你有帮助,请好评,点赞,谢谢!

你获取的图片对象是一组,应该是写一个事件,每个图片都去调用。

qq_38692022
qq_38692022 不好意思 能详细一点吗
大约 2 年之前 回复

var img = document.getElementsByName('img');返回的应该是个数组吧

你用 for循环看看
for(var i=0;i<img.length;i++){
img[i].name.width = '200px';
img[i].name.height = '200px';
}

把图片路径换成你的试一下看看吧。

<div>
    <img src="1.jpg" width="200" height="200" alt="图片1" />
    <img src="1.jpg" width="200" height="200" alt="图片2" />
</div>
<script type="text/javascript">
    window.onload=function(){
        var imgs = document.getElementsByTagName("img");
        for(var i = 0;i<imgs.length;i++){
            imgs[i].onmouseover=function(){
                this.setAttribute('width','300');
                this.setAttribute('height','300');
            }
            imgs[i].onmouseout=function(){
                this.setAttribute('width','200');
                this.setAttribute('height','200');
            }
        }
};
</script>

你用 for循环看看
for(var i=0;i<img.length;i++){
img[i].name.width = '300px';
img[i].name.height = '300px';
}

建议用js编辑器1st JavaScript Editor Pro写,我用这个写的基本都正常

style="cursor:pointer;width:100px;height:100px;" />

function bigger(obj){

obj.style.width = '200px';
obj.style.height = '200px';
}

function smaller(obj){
obj.style.width = '90px';
obj.style.height = '100px';
}

这么写

onmouseover="bigger(this)" onmouseout="smaller(this)"

这是用你原来的思路实现的,上面还有用我写的另外一种方法实现的
记得把图片路径换成你的

 <div id="zuo3">
        <img name="img" width="100" height="100" onmouseover="bigger(this)" onmouseout="smaller(this)" src="1.jpg" />
        <img name="img" width="100" height="100" onmouseover="bigger(this)" onmouseout="smaller(this)" src="1.jpg" />
<script type="text/javascript">
 function bigger(img){
  img.width = '200';
  img.height = '200';
 }

 function smaller(img){
  img.width = '100';
  img.height = '100';
 }
</script>
共16条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问