Menu
Hey,
I’m working on a rollover menu that is giving me some problems. Originally the images were accessed by going document.images[i].src and changing it. This worked fine and would access the image’s source. It didn’t work so great when I kept changing how many images came before the menu, thus messing up its order in the images array. It stopped being feasible completely when I used some PHP to make the number of images before the menu variable. So I reworked it by building a new array that referred to the 5 images id’s.
[CODE]
var menuImages = new Array();
menuImages[0] = document.getElementById(“homeButtonPic”);
menuImages[1] = document.getElementById(“productsButtonPic”);
menuImages[2] = document.getElementById(“toolsButtonPic”);
menuImages[3] = document.getElementById(“aboutusButtonPic”);
menuImages[4] = document.getElementById(“contactusButtonPic”);
No warnings there. But when I try to access the source of those elements with this code below, it says menuImages[i] is null. ImgOver[i].src is the array of images containing the image which should be displayed when moused over.
[CODE]
if (document.images) menuImages[i].src = ImgOver[i].src;
Are arrays of elements not allowed or is there some other issue?
[CODE]
var menuImages = new Array();
menuImages[0] = document.getElementById("homeButtonPic");
alert( menuImages[0] );
[/CODE]If it's null, then the element doesn't exist at that point.[code=php]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Default</title>
<style type="text/css">
</style>
<script type="text/javascript">
function init(){
//An array of our button names minus state
var navArr = ["home","product","tools","about","contact"];
// find the unordered list element by it's id "nav"
var nav = document.getElementById("nav");
// from that then find all child img elements of nav and return an array
var navImgs = nav.getElementsByTagName("img");
// navImgs is an array of all the img elements so we can now loop through them.
for ( var i = 0, len = navImgs.length; i < len; i+=1){
// add an index no so we can then pick the appropriate name from navArr in our handler functions
navImgs[i].indexNo = i;
// e.g. function(){this.src = "ASSETS/"+"home"+"On.jpg"}. This refers to the img element.
navImgs[i].onmouseover = function (){this.src = "ASSETS/"+navArr[this.indexNo]+"On.jpg";};
navImgs[i].onmouseout = function (){this.src = "ASSETS/"+navArr[this.indexNo]+"Off.jpg";};
}
}
window.onload = init; // we need to wait for the page to load before accessing dom elements.
</script>
</head>
<body>
<ul id = "nav">
<li><a href = "#"><img src = "ASSETS/homeOff.jpg" /></a></li>
<li><a href = "#"><img src = "ASSETS/productOff.jpg" /></a></li>
<li><a href = "#"><img src = "ASSETS/toolsOff.jpg" /></a></li>
<li><a href = "#"><img src = "ASSETS/aboutOff.jpg" /></a></li>
<li><a href = "#"><img src = "ASSETS/contactOff.jpg" /></a></li>
</ul>
</body>
</html>
[/code][code=php]<?php
echo '
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>' . $title . '</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="scripts/menus.js" type="text/javascript"></script>
<script src="scripts/averageusage.js" type="text/javascript"></script>
<script src="scripts/averagesun.js" type="text/javascript"></script>
<script src="scripts/accountcreation.js" type="text/javascript"></script>
<script src="scripts/index.js" type="text/javascript"></script>
<script type="text/javascript">
var menuImages = new Array(5);
if (document.images) {
var ImgOver = new Array();
ImgOver[0] = new Image;
ImgOver[1] = new Image;
ImgOver[2] = new Image;
ImgOver[3] = new Image;
ImgOver[4] = new Image;
ImgOver[0].src = "images/newHomeOver.png";
ImgOver[1].src = "images/newProductsOver.png";
ImgOver[2].src = "images/newSizingOver.png";
ImgOver[3].src = "images/newAboutOver.png";
ImgOver[4].src = "images/newContactOver.png";
var ImgOut = new Array();
ImgOut[0] = new Image;
ImgOut[1] = new Image;
ImgOut[2] = new Image;
ImgOut[3] = new Image;
ImgOut[4] = new Image;
ImgOut[0].src = "images/newHomeOut.png";
ImgOut[1].src = "images/newProductsOut.png";
ImgOut[2].src = "images/newSizingOut.png";
ImgOut[3].src = "images/newAboutOut.png";
ImgOut[4].src = "images/newContactOut.png";
}
function menuInit() {
menuImages[0] = document.getElementById("homeButtonPic");
menuImages[1] = document.getElementById("productsButtonPic");
menuImages[2] = document.getElementById("toolsButtonPic");
menuImages[3] = document.getElementById("aboutusButtonPic");
menuImages[4] = document.getElementById("contactusButtonPic");
}
function RollOver(i) {
if (document.images) menuImages[i].src = ImgOver[i].src;
}
function RollOut(i) {
if (document.images) menuImages[i].src = ImgOut[i].src;
}
</script>
</head>
<body id="top" onload ="menuInit()">
<div id="container">
<div id="header">
<img src="images/lighthouselogo.jpg" alt="Logo" align="left" height="125px">
<br><br>
';
if(!isLoggedIn())
{
echo '
<div id="headerCommands">
<a href="login.php">Log in</a>
<img src="images/bluespacer.gif" width="1" height="25" border="0">
<a href="cart.php">View Cart</a>
<img src="images/bluespacer.gif" width="1" height="25" border="0">
<a href="checkout.php">Checkout</a>
</div>
';
}else{
echo '
<div id="headerCommands">
<a href="login.php">' . $user['username'] . '</a>
<img src="images/bluespacer.gif" width="1" height="25" border="0">
' . $logout . '
<img src="images/bluespacer.gif" width="1" height="25" border="0">
<a href="cart.php">View Cart</a>
<img src="images/bluespacer.gif" width="1" height="25" border="0">
<a href="checkout.php">Checkout</a>
</div>
';
}
echo '
</div>
<div id="menu">
<ul>
<li id="home" class="menuHeader">
<a href="index.php"><img src="images/newHomeOut.png" id="homeButtonPic" name="homeButtonPic" alt="Home"
onmouseover="RollOver(0)" onmouseout="RollOut(0)"></a>
</li>
<li id="products" class="menuHeader">
<a href="products.php"><img src="images/newProductsOut.png" id="productsButtonPic" name="productsButtonPic" alt="Products"
onmouseover="RollOver(1)" onmouseout="RollOut(1)"></a>
</li >
<li id="sizing" class="menuHeader">
<a href="averageusage.php"><img src="images/newSizingOut.png" id="toolsButtonPic" name="toolsButtonPic" alt="Tools"
onmouseover="RollOver(2)" onmouseout="RollOut(2)"></a>
</li >
<li id="aboutUs" class="menuHeader">
<a href="aboutus.php"><img src="images/newAboutOut.png" id="aboutusButtonPic" name="aboutusButtonPic" alt="About Us"
onmouseover="RollOver(3)" onmouseout="RollOut(3)"></a>
</li>
<li id="contactUs" class="menuHeader">
<a href="contactus.php"><img src="images/newContactOut.png" id="contactusButtonPic" name="contactusButtonPic" alt="Contact Us"
onmouseover="RollOver(4)" onmouseout="RollOut(4)"></a>
</li>
</ul>
</div>
';
?>
[/code]For now I want to try and fix this code as I am really developing this site for practice and so I want to see what I don't understand with my code.[/QUOTE]
[code=php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Default</title>
<style type="text/css">
body {background-color: #333; color: #ccc;}
ul#nav {
float: left;
margin: 0px; padding: 0px;
list-style: none;
border: 1px solid #444;
}
ul#nav li{
float: left;
}
ul#nav li a{
display: block;
width: 107px; height: 33px; /* Size of button */
color: #ccc;
font: 12px/23px verdana;
text-align: center;
text-decoration: none;
background: url("ASSETS/Buttons.jpg") top left; /* inactive vertically at the top */
}
ul#nav li a:hover { /* onhover move the background image vertically to the centre */
color: white; background-position: center left;
}
ul#nav li a:active { /* onclick move the background image vertically to the bottom */
color: white; background-position: bottom left;
}
.clear {clear: both;}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">home</a></li>
<li><a href="#">products</a></li>
<li><a href="#">tools</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
</ul>
<div class="clear"> </div>
<p><img src = "ASSETS/Buttons/Buttons.jpg" /> The full sprite image used 107x99px.</p>
</body>
</html>
[/code]<i>
</i>var initialized = false;
<i>
</i> function menuInit() {
menuImages[0] = document.getElementById("homeButtonPic");
menuImages[1] = document.getElementById("productsButtonPic");
menuImages[2] = document.getElementById("toolsButtonPic");
menuImages[3] = document.getElementById("aboutusButtonPic");
menuImages[4] = document.getElementById("contactusButtonPic");
initialized = true;
}
<i>
</i>function RollOver(i)
{
if(!initialized) return
if (document.images) menuImages[i].src = ImgOver[i].src;
}
Problem is that you need to "bind" your events to the images upon page load. Using inline Javascript events is also a bit deprecated. Basically, in your onload event, you need to assign your "mouseover" and "mouseout" functions to those elements.
[/QUOTE]
[CODE] <script type="text/javascript">
var menuImages = new Array(6);
if (document.images) {
var ImgOver = new Array();
ImgOver[0] = new Image;
ImgOver[1] = new Image;
ImgOver[2] = new Image;
ImgOver[3] = new Image;
ImgOver[4] = new Image;
ImgOver[5] = new Image;
ImgOver[0].src = "images/newHomeOver.png";
ImgOver[1].src = "images/newProductsOver.png";
ImgOver[2].src = "images/newSizingOver.png";
ImgOver[3].src = "images/newContractorsOver.png";
ImgOver[4].src = "images/newAboutOver.png";
ImgOver[5].src = "images/newContactOver.png";
var ImgOut = new Array();
ImgOut[0] = new Image;
ImgOut[1] = new Image;
ImgOut[2] = new Image;
ImgOut[3] = new Image;
ImgOut[4] = new Image;
ImgOut[5] = new Image;
ImgOut[0].src = "images/newHomeOut.png";
ImgOut[1].src = "images/newProductsOut.png";
ImgOut[2].src = "images/newSizingOut.png";
ImgOut[3].src = "images/newContractorsOut.png";
ImgOut[4].src = "images/newAboutOut.png";
ImgOut[5].src = "images/newContactOut.png";
}
function RollOver(i) {
if (document.images) menuImages[i].src = ImgOver[i].src;
}
function RollOut(i) {
if (document.images) menuImages[i].src = ImgOut[i].src;
}
function menuInit() {
menuImages[0] = document.getElementById("homeButtonPic");
menuImages[1] = document.getElementById("productsButtonPic");
menuImages[2] = document.getElementById("toolsButtonPic");
menuImages[3] = document.getElementById("contractorsButtonPic");
menuImages[4] = document.getElementById("aboutusButtonPic");
menuImages[5] = document.getElementById("contactusButtonPic");
for (i = 0; i < menuImages.length; i++) {
alert("made it here and " + i + " is i");
menuImages[i].addEventListener("onmouseover", RollOver(i), false);
alert("made it here too");
menuImages[i].addEventListener("onmouseout", RollOut(i), false);
}
}
</script>
</head>
<body id="top" onload ="menuInit()">[/CODE][code=php]function iD(id){return document.getElementById(id);} // saves typing document.getElementById each time
menuImages = [];
menuImages[0] = iD("homePic");
menuImages[1] = iD("productsPic");
menuImages[2] = iD("toolsPic");
menuImages[3] = iD("aboutPic");
menuImages[4] = iD("contactPic");
for (i = 0, len = menuImages.length; i < len; i+=1) {
menuImages[i].onmouseover = function(){rollOver(this);}; // this refers to the current image element
menuImages[i].onmouseout = function(){rollOut(this);}; // this refers to the current image element
}
function rollOver(x){
// e.g. x = <img id="homePic" src="images/newHomeOut.png"> The image element which fired the event
x.src = x.src.replace(/Out/,"Over"); //e.g. images/newHomeOut.png is replaced with images/newHomeOver.png
}
function rollOut(x){
x.src = x.src.replace(/Over/,"Out");
}[/code][code=php]for (i = 0, len = menuImages.length; i < len; i+=1) {
menuImages[i].indexNo = i; // value i is assigned to a new property indexNo
menuImages[i].onmouseover = function(){ rollOver(this.indexNo) };
menuImages[i].onmouseout = function(){ rollOut(this.indexNo) };
}
function rollOver(x){
console.log(x);
}
function rollOut(x){
console.log(x);
}[/code][code=php]for (i = 0, len = menuImages.length; i < len; i+=1) {
menuImages[i].onmouseover = (function(x){ return function(){rollOver(x);}})(i);
menuImages[i].onmouseout = (function(x){ return function(){rollOut(x);}})(i);
}
function rollOver(x){
console.log(x);
}
function rollOut(x){
console.log(x);
}[/code][code=php]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Default</title>
<style type="text/css">
body {background-color: #333; color: #ccc;}
a img { border: none; }
ul#nav { float: left; margin: 0px; padding: 0px; list-style: none; border: 1px solid #444;}
ul#nav li{ float: left; }
ul#nav li a{ display: block; width: 107px; height: 33px; outline: none; }
</style>
</head>
<body>
<ul id = "nav">
<!-- replace src names with your filenames -->
<li><a href="#"><img id = "homePic" src="ASSETS/Buttons/ButtonOut.jpg" /></a></li>
<li><a href="#"><img id = "productsPic" src="ASSETS/Buttons/ButtonOut.jpg" /></a></li>
<li><a href="#"><img id = "toolsPic" src="ASSETS/Buttons/ButtonOut.jpg" /></a></li>
<li><a href="#"><img id = "aboutPic" src="ASSETS/Buttons/ButtonOut.jpg" /></a></li>
<li><a href="#"><img id = "contactPic" src="ASSETS/Buttons/ButtonOut.jpg" /></a></li>
</ul>
<script type="text/javascript">
function iD(id){return document.getElementById(id);} // saves typing document.getElementById each time
function handler (element, type, fn){
if (element.addEventListener) {element.addEventListener(type, fn, false);} // if mozilla
else if (element.attachEvent) {element.attachEvent('on'+type, fn);} // if IE
else {element['on'+type] = fn;} // a fallback for older browsers.
}
// Add the events to the main nav container element
var navElement = iD("nav");
handler (navElement, "mouseover", rollOver);
handler (navElement, "mouseout", rollOver);
function rollOver(e){ // Out handler function
var event = e ? e: window.e; // mozilla : IE
var target = event.target || event.srcElement; // mozilla : IE. What element fired the event?
var eventType = event.type; // mouseover? mouseout?
if (target.nodeName === "IMG") { // is the element an img type
var currSrc = target.src;
target.src = (eventType === "mouseover") ? currSrc.replace(/Out/,"Over") : currSrc.replace(/Over/,"Out");
}
}
</script>
</body>
</html>[/code]0.1.9 — BETA 5.18