PDA

View Full Version : Javascript rollover problem Urgent- Need help in few Minutes.

redinferno
12-10-2008, 03:50 PM
function MouseOver(id)
{
if (id == '1')
{
document.getElementById(id).innerHTML = "<img src='images/navigation/hover/home-hover.jpg' alt='' />";
}
else if (id == '2')
{
document.getElementById(id).innerHTML = "<img src='images/navigation/hover/services-hover.jpg' alt='' />";
}
else if (id == '3')
{
document.getElementById(id).innerHTML = "<img src='images/navigation/hover/order-now-hover.jpg' alt='' />";
}
else if (id == '4')
{
document.getElementById(id).innerHTML = "<img src='images/navigation/hover/support-hover.gif' alt='' />";
}
else if (id == '5')
{
document.getElementById(id).innerHTML = "<img src='images/navigation/hover/forums-hover.jpg' alt='' />";
}
else if (id == '6')
{
document.getElementById(id).innerHTML = "<img src='images/navigation/hover/about-us-hover.jpg' alt='' />";
}
else if (id == '7')
{
document.getElementById(id).innerHTML = "<img src='images/navigation/hover/contact-hover.jpg' alt='' />";
}
}

function MouseOut(id)
{
if (id == '1')
{
document.getElementById(id).innerHTML = "<img src='images/navigation/nav-links-services.gif' alt='' />";
}
else if (id == '2')
{
document.getElementById(id).innerHTML = "<img src='images/navigation/nav-links-order-now.gif' alt='' />";
}
else if (id == '3')
{
document.getElementById(id).innerHTML = "<img src='images/navigation/hover/order-now-hover.jpg' alt='' />";
}
else if (id == '4')
{
document.getElementById(id).innerHTML = "<img src='images/navigation/nav-links-support.gif' alt='' />";
}
else if (id == '5')
{
document.getElementById(id).innerHTML = "<img src='images/navigation/nav-links-forums.gif' alt='' />";
}
else if (id == '6')
{
document.getElementById(id).innerHTML = "<img src='images/navigation/nav-links-about-us.gif' alt='' />";
}
else if (id == '7')
{
document.getElementById(id).innerHTML = "<img src='images/navigation/nav-links-contact.gif' alt='' />";
}
}



<?xml version="1.0" encoding="UTF-8" ?>

<!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>
<title> Xtreme Game Servers </title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"> </script>
</head>
<body>
<div id="Main-Body">
<center>
<img src="images/Banner.gif" alt="Banner" />
<img src="images/Ad-Placement.gif" alt="Ad" id="Ad" />
</center>
<div id="Navigation">
<span id="1" onmouseover="MouseOver('1')" onmouseout="MouseOut('1')"> <img src="images/navigation/nav-links-home.gif" /> </span>
<span id="after-second-img">
<span id="2" onmouseover="MouseOver('2')" onmouseout="MouseOut('2')"> <img src="images/navigation/nav-links-services.gif" /> </span>
<span id="3" onmouseover="MouseOver('3')" onmouseout="MouseOut('3')"> <img src="images/navigation/nav-links-order-now.gif" /> </span>
<span id="4" onmouseover="MouseOver('4')" onmouseout="MouseOut('4')"> <img src="images/navigation/nav-links-support.gif" /> </span>
<span id="5" onmouseover="MouseOver('5')" onmouseout="MouseOut('5')"> <img src="images/navigation/nav-links-forums.gif" /> </span>
<span id="6" onmouseover="MouseOver('6')" onmouseout="MouseOut('6')"> <img src="images/navigation/nav-links-about-us.gif" /> </span>
<span id="7" onmouseover="MouseOver('7')" onmouseout="MouseOut('7')"> <img src="images/navigation/nav-links-contact.gif" /> </span>
</span>
</div>
<div id="Provided-Games">
<img src="images/Provided-Games.png" alt="Provided Games" id="Provided-Games-Image" />
<div id="First-Line">
<img src="images/games/games-cs_1.6.gif" alt="" />
<img src="images/games/games-cs_cz.gif" alt="" id="Second-Image"/>
<img src="images/games/games-cs_source.gif" alt="" id="Second-Image"/>
<img src="images/games/games-dod.gif" alt="" id="Second-Image"/>
</div>
<div id="Second-Line">
<img src="images/games/games-dod_source.gif" alt="" />
<img src="images/games/games-tf_2.gif" alt="" id="Second-Image"/>
<img src="images/games/games-cod_4.gif" alt="" id="Second-Image"/>
<img src="images/games/games-hl2_dm.gif" alt="" id="Second-Image"/>
</div>


Like I said this is urgent.
Please tell me what is wrong with this javascript rollover
redinferno
12-10-2008, 04:37 PM
Never mind I found another method to acheive a rollover.
I used

<img onmouseover="this.src='images/navigation/hover/home-hover.jpg'" src="images/navigation/nav-links-home.gif" onmouseout="this.src='images/navigation/nav-links-home.gif'" />
coothead
12-11-2008, 06:29 AM
No need for javascript at all. :disagree:
CSS solution may be found here...
http://www.htmlforums.com/showpost.php?p=680827&postcount=6