windandwaves wrote:
kaeli wrote: In article <42********@clear.net.nz>, wi*********@coldmail.com
enlightened us with... Hi Gurus
I have a little javascript that works perfectly in IE (for a
change), but does not work in Firefox and Opera (no errors
though)...
Worked in my Firefox. FF 1.0
What version are you using?
Always include versions for browsers.
You can see the script in action at www.tupelo.co.nz by moving
your mouse over the little thumbnails below the big image.
The images changed just fine for me.
What happened for you?
The big ones changed but the little ones (over which you move the
mouse) should also change (lighten a little), sorry, it seems that I left
out some important info.
I use Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.7.7)
Gecko/20050414 Firefox/1.0.3
Cheers
Hi w&w.
What's with all that scripting? Remember "ye olde rollover"? Still
works pretty well. No sense going DOM-crazy if unnecessary, particular
ona commercial site.
Also: that 'eq' thing can be done easily with HTML/CSS. Easier to
modify as well. Replace this (in your stylesheet):
DIV#equa { height: 20px; margin-bottom: 7px;}
....with this:
DIV#equa { margin-bottom: 7px;}
DIV.eq { width: 15px; height: 15px; float: right; margin-left: 3px;
background: #fff; }
DIV.eq-active { width: 15px; height: 15px; float: right; margin-left:
3px; background: #f2cf77; }
Then:
<BODY ONLOAD="loadimages();">
<DIV ID="main">
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" ID="logm">
<TR>
<TD ID="logo"><IMG ID="ilogo" SRC="i/logo.gif" ALT="TUPELO BAR ///
Wellington oldest lounge and cocktail bar" TITLE="TUPELO BAR ///
Wellington oldest lounge and cocktail bar"></TD>
<TD ID="menu">
<DIV ID="equa">
<div id="eq6" class="eq"></div>
<div id="eq5" class="eq"></div>
<div id="eq4" class="eq"></div>
<div id="eq3" class="eq"></div>
<div id="eq2" class="eq"></div>
<div id="eq1" class="eq" style="background:#f29c01;"></div></DIV>
<DIV ID="menb">
ABOUT
<A HREF="gigs.php?PHPSESSID=d46e114f6b68a94a295fd0da9 b286f9d"
ONMOUSEOVER="return doClass(2,'eq-active');"
ONMOUSEOUT="return doClass(2,'eq');">GIGS</A>
<A HREF="menu.php?PHPSESSID=d46e114f6b68a94a295fd0da9 b286f9d"
ONMOUSEOVER="return doClass(3,'eq-active');"
ONMOUSEOUT="return doClass(3,'eq');">MENU</A>
<A HREF="drinks.php?PHPSESSID=d46e114f6b68a94a295fd0d a9b286f9d"
ONMOUSEOVER="return doClass(4,'eq-active');"
ONMOUSEOUT="return doClass(4,'eq');">DRINKS</A>
<A HREF="functions.php?PHPSESSID=d46e114f6b68a94a295f d0da9b286f9d"
ONMOUSEOVER="return doClass(5,'eq-active');"
ONMOUSEOUT="return doClass(5,'eq');">FUNCTIONS</A>
<A HREF="bookings.php?PHPSESSID=d46e114f6b68a94a295fd 0da9b286f9d"
ONMOUSEOVER="return doClass(6,'eq-active');"
ONMOUSEOUT="return doClass(6,'eq');">CONTACTS</A>
</DIV>
<DIV ID="mens">
</DIV>
</TD>
</TR>
</TABLE>
<TABLE CELLSPACING="0" CELLPADDING="0" Border="0" ID="copy">
<TR>
<TD ID="mail">
<FORM METHOD="post" ACTION="thankyou.php" ID="frm"><input type="hidden"
name="PHPSESSID" value="d46e114f6b68a94a295fd0da9b286f9d" />
<P ID="join">Join the Tupelo maling list
<INPUT TYPE="text" NAME="email" ID="email">
<INPUT TYPE="submit" VALUE="join" CLASS="submit" NAME="join">
</P>
</FORM>
</TD>
<TD ID="head">
<H1>ABOUT /// <SPAN ID="heex">THE VENUE</SPAN></H1>
</TD>
</TR>
<TR>
<TD ID="picL">
<DIV ID="LP"><IMG SRC="i/L/exa.jpg" CLASS="Lpic" ALT="large pic"
TITLE="large pic" NAME="Lpic" WIDTH="320" HEIGHT="215"></DIV>
<IMG SRC="i/S/i1n.jpg" NAME="s1" CLASS="Spic" ALT="small pic"
TITLE="small pic"
ONMOUSEOVER="return iRoll('s1','i/S/i1o.jpg','Lpic','i/L/i1.jpg');"
ONMOUSEOUT="return iRoll('s1','i/S/i1n.jpg');">
<IMG SRC="i/S/i2n.jpg" NAME="s2" CLASS="Spic" ALT="small pic"
TITLE="small pic"
ONMOUSEOVER="return iRoll('s2','i/S/i2o.jpg','Lpic','i/L/i2.jpg');"
ONMOUSEOUT="return iRoll('s2','i/S/i2n.jpg');">
<IMG SRC="i/S/i3n.jpg" NAME="s3" CLASS="Spic" ALT="small pic"
TITLE="small pic"
ONMOUSEOVER="return iRoll('s3','i/S/i3o.jpg','Lpic','i/L/i3.jpg');"
ONMOUSEOUT="return iRoll('s3','i/S/i3n.jpg');">
<IMG SRC="i/S/i4n.jpg" NAME="s4" CLASS="Spic" ALT="small pic"
TITLE="small pic"
ONMOUSEOVER="return iRoll('s4','i/S/i4o.jpg','Lpic','i/L/i4.jpg');"
ONMOUSEOUT="return iRoll('s4','i/S/i4n.jpg');">
<IMG SRC="i/S/i5n.jpg" NAME="s5" CLASS="Spic" ALT="small pic"
TITLE="small pic"
ONMOUSEOVER="return iRoll('s5','i/S/i5o.jpg','Lpic','i/L/i5.jpg');"
ONMOUSEOUT="return iRoll('s5','i/S/i5n.jpg');">
<IMG SRC="i/S/i6n.jpg" NAME="s6" CLASS="Spic" ALT="small pic"
TITLE="small pic"
ONMOUSEOVER="return iRoll('s6','i/S/i6o.jpg','Lpic','i/L/i6.jpg');"
ONMOUSEOUT="return iRoll('s6','i/S/i6n.jpg');">
.........
.........
[formatting removed]
Change 'j.js' -
var pix = [
'i/S/i1o.jpg' ,
'i/S/i2o.jpg' ,
'i/S/i3o.jpg' ,
'i/S/i4o.jpg' ,
'i/S/i5o.jpg' ,
'i/S/i6o.jpg' ,
'i/L/i1.jpg' ,
'i/L/i2.jpg' ,
'i/L/i3.jpg' ,
'i/L/i4.jpg' ,
'i/L/i5.jpg' ,
'i/L/i6.jpg'
];
function loadimages()
{
for (var n, i = 0, l = pix.length; i < l; i++)
{
pix[(n = l + i)] = new Image();
pix[n].src = pix[i];
}
}
function iRoll()
{
for (var i = 0, l = arguments.length; i < l; i += 2)
document.images[arguments[i]].src = arguments[i + 1];
}
function doClass(n, cname)
{
var el;
if (document.getElementById
&& (el = document.getElementById('eq' + n)))
{
el.className = cname;
}
return true;
}
function OW(fln){
...........
...........
Cheers, Rob.
