// Menu JavaScripts // ================ // These JavaScripts make it easy to add MouseOver and Click effects to // menus that use hyperlinked images as menu-items. It exploits the logic of // using the same name in image filenames and image objects used for // menu-items. // Features // ++++++++ // * doesn't work in all browsers, apply your favorite browser check to fix // * parameter driven: just change the parameters in the calling function // to adapt the script to another menu, no need to edit the scripts // * inter-frame adaption // * persistent hovering behaviour supports clicking with the selector // * 6 possible levels of activity // Manual // ++++++ // If you know the meaning of foo you should be able to figure this out... // In directory: // ------------- // menu.js = this file // foo0.jpg = regular image // foo1.jpg = regular hovered image // foo2.jpg = confirmed image // foo3.jpg = active image // foo4.jpg = regular followed image // foo5.jpg = hovered followed image // In document containing menu: // ---------------------------- // // // a: number of images above first menu image // b: number of menu images // c: number of alternative images [1..6] //

// In linked document foo: // ----------------------- // // // To bar // ipenburg@xs4all.nl 19990125 // +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ // knows_img checks if the UA can handle an image array, // but this can only be checked after the first image-tag is parsed, // image-events are therefore disabled until the page is fully loaded // and the only bug is that the image doesn't correspond to hovering when // an image is already hovered while loading the images var knows_img = false; var in_front = 0; var in_menu = 0; var in_app = 0; // initialize the images and other settings, // call this function with the onLoad event in the BODY tag of the menu function init(front, menu, app ) { knows_img = document.images; if (knows_img) { in_front = front; in_menu = menu; in_app = app; var ext = document.images[in_front].src.slice(document.images[in_front].src.lastIndexOf('.') ); for (var i = in_front; i < (in_front + in_menu); i++ ) { // include menu document in all images for access from other frames document.images[i].parent = self; document.images[i].app = new Object(in_app); for (var j = 0; j < in_app; j++ ) { document.images[i].app[j] = new Image(); document.images[i].app[j].src = document.images[i].name + j + ext; } } } } // change regular image to hovered image function over_img(img_obj) { if (knows_img ) { // set image as hovered img_obj.hov = true; if (in_app > 1 ) { // if image is 0 then change it to 1 if (img_obj.src == img_obj.app[0].src ) { img_obj.src = img_obj.app[1].src; } } if (in_app == 6 ) { // if image is 4 then change it to 5 if (img_obj.src == img_obj.app[4].src ) { img_obj.src = img_obj.app[5].src; } } } } // change hovered image to regular image function out_img(img_obj) { if (knows_img ) { // set image as not-hovered img_obj.hov = false; if (in_app > 1 ) { // if image is 1 change it to 0 if (img_obj.src == img_obj.app[1].src ) { img_obj.src = img_obj.app[0].src; } } if (in_app >= 6 ) { // if image is 5 change it to 4 if (img_obj.src == img_obj.app[5].src ) { img_obj.src = img_obj.app[4].src; } } } } // change image to active image function act_img(img_obj) { // get target for calls from other frames var target = img_obj.parent; if (target.knows_img ) { // walk through all menu-item images for (var i = target.in_front; i < (target.in_front + target.in_menu); i++ ) { // if only 3 images are used confirmed image is placed if (target.in_app == 3 ) { // image is changed to 2 if (target.document.images[i] == img_obj) { img_obj.src = img_obj.app[2].src; } // other images are changed to 0 or 1 else { // if image is hovered image is changed to 1 if (target.document.images[i].hov ) { target.document.images[i].src = target.document.images[i].app[1].src; } // else image is changed to 0 else { target.document.images[i].src = target.document.images[i].app[0].src; } } } // if 4 images are used activated image is placed if (target.in_app == 4 ) { // clicked image is changed to 3 if (target.document.images[i] == img_obj) { img_obj.src = img_obj.app[3].src; } // other images are changed to 0 or 1 else { // confirmed images stay confirmed if (target.document.images[i].src != target.document.images[i].app[2].src ) { // if image is hovered image is changed to 1 if (target.document.images[i].hov ) { target.document.images[i].src = target.document.images[i].app[1].src; } else { target.document.images[i].src = target.document.images[i].app[0].src; } } } } // if 5 images are used activated image is placed if (target.in_app == 5 ) { // clicked image is changed to 3 if (target.document.images[i] == img_obj ) { img_obj.src = img_obj.app[3].src; } // other images are changed to 0, 1 or 4 else { // confirmed images stay confirmed if (target.document.images[i].src != target.document.images[i].app[2].src ) { // if image is followed followed image is placed if (target.document.images[i].fol ) { target.document.images[i].src = target.document.images[i].app[4].src; } // if image is not followed else { if (target.document.images[i].hov ) { target.document.images[i].src = target.document.images[i].app[1].src; } else { target.document.images[i].src = target.document.images[i].app[0].src; } } } } } if (target.in_app == 6 ) { // clicked image is changed to 3 if (target.document.images[i] == img_obj ) { img_obj.src = img_obj.app[3].src; } // other images are changed to 0, 1, 4 or 5 else { // confirmed images stay confirmed if (target.document.images[i].src != target.document.images[i].app[2].src ) { // if image is followed followed image is placed if (target.document.images[i].fol ) { if (target.document.images[i].hov ) { target.document.images[i].src = target.document.images[i].app[5].src; } else { target.document.images[i].src = target.document.images[i].app[4].src; } } // if image is not followed else { if (target.document.images[i].hov ) { target.document.images[i].src = target.document.images[i].app[1].src; } else { target.document.images[i].src = target.document.images[i].app[0].src; } } } } } } } } // change active image to confirmed image function conf_img(img_obj) { // get target for calls from other frames var target = img_obj.parent; // confirm image img_obj.fol = true; if (target.knows_img) { if (target.in_app == 4 ) { // walk through all menu-item images for (var i = target.in_front; i < (target.in_front + target.in_menu); i++ ) { if (target.document.images[i].src == target.document.images[i].app[2].src ) { // if hovered if (target.document.images[i].hov ) { target.document.images[i].src = target.document.images[i].app[1].src; } else { target.document.images[i].src = target.document.images[i].app[0].src; } } } } if (target.in_app == 5 ) { // walk through all menu-item images for (var i = target.in_front; i < (target.in_front + target.in_menu); i++ ) { if (target.document.images[i].src == target.document.images[i].app[2].src ) { // if followed if (target.document.images[i].fol ) { target.document.images[i].src = target.document.images[i].app[4].src; } else { // if hovered if (target.document.images[i].hov ) { target.document.images[i].src = target.document.images[i].app[1].src; } else { target.document.images[i].src = target.document.images[i].app[0].src; } } } } } if (target.in_app == 6 ) { // walk through all menu-item images for (var i = target.in_front; i < (target.in_front + target.in_menu); i++ ) { if (target.document.images[i].src == target.document.images[i].app[2].src ) { // if followed if (target.document.images[i].fol ) { // if hovered if (target.document.images[i].hov ) { target.document.images[i].src = target.document.images[i].app[5].src; } else { target.document.images[i].src = target.document.images[i].app[4].src; } } else { // if hovered if (target.document.images[i].hov ) { target.document.images[i].src = target.document.images[i].app[1].src; } else { target.document.images[i].src = target.document.images[i].app[0].src; } } } } } if (target.in_app >= 3 ) { img_obj.src = img_obj.app[2].src; } } }