Изменить изображение с помощью «onmouseover»

Я пытаюсь изменить изображение src с помощью JavaScript. К сожалению, это не работает. Может ли кто-нибудь сказать мне, что я делаю неправильно?Изменить изображение с помощью «onmouseover»

<script type="text/javascript"> 
    function changeImage(a) { 
    document.getElementById("img").src=a; 
} 
</script> 

<div class="fill"> 
<img id="img" src="books\thumbnail\10.jpg\"> 
<img src='books\big\4.jpg' onmouseover='changeImage("books\bigger\4.jpg");'> 
<img src='books\big\5.jpg' onmouseover='changeImage("books\bigger\5.jpg");'> 
<img src='books\big\6.jpg' onmouseover='changeImage("books\bigger\6.jpg");'> 
</div>

источник

2013-08-30 Mister Joe

Вы используете обратные слэши вместо слэша? –

Думаю, вам нужно поставить '#' перед 'img' в' document.getElementById ("img"). Src = a; '. Кроме того, у вас нет идентификатора для каждого изображения, так как он будет знать, какое изображение изменить. –

@ evan.stoddard: '#' требуется только при использовании селекторов стиля CSS в JavaScript. Изображение для изменения - это номер с идентификатором 'img'. –

Попробуйте это: -

<script type="text/javascript"> 
    function changeImage(a) { 
    document.getElementById("img").src=a; 
} 
</script> 

<div class="fill"> 
<img id="img" src="books/thumbnail/10.jpg/"> 
<img src='books/big/4.jpg' onmouseover='changeImage("books/bigger/4.jpg");'> 
<img src='books/big/5.jpg' onmouseover='changeImage("books/bigger/5.jpg");'> 
<img src='books/big/6.jpg' onmouseover='changeImage("books/bigger/6.jpg");'> 
</div>

источник

2013-08-30 18:53:27

Вы могли бы использовать 'this.src' в changeImage, а не повторять URL-адрес каждый раз? –

@Chimoo: Нет, поскольку элементы 'mouseover' являются' books/large/... ', но передается' src' - 'books/больше/...', как в миниатюре и в полном размере. Хотя '.replace()' можно было бы сделать в функции 'changeImage()'. –

ах ок, но да заменить будет лучше. код в этом ответе тогда не делает то, что хочет OP, поскольку он передает миниатюру не больше –

-2

document.getElementById("img").src=a;

Находит элемент с идентификатором "IMG". Для того, чтобы найти текущее изображение попробовать

changeImage(this, "books\bigger\4.jpg");

И,

function changeImage(img, string) 
{ 
    img.src = string; 
}

источник

2013-08-30 18:54:39

-2

Попробуйте сделать это в JavaScript:

document.getElementById("img").onmouseover=changeImage("http://placehold.it/500");

работал для меня.

источник

2013-08-30 18:55:04 joeelectricity

-1

Попробуйте это:

<script type="text/javascript"> 
     function changeImage(a,x) { 
     x.src=a; 
    } 
    </script> 

    <div class="fill"> 
    <img id="img" src="books/thumbnail/10.jpg\"> 
    <img src='books/big/4.jpg' 
    onmouseover="changeImage('books/bigger/4.jpg',this);"> 

    </div>

источник

2013-08-30 18:57:13

why -negative .... –

Потому что ваш код не делает то, что хочет OP. –

Вот как я бы сделал это, делает его немного более масштабируемым

<script type="text/javascript"> 
    function changeImage(img) { 
    document.getElementById("img").src = img.src.replace("/big/", "/bigger/"); 
    } 
</script> 

<div class="fill"> 
    <img id="img" src="books/thumbnail/10.jpg"> 
    <img src='books/big/4.jpg' onmouseover='changeImage(this)'> 
    <img src='books/big/5.jpg' onmouseover='changeImage(this)'> 
    <img src='books/big/6.jpg' onmouseover='changeImage(this)'> 
</div>

источник

2013-08-30 19:15:52

Изменить изображение с помощью «onmouseover»

ответ

Смежные вопросы