onmouseover и onmouseout для изменения размера изображений

Я пытаюсь навести курсор мыши на несколько изображений, после чего изображения изменятся, но почему-то скажем, что у меня есть три изображения. если моя мышь находится над первым изображением, то все три изменятся в размере, если я наведу курсор на третье, затем на второе, затем на первое, то размер изменится один за другим, а не размер всех трех сразу. Я только начал javascript, поэтому еще не слишком много знаю. Вот как это работает, если я не знаю более продвинутый способ сделать это?

Также я хочу сделать так, чтобы когда моя мышь не работала, изображения возвращались к значениям по умолчанию, но я не уверен, как мне это сделать....

Это то, что у меня...

<script>
var div1Images=document.getElementById("div1").getElementsByTagName("img");

for(i=0;i<div1Images.length;i++)
{
    div1Images[i].onmouseover=function()
    {
    this.style.width="100px";
    }
}
</script>

<body>
<div id="div1">
<img src="cat.jpg" id="im1"/>
<img src="dog.jpg" id="im2"/>
<img src="fish.jpg" id="im3"/>
</div><!--close div1-->
</body>

Заранее спасибо.


javascript onmouseover onmouseout
person Dora    schedule 13.03.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете сделать это с помощью CSS:

<img class="mypic" src="cat.jpg" id="im1"/>

.myPic:hover {
      width:100px;
}
person Diodeus - James MacFarlane    schedule 13.03.2013
comment
это то, что меня просят сделать, иначе я бы тоже выбрал css: P - person Dora; 14.03.2013
comment
сказал другу научить меня некоторым основам javascript, поэтому он немного научил меня и попросил сделать это, так что я думаю, тебе вроде как задание, но не так, как это для оценок, просто я искал в Интернете и до сих пор не мог понять, так что я думаю прежде чем спрашивать его, я должен попробовать спросить в Интернете, потому что мне будет легче понять, чем он ответит мне напрямую. - person Dora; 15.03.2013
comment
Вы можете сделать это с помощью JS, но CSS всегда эффективнее. - person Diodeus - James MacFarlane; 15.03.2013