Anshlag - калужское объединение друзей - туристов. Отдых, путешествия, туризм.

Anshlag - калужское объединение друзей - туристов. Отдых и путешествия по Карелии, туризм, водные походы. Отчеты о походах, рассказы туристов, новости туризма. Форум, гостевая, походные фотографии.



  
 Суббота, 23 марта 2019, 11:18:04 

Отрисовка rollover меню на сайтах
Отрисовка rollover меню на сайтах

Быстрый переход ...

» Отрисовка rollover ...


Основываясь на предыдущей
заметке
, ilya@lebedev.net">Илья Лебедев
предлагает модифицированный вариант
скрипта, который можно использовать для отрисовки
rollover меню на сайтах.


Особенности:



     
  • Скрипт переписан в виде объекта.
     
  • Облегчены методы show() и hide() —
        они вызываются только для картинок,
        которые соответствуют заданному шаблону.
     
  • Установщик обработчиков событий
        вытащен из tooltip'ов.
     
  • Можно задать активную картинку, на которую
        не будет действовать rollover.


JavaScript


/*

created by alexander shurkayev <alshur@narod.ru> | http://htmlcoder.visions.ru

modified by ilya lebedev (ilya@lebedev.net)

*/



window.onerror = null;



rollmenu = {

    img_path     :
"/i/"
, // path to the images from the site root

    img_menu_dir : "menu",    
// folder with the images (should contain no slashes!)

    img_ext     
: ".gif"
,     // default extension. all
images should have the same extension

    r_img_suffix : "__",      
// rollover image suffix (ex. "/i/menu/1__.gif")

    a_img_suffix : "_",       
// active image suffix (ex. "/i/menu/1_.gif")

    preload : function (file){

      var image = new Image();

      image.src = rollmenu.img_path +
rollmenu.img_menu_dir + "/" + file + rollmenu.img_ext;

    },

    s : function(e){

      var el = window.event ?
window.event.srcElement : e.currentTarget;

      el.src = el.rollsrc;

    },

    h : function(e){

      var el = window.event ?
window.event.srcElement : e.currentTarget;

      el.src = el.defsrc;

    },

    init : function(){

      if (document.images){

        var img_item = r = null;

        var str = rollmenu.img_menu_dir
+ "\\/(\\w+)\\" + rollmenu.img_ext;

        var re = new RegExp(str, "i");

        var rexp = new RegExp (rollmenu.img_ext
+ "$","");

        for (var i = 0; (img_item =
document.getElementsByTagName("img").item(i)); i++){

          r =
img_item.src.match(re);;

          if (!r) continue;

          if (img_item.getAttribute("links")
&& document.location.pathname.match(new RegExp(img_item.getAttribute("links"),
"i"))){

            img_item.src
= img_item.src.replace(new RegExp(rollmenu.img_ext), rollmenu.a_img_suffix +
rollmenu.img_ext);

          } else {

            rollmenu.preload(r[1]
+ rollmenu.a_img_suffix);

            rollmenu.preload(r[1]
+ rollmenu.r_img_suffix);

            img_item.rollsrc
= img_item.src.replace(rexp, rollmenu.r_img_suffix + rollmenu.img_ext);

            img_item.defsrc
= img_item.src;

            rollmenu.l(img_item,"mouseover",
rollmenu.s);

            rollmenu.l(img_item,"mouseout",
rollmenu.h);

          }

        }

      }

    },

    l : function(o, e, a){

      if (o.addEventListener) return
o.addEventListener(e, a, false);

      else if (o.attachEvent) return o.attachEvent("on"
+ e, a);

      else return false;

    }

}



rollmenu.l(window.addEventListener || window.attachEvent ? window :
document.addEventListener ? document : null, "load", rollmenu.init);


HTML


Придуманный HTML атрибут links
является регулярным выражением, которое
отвечает за выбор и статическую
подсветку нужного пункта меню.


Пример:


<a href="/"><img src="/images/menu/home.gif"
links="home|login|^$" /></a>

<a href="/ourservices"><img src="/images/menu/serv.gif"
links="ourservices" /></a>

<a href="/member"><img src="/images/menu/member.gif"
links="member" /></a>

<a href="/aboutus"><img src="/images/menu/about.gif"
links="aboutus" /></a>

<a href="/feedback"><img src="/images/menu/contact.gif"
links="feedback" /></a>





Прокомментировать
Хотите оставить свои комментарии? Зарегистрируйтесь на нашем сайте!

 
(c) Anshlag 2002 - 2008