Разработка технической документации и технические писатели Технические писатели и разработка технической документации технические писатели в Телеграм 

 obmen_soobsheniyami.png Чат для технических писателей 
 Зарегистрируйтесь
Страницы: 1
RSS
Вставка анимированных иконок (кнопок), как добавить в документ анимацию
 
Подскажите, пожалуйста, есть ли инструменты в H&M для добавления анимированных изображений?
Т.е. задача стоит следующим образом:
1) добавить в документ кнопки (у кнопки отображаются картинки для разных состояний: неактивно, наведен курсор, нажато)
2)при нажатии кнопки осуществляется переход по ссылке.

Дополнительно:
компилируется все в .chm и webhelp
 
можно сделать на флеш и вставить как объект
Торопливость в выводах может привести к неприятностям
 
Или можно сделать анимированный GIF.

Но не лучше ли сделать 1 обычную картинку,
или 3 картинки, если так важно показывать разные состояния: неактивно, наведен курсор, нажато?
 
Цитата
gellouglas пишет:
компилируется все в .chm и webhelp
Можно средствами Javascript, HTML или CSS.

Flash или gif-анимация в  случае "onmouse" наведения мыши  не подойдет.

Вот наиболее простой вариант
Код
<p>
<img    src="images/button1.png" 
      on mouseout="this.src='images/button1.png'"
      on mouseover="this.src='images/button2.png'">
</p>



onmouseout и onmouseover - слитно. Почему-то разрывается слово на форуме
Изменено: ADVANCED - 25.07.2014 11:43:29
 
спасибо!
попробую
 
 Описание некоторых кнопок такого интерфейса для H&M:

Последняя кнопка имеет еще и нажатое состояние ("jav * a" = "java", "on mouse"="onmouse")
Код
    <a href="jav * ascript: window.history.back();"
        on mouseover="document.images.prev.src='on_back.png'" 
        on mouseout="document.images.prev.src='back.png';">
        <img name="prev" src="back.png" border=0 title="Назад" alt="Назад">
     </a>

   <a href="jav * ascript: window.history.forward();"
        on mouseover="document.images.next.src='on_forward.png'" 
        on mouseout="document.images.next.src='forward.png';">
        <img name="next" src="forward.png" border=0 title="Вперед" alt="Вперед">
     </a>
      
   <IFNOT_PARENT_CHAPTER><a href="<%HREF_PARENT_CHAPTER%>"
      on mouseover="document.images.main.src='ishome.png'" 
      on mouseout="document.images.main.src='home.png'"><img name="main" src="home.png" border=0 title="В начало" alt="В начало">
   </a></IFNOT_PARENT_CHAPTER>
   
   <a href="jav * ascript: print();"
     on mouseover="document.images.print.src='on_print.png'"
     on mouseout="document.images.print.src='print.png'">
     <img name="print" border="0" alt="Печать раздела" title="Печать раздела" src="print.png">
   </a>
   
   <IF_TOGGLES>
     <a href="jav * ascript:HMToggleExpandAll(!HMAnyToggleOpen());"
        on mouseover="document.images.toggle.src='on_toggle.png'" 
        on mouseout="document.images.toggle.src='toggle.png'">
        <img name="toggle" border="0" alt="Свернуть/развернуть" title="Свернуть/развернуть текст" src="toggle.png">
     </a>
    </IF_TOGGLES>

   <a href="jav * ascript: zoom();"
     on mouseover="document.images.zoomb.src='on_zoomtxt.png'"
     on mouseout="jav * ascript: if (!zl) document.images.zoomb.src='zoomtxt.png'; else document.images.zoomb.src='on_zoomtxt.png'">
     <img name="zoomb" border="0" alt="Изменить размер" title="Изменить размер" src="zoomtxt.png">
   </a>
Скрипты для масштабирования текста и состояния нажатия кнопки ("sc ript"="script"):
Код
<sc ript type="text/javascript">
     function resizeText(multiplier)
      {if (document.getElementById('innerdiv').style.fontSize == "")
        {document.getElementById('innerdiv').style.fontSize = "1.0em";}
      document.getElementById('innerdiv').style.fontSize = parseFloat(document.getElementById('innerdiv').style.fontSize) + (multiplier * 0.2) + "em";}
  </sc ript>
  
  <sc ript type="text/javascript">
     var zl = false;
     function zoom()
      {if (zl) {zl = false;resizeText(-4);document.images.zoomb.src="zoomtxt.png";}
           else{if(!zl){zl = true;resizeText(+4);document.images.zoomb.src="on_zoomtxt.png";}}}
   </sc ript>
Изменено: H&M User - 16.04.2015 15:57:17
Страницы: 1
Читают тему