Preload и rollover кактусов

кактусы взяты c florashop.ru

HTML

<img src="/i/kak/1.jpg" alt="Кактус 1" width="130" height="130" /> <img src="/i/kak/2.jpg" alt="Кактус 2" width="130" height="130" /> <img src="/i/kak/123.jpg" alt="Кактус 123" width="130" height="130" />

Файлы с картинками обзывайте цифрами. Активные картинки нужно величать соответственно JavaScript переменной active_img_suffix (см. ниже).

JavaScript

<script type="text/javascript">
<!--
/*
created by alexander shurkayev <alshur@ya.ru> | http://htmlcssjs.ru
modified by ilya lebedev (ilya@lebedev.net)
*/

var img_path = "/i/"; // путь к картинкам от корня сайта
var img_menu_dir = "kak"; // папка с картинками, которые должны меняться (никаких слэшей в названии!)
var img_ext = ".jpg"; // расширение у меняемых картинок (должно быть у всех одинаково)
var active_img_suffix = "s"; // суффикс у активных картинок (т. е. в моём случае путь к первой активной картинке такой: "/i/kak/1s.jpg")

function preloadImg(file){
  var image = new Image();
  image.src = img_path + img_menu_dir + "/" + file + img_ext;
}

function show(e){
  var el = window.event ? window.event.srcElement : e.currentTarget;
  var str = img_menu_dir + "\\/(\\d+)" + img_ext;
  var re = new RegExp(str, "i");
  el_src = el.src;
  r = el_src.match(re);
  if (r) el.src = img_path + img_menu_dir + "/" + r[1] + active_img_suffix + img_ext;
}

function hide(e){
  var el = window.event ? window.event.srcElement : e.currentTarget;
  var str = img_menu_dir + "\\/(\\d+)" + active_img_suffix + img_ext;
  var re = new RegExp(str, "i");
  el_src = el.src;
  r = el_src.match(re);
  if (r) el.src = img_path + img_menu_dir + "/" + r[1] + img_ext;
}

function init(){
  if (document.images){
    var img_item = img_item_src = r = null;
    var str = img_menu_dir + "\\/(\\d+)" + img_ext;
    var re = new RegExp(str, "i");
    for (var i = 0; (img_item = document.getElementsByTagName("img").item(i)); i++){
      img_item_src = img_item.src;
      r = img_item_src.match(re);
      if (!r) continue; // !!!
      preloadImg(r[1] + active_img_suffix);
      if (img_item.addEventListener){
        img_item.addEventListener("mouseover", show, false);
        img_item.addEventListener("mouseout", hide, false);
      }else if (img_item.attachEvent){
        img_item.attachEvent("onmouseover", show);
        img_item.attachEvent("onmouseout", hide);
      }
    }
  }
}

var root = window.addEventListener || window.attachEvent ? window : document.addEventListener ? document : null;
if (root){
  if (root.addEventListener) root.addEventListener("load", init, false);
  else if (root.attachEvent) root.attachEvent("onload", init);
}
//-->
</script>

Совместимость

IE5+, NN6/Mozilla, Opera6+.

Меняющиеся кнопки легко настроить за минуту.