Menu
Hi,
I am trying to feature a select-and-go navigation script and also a mouseOver script on the same page.
Here is the page:
[url]http://www.scottfennell.com/mof/index1.php
Expected behavior:
You roll your mouse over the small photos to see a blown-up version. You select a recent project from the drop down menu to go to that project’s page.
Actual behavior:
Whichever script I call second in the head of my html page gets executed. Whichever one I call first does not.
HTML head section:
[CODE]<!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” xml:lang=”en” lang=”en”>
<head>
<title>Matter of Fact Maintenance</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<link rel=”icon” href=”favicon.ico” type=”image/x-icon” />
<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” />
<link rel=”stylesheet” type=”text/css” href=”mofstyle.css” />
<script type=”text/javascript” src=”scriptprojects.js”></script>
<script type=”text/javascript” src=”selectandgo.js”></script>
</head>
mouseOver script:
[CODE] window.onload = rolloverInit;
function rolloverInit() {
for (var i=0; i<document.links.length; i++) {
var linkObj = document.links[i];
if (linkObj.className) {
var imgObj = document.getElementById(linkObj.className);
if (imgObj) {
setupRollover(linkObj,imgObj);
}
}
}
}
function setupRollover(thisLink,textImage) {
thisLink.imgToChange = textImage;
thisLink.onmouseover = rollOver;
thisLink.outImage = new Image();
thisLink.outImage.src = textImage.src;
thisLink.overImage = new Image();
thisLink.overImage.src = thisLink.id + “b.jpg”;
}
function rollOver() {
this.imgToChange.src = this.overImage.src;
}
seclect-and-go script:
[CODE]window.onload = initForm;
window.onunload = function() {};
function initForm() {
document.getElementById(“newLocation”).selectedIndex = 0;
document.getElementById(“newLocation”).onchange = jumpPage;
}
function jumpPage() {
var newLoc = document.getElementById(“newLocation”);
var newPage = newLoc.options[newLoc.selectedIndex].value;
if (newPage!= “”) {
window.location = newPage;
}
}
My theory: Both functions are called with the window.onload event, and the first one gets forgotten about when the second one is encountered.
I am very much a novice and don’t really know what my alternative is.
Thank you!
Scott