Как добавить ролловер изображения в Javascript - PullRequest
Новая
       0

Как добавить ролловер изображения в Javascript

0 голосов
/ 01 апреля 2012

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

<head>
<script language="javascript" type="text/javascript">
var imageNo = 2;
function swapImage() {
image = document.getElementById('image')
switch (imageNo) {
 case 1:
   image.src = "images/img.png"
   imageNo = 2
   document.getElementById('content').style.display = 'none'
   return(false);
case 2:
   image.src = "images/img1.png"
   imageNo = 1
    document.getElementById('content').style.display = 'block'
    return(false);
}
}
</script>
 </head>

 <body>
  <h4><a href="#"><img id="image" name="image" src="images/img.png" border="0" onclick="swapImage();"/></a></h4>
  <div id="content" style="display:none">This content toggles</span>
 </body><code>

Ответы [ 3 ]

1 голос
/ 01 апреля 2012

Пожалуйста, смотрите следующую скрипку http://jsfiddle.net/AGgha/3/.
Она использует jQuery (http://jquery.com/),which делает ваш js dev намного проще и позволяет вам анимировать ваши div.Он использует setInterval для подкачки infinte, когда вы находитесь на img.Я также добавил некоторые улучшения в ваш код, чтобы сделать его немного лучше, используйте его, если хотите.

0 голосов
/ 01 апреля 2012

Селектор CSS :hover прост: 

#image:hover {
    background: url(your/image.png);
}
0 голосов
/ 01 апреля 2012

Используйте событие onmouseover, если хотите, чтобы при наведении курсора мыши на элемент изображения происходило то же самое. 

<img id="image" name="image" src="images/img.png" border="0" 
       onclick="swapImage();" onmouseover="swapImage();"/>
...