//--- list of image names we want to use, just for convenience ----- //--- this is the only place where we change names if we want ----- //--- no actual image names is referenced in index.html directly --- var imgNames = []; imgNames[0] = ["home_up.png" , "home_over.png" , "home_dwn.png" ]; imgNames[1] = ["prices_up.png" , "prices_over.png" , "prices_dwn.png" ]; imgNames[2] = ["gallery_up.png" , "gallery_over.png" , "gallery_dwn.png" ]; imgNames[3] = ["about_up.png" , "about_over.png" , "about_dwn.png" ]; imgNames[4] = ["contacts_up.png", "contacts_over.png", "contacts_dwn.png"]; imgNames[5] = ["book_up.gif" , "book_over.png" , "book_dwn.png" ]; var pageLinks = ["home.html", "prices.html", "gallery.html", "about.html", "contacts.html", "book.html"]; //--- now, we "preload" all images and store them in btn_img list -- //--- after that we don't need imgNames anylonger ------------------ var btn_img = []; for (i = 0; i < imgNames.length; i++) { btn_img[i] = []; for (j = 0; j < 3; j++) { btn_img[i][j] = new Image(); btn_img[i][j].src = "resourses/" + imgNames[i][j]; // we don't forget images are in "resources" directory } } //--- and finaly the actual logic of our script -------------------- var sel_id = 0; // this variable "remembers" which button is pressed currently // -1 means that no buttons are pressed initially (just for fun) // we just do to press "home" and initialize other buttons // this are definitions for three possible states of our buttons var STATE_UP = 0; var STATE_OVER = 1; var STATE_DWN = 2; function setButtonState(id, state) { if (sel_id == id) return; // no need to change btn state if it is already pressed (the one we remember) // otherwise we do change its image/state document.images["btn_" + id].src = btn_img[id][state].src; if (state == STATE_DWN) { // few extra things to take care about if the button's state become "pressed" // if we press other button, the currently pressed one must be "released" if (sel_id >= 0) document.images["btn_" + sel_id].src = btn_img[sel_id][STATE_UP].src; sel_id = id; // now we update "pressed" id and remember it for the next time //--- and here we might also perform actuall loading of iFrames etc, if we decide so...? //--- instead of setting "href" in index.html // loadPage(sel_id); } } function loadPage(num) { frame = document.getElementById('ContentFrame'); frame.src = pageLinks[num]; } function mOutBtn (id) { setButtonState(id, STATE_UP ); } function mOverBtn (id) { setButtonState(id, STATE_OVER); } function mPressBtn(id) { setButtonState(id, STATE_DWN ); } // we call this in // it will set initial images "UP" for all buttons except "home" (which we set "pressed" instead) function initialize() { for (i = 1; i < btn_img.length; i++) { // note, we start from "i = 1", because for "i = 0" we use mPressed(0); document.images["btn_" + i].src = btn_img[i][STATE_UP].src; } mPressBtn(0); // set home to state "pressed" }