/** * JS for rescale.de * Written by Nils Peuser / dark Spirit Software (2007) */ /** * Add new connections here. This function is called, when the page is loaded */ function initPage() { // Parameters of "createMouseOverImage()" are: // 1. HTML ID of the image // 2. Path to the "onmouseover" Image // 3. Path to the "onmouseout" Image // createMouseOverImage('newsPic01', 'img/news_pic_01-1.gif', 'img/news_pic_01-0.gif'); // createMouseOverImage('newsPic02', 'img/news_pic_01-1.gif', 'img/news_pic_01-0.gif'); createMouseOverImage('client1', 'img//clients//client_pic_01-1.gif', 'img//clients//client_pic_01-0.gif'); createMouseOverImage('client2', 'img//clients//client_pic_02-1.gif', 'img//clients//client_pic_02-0.gif'); createMouseOverImage('client3', 'img//clients//client_pic_03-1.gif', 'img//clients//client_pic_03-0.gif'); createMouseOverImage('client4', 'img//clients//client_pic_04-1.gif', 'img//clients//client_pic_04-0.gif'); createMouseOverImage('client5', 'img//clients//client_pic_05-1.gif', 'img//clients//client_pic_05-0.gif'); createMouseOverImage('client6', 'img//clients//client_pic_06-1.gif', 'img//clients//client_pic_06-0.gif'); createMouseOverImage('client7', 'img//clients//client_pic_07-1.gif', 'img//clients//client_pic_07-0.gif'); createMouseOverImage('client8', 'img//clients//client_pic_08-1.gif', 'img//clients//client_pic_08-0.gif'); // Webdesign createMouseOverImage('ci', 'img//web//ci-1.gif', 'img//web//ci-0.gif'); createMouseOverImage('bk', 'img//web//bk-1.gif', 'img//web//bk-0.gif'); createMouseOverImage('rd06', 'img//web//rd06-1.gif', 'img//web//rd06-0.gif'); createMouseOverImage('opw2', 'img//web//opw2-1.gif', 'img//web//opw2-0.gif'); createMouseOverImage('woc', 'img//web//woc-1.gif', 'img//web//woc-0.gif'); createMouseOverImage('mg', 'img//web//mg-1.gif', 'img//web//mg-0.gif'); createMouseOverImage('gd', 'img//web//gd-1.gif', 'img//web//gd-0.gif'); createMouseOverImage('kum', 'img//web//kum-1.gif', 'img//web//kum-0.gif'); createMouseOverImage('tc', 'img//web//tc-1.gif', 'img//web//tc-0.gif'); createMouseOverImage('rc', 'img//web//rc-1.gif', 'img//web//rc-0.gif'); createMouseOverImage('dl', 'img//web//dl-1.gif', 'img//web//dl-0.gif'); createMouseOverImage('im', 'img//web//im-1.gif', 'img//web//im-0.gif'); createMouseOverImage('ap', 'img//web//ap-1.gif', 'img//web//ap-0.gif'); createMouseOverImage('zp', 'img//web//zp-1.gif', 'img//web//zp-0.gif'); // Parameters of "connect()" are: // 1. HTML ID of the image // 2. HTML ID of the corresponding link // 3. Path to the "onmouseover" Image // 4. Path to the "onmouseout" Image // 5. CSS classname of the hovered text link // 6. CSS classname of the normal text link // 7. If set to true, when hovering over the text, the image will also be highlighted. // One image may only be connected to ONE text, when this is set to true connect('imageHome', 'linkHome', 'img/icoHome1.gif', 'img/icoHome0.gif', 'main_nav_hoverhelp', 'main_nav', true); connect('imageAbout', 'linkAbout', 'img/icoimp1.gif', 'img/icoimp0.gif', 'main_nav_hoverhelp', 'main_nav', true); connect('imageContact', 'linkContact', 'img/icocontact1.gif', 'img/icocontact0.gif', 'main_nav_hoverhelp', 'main_nav', true); connect('imageFlag1', 'linkHome', 'img/icoFlag1-2.gif', 'img/icoFlag1-1.gif', 'main_nav_hoverhelp', 'main_nav', true); connect('imageFlag2', 'linkHome', 'img/icoFlag2-2.gif', 'img/icoFlag2-1.gif', 'main_nav_hoverhelp', 'main_nav', true); connect('imageLeftTop', 'linkWork', 'img/imgWeb1.jpg', 'img/imgWeb0.jpg', 'main_nav_hoverhelp', 'main_nav', false); connect('imageRightTop', 'linkWork', 'img/imgLogos1.jpg', 'img/imgLogos0.jpg', 'main_nav_hoverhelp', 'main_nav', false); connect('imageLeftBottom', 'linkWork', 'img/imgArt1.jpg', 'img/imgArt0.jpg', 'main_nav_hoverhelp', 'main_nav', false); connect('imageRightBottom', 'linkWork', 'img/imgGames1.jpg', 'img/imgGames0.jpg', 'main_nav_hoverhelp', 'main_nav', false); connect('newsPic01', 'linkHome', 'img/news_pic_01-1.gif', 'img/news_pic_01-0.gif', 'main_nav_hoverhelp', 'main_nav', false); connect('newsPic02', 'linkWork', 'img/news_pic_02-1.gif', 'img/news_pic_02-0.gif', 'main_nav_hoverhelp', 'main_nav', false); connect('newsPic03', 'linkWork', 'img/news_pic_03-1.gif', 'img/news_pic_03-0.gif', 'main_nav_hoverhelp', 'main_nav', false); } // The nasty stuff is down here - ignore it ;) // ---------- IGNORE THE FOLLOWING CODE :) ----------- /** * @brief On loading the page/window, we want to call our own init function */ window.onload = function() { initPage(); } /** * @brief Connect a menu link and an image with a highlight. Create a mouse over image for the image in the process. * * @param imageId HTML ID of the image * @param linkId HTML ID of the corresponding link * @param inImgUrl URL to the "onmouseover" image * @param outImgUrl URL to the onmouseout image * @param inClassName CSS classname of the highlighted/hovered link * @param stdClassName CSS classname of the standard link * @param linkBack Is set to true, if the text link should also highlight the image */ function connect(imageId, linkId, inImgUrl, outImgUrl, inClassName, stdClassName, linkBack) { imageObj = xGetElementById(imageId); // Get image object linkObj = xGetElementById(linkId); // Get link object if(imageObj && linkObj) { // If both objects were caught imageObj.outImageUrl = outImgUrl; // Store the standard URL of the image for the onmouseout function imageObj.inImage = new Image(); // Create a new image for the onmouseover image. We will not just use the src of the onmouseover-Image, because then the image would be loaded when the first mouseover occurs, and not when the page is loaded. Does not look pretty ;) imageObj.inImage.src = inImgUrl; // Set the URL of the onmouseover image imageObj.connectedLinkId = linkId; // Save the text link id, so the image will know whom to highlight imageObj.outClassName = stdClassName; // Save the standard class name of the text link (non highlighted) imageObj.overClassName = inClassName; // Save the highlight/hover class name of the text link imageObj.onmouseover = imageOnMouseover; // Set the onmouseover function imageObj.onmouseout = imageOnMouseout; // Set the onmouseout function if(linkBack) { // If we want to link back from the text, so that hovering over the text link will highlight the image linkObj.connectedImageId = imageId; // Save the image link id, so the text link will know whom to highlight linkObj.onmouseover = linkOnMouseover; // Set the onmouseover function linkObj.onmouseout = linkOnMouseout; // Set the onmouseout function } } function linkOnMouseout(ev) { // Create a new function for the textlink onmouseout event if(this.connectedImageId) { // If the link has a connected image id connImg = xGetElementById(this.connectedImageId); // Get the image connImg.onmouseout(); // Call its onmouseout function for deselection } } function linkOnMouseover(ev) { // Create a new function for the textlink onmouseout event if(this.connectedImageId) { // If the link has a connected image id connImg = xGetElementById(this.connectedImageId); // Get the connected image connImg.onmouseover(); // Call its onmouseover function for highlight } } function imageOnMouseout(ev) { // Create a new function for the onmouseout event if (this.outImageUrl && this.outClassName) { // Check if this image has an "out" URL this.src = this.outImageUrl; // If yes, set it as image path connLink = xGetElementById(this.connectedLinkId); // Get the connected link object connLink.className = this.outClassName; // Set the standard class for this link } } function imageOnMouseover(ev) { // Create a new function for the onmouseover event if (this.inImage && this.inImage.complete && this.overClassName) { // Check if this image has an "over" URL and check if the image is loaded completely this.src = this.inImage.src; // If yes, set it as image path connLink = xGetElementById(this.connectedLinkId); // Get the connected link object connLink.className = this.overClassName; // Set the hover (helper-)class for this link } } } /** * @brief Create an image that has a mouseover highlight * * @param imageId HTML ID of the image * @param inImgUrl URL to the "onmouseover" image * @param outImgUrl URL to the onmouseout image */ function createMouseOverImage(imageId, inImgUrl, outImgUrl) { imageObj = xGetElementById(imageId); // Get image object if(imageObj) { // If both objects were caught imageObj.outImageUrl = outImgUrl; // Store the standard URL of the image for the onmouseout function imageObj.inImage = new Image(); // Create a new image for the onmouseover image. We will not just use the src of the onmouseover-Image, because then the image would be loaded when the first mouseover occurs, and not when the page is loaded. Does not look pretty ;) imageObj.inImage.src = inImgUrl; // Set the URL of the onmouseover image imageObj.onmouseover = imageOnMouseover; // Set the onmouseover function imageObj.onmouseout = imageOnMouseout; // Set the onmouseout function } function imageOnMouseout(ev) { // Create a new function for the onmouseout event if (this.outImageUrl) { // Check if this image has an "out" URL this.src = this.outImageUrl; // If yes, set it as image path } } function imageOnMouseover(ev) { // Create a new function for the onmouseover event if (this.inImage && this.inImage.complete) { // Check if this image has an "over" URL and check if the image is loaded completely this.src = this.inImage.src; // If yes, set it as image path } } } // x_core.js, part of X, a Cross-Browser.com Javascript Library // Copyright (C) 2001,2002,2003,2004,2005 Michael Foster - Distributed under the terms of the GNU LGPL - OSI Certified // File Rev: 5 function xGetElementById(e) { if(typeof(e)!='string') return e; if(document.getElementById) e=document.getElementById(e); else if(document.all) e=document.all[e]; else e=null; return e; }