Hopefully simple problem with code in Chrome

[jbhorne]

I'm having a problem with a navigation map that uses javascript and CSS to shift a sprite.

The sprite image is located at www.eagleonedims.com/images/navmap.jpg. On each <li> rollover, I need the ENTIRE sprite shifted by 88px to account for the overlapping effect.

The page in question is located at www.eagleonedims.com/index2.php.

If you view this page in IE, the navigation rollover works. However, it does not work in Chrome. I have not tested Firefox. NOTE: I've only setup the HOME button.

Any ideas why it will not work in Chrome? It's frustrating me to say the least. Thanks in advance!

Here's the pertinent code:
HTML HEAD:

<script type="text/javascript">
function changePosition(num)
{
if (num==0){var posy=0}
if (num==1){var posy=-88}
if (num==2){var posy=176}
document.getElementById('navmap').style.backgroundPosition="0 "+posy+"";
}
</script>

HTML BODY:

<div id="navigation">
	<ul id="navmap">
	<li id="home" onmouseover="changePosition(1)" onmouseout="changePosition(0)"><a href="index2.php">Home</a></li>
        <li id="about"><a href="about.php">About</a></li>
        <li id="pricing"><a href="pricing.php">Pricing</a></li>
        <li id="quote"><a href="quote.php">Quote</a></li>
        <li id="contact"><a href="contact.php">Contact</a></li>
        <li id="login"><a href="login.php">Login</a></li>
   </ul>    
</div>

CSS:

#navmap {
	width: 1000px;
	height: 88px;
	background: url("images/navmap.jpg");
	margin: 0;
	padding: 0;
	position: relative;
}

#navmap li {
	margin: 0;
	padding: 0;
	list-style: none;
	top: 0;
	position: absolute;
}

*#navmap li, #navmap a {
	height: 88px;
	display: block;
}


#home {left: 141px; width: 110px;}
#about {left: 251px; width: 120px;}
#pricing {left: 371px; width: 120px;}
#quote {left: 491px; width: 120px;}
#contact {left: 611px; width: 120px;}
#login {left: 731px; width: 128px;}

[Taywin]

Can't get to the website... Only shows "No specified file" for me. I'm using FF as well.

Anyway, I tried it locally, it works if you change...

if (num==0){var posy=0}
if (num==1){var posy=-88}
if (num==2){var posy=176}

to

var posy
if (num==0){posy=0}
if (num==1){posy=-88}
if (num==2){posy=176}

The reason is that your posy is local inside "if" statement. You are supposed to declare it as local inside the function, not the if statement, because you are using it after you assign a value to it. Using 'var' is to declare the variable to be local in the scope. Better yet, you could change it to if-else or switch statement, so the interpretor wouldn't need to hit all if statements while going through the function.

// one possible way to use switch statement
// you could initialize posy=0 and get rid of default option
var posy
switch (num) {
  case 1:
    posy = -88
    break
  case 2:
    posy = 176
    break
  default:
    posy = 0
}

// another way to use if-else statement
// you could initialize posy=0 and get rid of else statement
var posy
if (num==1) { posy = -88 }
else if (num==2) { posy = 176 }
else { posy = 0 }

[jbhorne]

Thanks for the switch statement! I've modified it accordingly.

I found that by identifying the values as px, I got the function to work in Chrome and FF.

Instead of:

document.getElementById('navmap').style.backgroundPosition="0 "+posy+"";

I changed it to:

document.getElementById('navmap').style.backgroundPosition="0px "+posy+"px";

And it worked!