Статьи

Имитация Windows-подобной кнопки с помощью JavaScript

Апрель 26, 2019

Вы когда-нибудь видели эти необычные графические кнопки на веб-сайте? Задумывались ли вы, как они сделаны? Ну, правда в том, что реализовать их не сложно! Сегодня мы собираемся использовать <img> HTML и JavaScript для достижения этого эффекта.

Наша кнопка будет иметь 3 разных состояния и разные изображения для каждого:

Первое состояние «вверх» или «нормальный», где имя файла изображения будет «ButtonSubmit.gif»

Второе состояние «над», и оно появляется, когда курсор мыши пользователя находится над кнопкой. Имя файла изображения будет «ButtonSubmit-over.gif»

Третье состояние «вниз» и появляется при нажатии кнопки. Имя файла изображения будет «ButtonSubmit-down.gif».

Давайте посмотрим на код: 

 <script>  function ReplaceImage(sImgName,sImgFile){  document.images[sImgName].src = sImgFile;  }  </script>   <a href="#" onMouseOver="ReplaceImage('ImgSubmit',  'ButtonSubmit_over.gif')"  onMouseDown="ReplaceImage('ImgSubmit','ButtonSubmit_down.gif')"  onMouseOut="ReplaceImage('ImgSubmit','ButtonSubmit.gif')">  <img src="ButtonSubmit.gif" name="ImgSubmit" border="0"></a>

Функция ReplaceImage() имеет 2 параметра: sImgName и sImgFile . 

  sImgName - имя объекта изображения в коллекции document.images .  sImgFile - это фактический путь к файлу изображения относительно текущего местоположения страницы.  Функция просто заменяет старое изображение, отображаемое объектом изображения, на указанное sImgName . 



  Давайте ImgSubmit наш объект изображения " ImgSubmit ".  Поскольку Netscape будет обнаруживать перемещение мыши только по ссылкам, необходимо поместить <img> тег ссылки.  Конечно, наша ссылка никуда не приведет: она просто определяет движения курсора. 



  Теперь мы можем использовать 3 важных обработчика событий тега  <a> : onMouseOver , onMouseOut и onMouseDown .  Первое изображение, отображаемое на нашей странице, будет «ButtonSubmit.gif».  Когда мы наводим курсор на это изображение, мы хотим, чтобы оно было заменено на «ButtonSubmit-over.gif».  Для этого мы просто используем onMouseOver события onMouseOver для ссылки: 



 <a href="#" onMouseOver="ReplaceImage('ImgSubmit',  'ButtonSubmit-over.gif')"> 


  Теперь, когда мы внесли эту поправку в скрипт, когда пользователь наводит курсор на кнопку, изображение «ButtonSubmit.gif» будет заменено на «ButtonSubmit_over.gif». 


  Но что будет, если посетитель уберет курсор с картинки?  Ответ в том, что ничего не изменится - изображение останется прежним («ButtonSubmit-over.gif»).  Почему?  Потому что мы еще не использовали обработчик onMouseOut . 


  Нам нужно обнаружить событие MouseOut и снова вызвать ReplaceImage() , чтобы вернуть кнопку в исходное состояние (т. Е. Снова отобразить «ButtonSubmit.gif»).  После того, как мы представим  onMouseOut() события  onMouseOut() , код нашей графической кнопки будет выглядеть так: 


 <a href="#" onMouseOver="ReplaceImage('ImgSubmit',  'ButtonSubmit-over.gif')"  onMouseOut="ReplaceImage('ImgSubmit','ButtonSubmit.gif')">  <img src="ButtonSubmit.gif" name="ImgSubmit" border="0"></a> 


  Теперь наша кнопка почти идеальна ... Я объясню, почему я сказал "почти"!  На данный момент, если пользователь нажимает на кнопку, изображение не изменится.  Чтобы позволить ему измениться, нам нужно сделать одно последнее изменение в нашем коде. 


  На этот раз нам нужно обнаружить событие MouseDown и вызвать ReplaceImage() с «ButtonSubmit-down.gif» в качестве второго параметра.  Это просто заменит уже отображенный «ButtonSubmit-over.gif» на «ButtonSubmit-down.gif».  Наконец, у нас есть идеальная Windows-подобная кнопка: 


 <a href="#" onMouseOver="ReplaceImage('ImgSubmit',  'ButtonSubmit-over.gif')"  onMouseDown="ReplaceImage('ImgSubmit','ButtonSubmit-down.gif')"  onMouseOut="ReplaceImage('ImgSubmit','ButtonSubmit.gif')">  <img src="ButtonSubmit.gif" name="ImgSubmit" border="0"></a> 


  Таким образом, чтобы сделать графическую кнопку с изображениями и JavaScript, мы должны: 


    

  •   поместите изображение внутри тега <a> . 
    • 

  •   используйте onMouseOver onMouseOut onMouseOver , onMouseOut и onMouseDown чтобы обнаружить перемещение курсора мыши вниз, вверх и вниз по нашей ссылке. 
    • 

  •   пусть каждый из 3 обработчиков событий вызовет функцию ReplaceImage() с соответствующим файлом изображения в качестве второго параметра. 
    • 



  Вы можете увидеть пример графической кнопки, реализованной с помощью JavaScript здесь .

35
Share: