Блог

Главная - Вопросы по программированию - опрокидывание изображения javascript внутри div

опрокидывание изображения javascript внутри div

#javascript

#javascript

Вопрос:

у меня есть один div 100px X 300px. Какой самый простой способ в JavaScript, чтобы при наведении курсора мыши на div я показывал изображение, а затем, когда я покидаю div, изображение исчезает.

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

     <script type="text/javascript">

        function MouseOver_Event(elementId) {
            var imgToCreate = document.createElement('img');
            imgToCreate.setAttribute('id', 'imgHandle');
            imgToCreate.setAttribute('src', elementId   '.png');
            imgToCreate.setAttribute('onmouseout', 'MouseOut_Event(' elementId ')');
            var targetDiv = document.getElementById(elementId);
            targetDiv.appendChild(imgToCreate);
            targetDiv.removeAttribute('onmouseover', 'MouseOver_Event');
        }
        function MouseOut_Event(elementId) {
            var imgToRemove = document.getElementById('imgHandle');
            var targetDiv = imgToRemove.parentNode();
            if (imgToRemove != null)
                targetDiv.removeChild(imgToRemove);
            targetDiv.setAttribute('onmouseover', 'MouseOut_Event('   elementId   ')');
        }
    </script>
</head>
<body>
<div id="div1" onmouseover="MouseOver_Event(this.id)"></div>
<div id="div2" onmouseover="MouseOver_Event(this.id)"></div>
<div id="div3" onmouseover="MouseOver_Event(this.id)"><img src="Div3.png" alt="test" onmouseout="MouseOut_Event(parentNode's id or something)" /></div>
</body>

Комментарии:

1. ну, для начала parentNode — это не метод, поэтому вам не нужны круглые скобки

2. Почему бы вам не указать изображение в качестве фонового изображения div, а затем использовать css-спрайты для создания эффекта наведения? JS хорош, но иногда есть более простое решение! Еще одним очень простым решением, если вы хотите придерживаться JS, было бы использование jQuery в качестве дополнительного модуля … с его помощью ооочень легко изменять свойства!

Ответ №1:

Вы прикрепляете свой MouseOut_Event к onmouseover вместо onmouseout. Но вам, вероятно, все равно не нужно возиться с созданием динамического события; просто добавьте onmouseout=»MouseOut_Event(this.id )» к трем дивам, и этого должно хватить.

Ответ №2:

Почему бы вам вместо этого не использовать CSS?
Например:

 #div1{background:none;}
#div1:hover{background:url('src/div1.png') no-repeat;}