И снова кактусы. Объектные.

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

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

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

JavaScript

/*
created by alexander shurkayev <alshur@ya.ru> | http://htmlcssjs.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>