Замена изображения при наведении
на него курсора мыши
Бывают различные ситуации, когда при наведении курсора мышки на какое-либо изображение, бывает просто необходимо показать пользователю другое (следующее) изображение. Причем второе изображение может отличаться по размерам от первого. В данной теме мы рассмотрим, как это можно реализовать при помощи JavaScript кода, без использования CSS.
Для примера наведите курсор мышки на изображение, расположенное ниже, и Вы увидите, что оно сменится другим, имеющим отличные от исходных размеров.
Для получения такого эффекта "подмены" изображения предлагаем Вам воспользоваться следующим скриптом, который необходимо будет поместить в начало Вашей странички, на которой Вы планируете менять изображения:
<script type="text/javascript">
if (document.images) {
image_on = new Image();
image_on.src = "tineye2.jpg";
image_on.width = "400";
image_off = new Image();
image_off.src = "tineye.jpg";
image_off.width = "300";
}
function change_img() {
if (document.images) {
for (var i=0; i<change_img.arguments.length; i+=2) {
document[change_img.arguments[i]].src = eval(change_img.arguments[i+1] + ".src");
document[change_img.arguments[i]].width = eval(change_img.arguments[i+1] + ".width");
}
}
}
</script>В том месте Вашей странички, где Вы хотите вставить изображение, которой будет меняться на другое при наведении на него курсора мышки, вставьте вот такой код:
<a href="http://usefulscript.ru/tineye.php">
<img src="tineye.jpg" onmouseout="change_img('image', 'image_off')"
onmouseover="change_img('image', 'image_on')" width="300" name="image"
alt="Картинка, меняющаяся при наведении курсора мышки">
</a>Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Есть основной блок DIV внутри которого расположен ещё один блок DIV со стилем, в котором расположена картинка. Хочу, чтобы при наведении на основной блок менялась картинка внутри второго блока.
Картинка должна поменяться, если мышь наведена на любую часть первого блока, а не именно на картинку.
Надеюсь, я правильно выразился и с нетерпением буду ждать ответ.
<div style="border: 1px solid blue; width: 600px; text-align: center;" onmouseout="change_img('image', 'image_off')" onmouseover="change_img('image', 'image_on')">
Любой текст и т.д.
<div style="border: 1px solid red; width: 500px;">
Блок с картинкой<br>
<img src="image/tineye.jpg" width="300" name="image">
</div>
</div>
Т.к. скрипт очень "древний", то лучше воспользоваться вот таким обновленным кодом:
<script type="text/javascript">
function change_img(a, b, c) {
document.getElementById(a.id).src = b;
document.getElementById(a.id).width = c;
}
</script>
<img src="image/tineye.jpg" width="300" id="image1"
onmouseout="change_img(this, 'image/tineye.jpg', 300)"
onmouseover="change_img(this, 'image/tineye2.jpg', 400)">
<img src="image/favicon_1.png" width="400" id="image2"
onmouseout="change_img(this, 'image/favicon_1.png', 400)"
onmouseover="change_img(this, 'image/favicon_2.png', 500)">