Nav-Bar Rollover Effect Issue (Code Needs Checking Over)

Go down

Nav-Bar Rollover Effect Issue (Code Needs Checking Over)

Post by Kempo on Wed Aug 01, 2012 7:22 am

Hey, keeping it short, I have a nav-bar I made, after editing a particular code online (the author said that it was available for use for free, so no issue there). This particular nav-bar includes a roll-over feature, which WAS working until this morning, when I SLIGHTLY edited the code, in order to position the nav-bar exactly where I wanted it (as apposed to being just left aligned, as it was before. The buttons are essentially working perfectly except for the change of image upon rollover, and I was wondering if anybody here would be kind enough to read through the albeit slightly cluttered code, to suggest a solution to have the buttons in exactly the position they're currently in, but with the desired rollover effects included (I am OK with HTML, but have a VERY limited javascript knowledge). The nav-bar in question is on the left hand side at if you want to see it in the current state (although be aware that there is an embedded you-tube video which will play upon visiting the url). Otherwise, the current coding is as follows:

 <script language="javascript">
<!-- hide script from old browsers

//detect browser:
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3) browserVer = "1";
else if (browserName == "Microsoft Internet Explorer" && browserVer == 4) browserVer = "1";
else browserVer = "2";

//preload images:
if (browserVer == 1) {
a1 = new Image(119,60);
a1.src = "";
a2 = new Image(119,60);
a2.src = "";
b1 = new Image(119,60);
b1.src = "";
b2 = new Image(119,60);
b2.src = "";
c1 = new Image(119,60);
c1.src = "";
c2 = new Image(119,60);
c2.src = "";
d1 = new Image(119,60);
d1.src = "";
d2 = new Image(119,60);
d2.src = "";
e1 = new Image(119,60);
e1.src = "";
e2 = new Image(119,60);
e2.src = "";

//image swapping function:
function hiLite(imgDocID, imgObjName, comment) {
if (browserVer == 1) {
document.images[imgDocID].src = eval(imgObjName + ".src");
window.status = comment; return true;
//end hiding -->

 <div style="position: absolute; left: 0px; top: 306px;" id="layer300">
<a href="" onMouseOver="hiLite('a','a2')" onMouseOut="hiLite('a','a1','')">
<font size="2"><img name="a" src="" alt="Your Primary Stop To Joining In The Community" border=0 width=119 height=60></font></a></b></div><div style="position: absolute; left: 0px; top: 366px;" id="layer400">
<a href="" onMouseOver="hiLite('b','b2')" onMouseOut="hiLite('b','b1','')">
<font size="2"><img name="b" src="" alt="Keep Up To Date With The Clan's Official Twitter Feed" border=0 width=119 height=60></font></a></b></div> <div style="position: absolute; left: 0px; top: 426px;" id="layer500">
<a href="" onMouseOver="hiLite('c','c2')" onMouseOut="hiLite('c','c1','')">
<font size="2"><img name="c" src="" alt="Kempo At His Very Finest" border=0 width=119 height=60></font></a></b>
<div style="position: absolute; left: 0px; top: 486px;" id="layer600">
<a href="" onMouseOver="hiLite('d','d2')" onMouseOut="hiLite('d','d1','')">
<font size="2"><img name="d" src="" alt="Want More Information On What We Stand For? (Continuously Under Construction)" border=0 width=119 height=60></font></a></b></div>
<div style="position: absolute; left: 0px; top: 546px;" id="layer700">
<a href="" onMouseOver="hiLite('e','e2')" onMouseOut="hiLite('e','e1','')">
<font size="2"><img name="e" src="" alt="Get In Contact With Your Webmaster" border=0 width=119 height=60></font></a><font size="2"></body>



New Member

Posts : 10
Reputation : 0
Language : English

Back to top Go down

Back to top

Permissions in this forum:
You cannot reply to topics in this forum