Изображение onmouseover/onmouseout не изменяется

Question

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

<ul> 
    <li> 
     <a href="#"> 
     <img src="img/img1.png" onmouseover="this.src='img/img2.png'" onmouseout="this.src='img/img1.png'" alt="img"> 
     </a> 
    </li> 
    <li> 
     <a href="#"> 
     <img src="img/img1.png" onmouseover="this.src='img/img2.png'" onmouseout="this.src='img/img1.png'" alt="img"> 
     </a> 
    </li> 
</ul> 

Answer 1

Вы должны заменить filename.Use:

<ul> 
<li> 
    <a href="#"> 
    <img src="img/img1.png" onmouseover="this.src=this.src.replace('img1','img2')" onmouseout="this.src=this.src.replace('img2','img1')" alt="img"> 
    </a> 
</li> 
<li> 
    <a href="#"> 
    <img src="img/img1.png" onmouseover="this.src=this.src.replace('img1','img2')" onmouseout="this.src=this.src.replace('img2','img1')" alt="img"> 
    </a> 
</li>