вставка изображения при наведении курсора мыши и при выходе из него

У меня есть изображение внутри div, которое я пытаюсь изменить, когда мышь закончилась, а затем вернуться, когда мышь отсутствует. Однако у меня возникают трудности с вставкой изображения в div при выводе мыши. Это особый способ сделать это или альтернативное сообщение. Проблемы, похоже, связаны с размещением косых черт во вставке HTML.

  <div class='myImage' onmouseout='this.innerHTML = '<img src='./images/myImage.jpg' />' onmouseover='this.innerHTML = \"\"; this.style.backgroundColor = \"#1D4088\"' style='height:100px; width:100px'><image src='./images/myImage.jpg'></div>

javascript html onmouseover onmouseout
person Christopher    schedule 14.04.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я думаю, что ваши двойные и одинарные кавычки немного конфликтуют, попробуйте вместо этого поместить javascript в функцию

<div class="myImage" onmouseout="toggle(this,'1')" onmouseover="toggle(this,'2')" style="height:100px; width:100px"><image src="./images/myImage.jpg"></div>

И джаваскрипт

function toggle(e,a) {
    if(a=='2') {
        e.innerHTML = '';
        e.style.backgroundColor = '#1D4088';
    } else {
        e.innerHTML = '<img src="./images/myImage.jpg" />';
        e.style.backgroundColor = '';
    }
}
person PaulMrG    schedule 14.04.2012
comment
Спасибо, Пол. Отличный ответ! - person Christopher; 14.04.2012

arrow_upward
2
arrow_downward

хм, кажется, ты все усложняешь, не волнуйся.

попробуйте следовать учебникам «sprite».

Вот хороший:

и если вы действительно хотите вникнуть в это: http://css-tricks.com/css-sprites/< /а>

person krekettek    schedule 14.04.2012
comment
Спасибо за ваш вклад. Однако изображение myImage на самом деле является динамическим и вставляется из другой функции js. Так что, к сожалению, так и должно работать. - person Christopher; 14.04.2012
comment
хорошо.. хм, нет опыта с этим. Тогда попробуйте прочитать это: quackit.com/javascript/image_rollovers.cfm Из любопытства, есть ли особая причина, по которой вы используете этот метод? - person krekettek; 14.04.2012
comment
спасибо... посмотрю. Я делаю это, потому что могу считывать теги идентификаторов из объекта jSON и т. д. и отправлять их в скрипт myImages.php?id=(id). Затем я могу динамически вставлять изображения на страницу и делать с ними все, что мне нравится. Я просто пытаюсь сделать несколько крутых эффектов, когда вы наводите на них курсор, но не могу заставить его вернуться к изображению. - person Christopher; 14.04.2012