Разработка сайтов. Создание сайтов. Быстрая разработка недорогих сайтов. Готовые сайты
        

Разработка веб сайтов


      Готовые сайты

      Добавим к линкам на сайте информационные окна (ToolTip). Для этого:
      Для этого добавим в таблицу стилей CSS следующие строки:
      
      <style type="text/css">
      #dhtmltooltip{
      position: absolute;
      width: 150px;
      border: 2px solid black;
      padding: 2px;
      background-color: lightyellow;
      visibility: hidden;
      z-index: 100;
      }
      </style>

Разработка веб сайтов

      
      Теперь надо в секцию <body> </body> добавить довольно большой Java script код (см. файл dhtml.txt)
      Его надо размевтить вне любых тэгов. Для упрощения листинга, скрипт можно вынести в внешний Java script файл dhtml.js и загрузить его как
      
      <script language=javascript src=dhtml.js></script>
      
      Теперь нужно просто в желаемые линки <a href="" title=""> </a> добавить вызовы onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)"; onMouseout="hideddrivetip()"
      
      Пример линка: Шаблоны сайтов. Если навести на линк мышку, то появится окошко с подсказкой


      Создание сайтов

      
      
      В окошко подсказки можно загруэить имидж. Пример линка с графической картинкой: Шаблоны сайтов. Если навести на линк мышку, то появится окошко с подсказкой


      Создание сайтов

      
      Полный HTML код выглядит так: <a href="http://free-website.narod.ru/" onMouseover="ddrivetip('&nbsp;&nbsp;Готовые бесплатные сайты с контентом<br>&nbsp;&nbsp;<br>&nbsp;&nbsp;<center><img src=http://free-website.narod.ru/tmp40.jpg border=0><br>&nbsp;&nbsp;<br>&nbsp;&nbsp;','yellow', 300)"; onMouseout="hideddrivetip()"><font><b><u>Шаблоны сайтов</u></b></font></a>
      

Разработка веб сайтов

      
      Доработаем оформление ToolTip: http://about.h18.ru/
      
      Для того, чтобы загружать большой имидж, нужно увеличить ширину ToolTip (в данном случае - с 300 до 520 pix). Используем другой шрифт. Для этого в <style type="text/css"> </style> добавим две записи в #dhtmltooltip - выбор шрифта и размера шрифта font-family: Arial, Tahoma, Helvetica; font-size: 9pt;


      Создание сайтов

      
      Не всегда удобно в ToolTip показывать имидж большого размера. Попробуем уменьшить его размер добавив параметры width= и height= - линк http://about.h18.ru/

  
        

      

Разработка веб сайтов

      
      Чтобы поменять цвет фона ToolTip нужно в <style type="text/css"> </style> в #dhtmltooltip{ } поменять значение записи background-color
      

      
      
      Главная страница >>>>    Предыдущая страница >>>>    Следующая страница >>>>