Help - Search - Members - Calendar
Full Version: Javascript button table issues with IE vs Firefox
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
Zeus12345
Feb 17 2007, 07:59 PM
Hi again,
I'm having a problem getting my Java-script button to show up properly in Firefox (no problems found with IE) www.morehorizons.com The tables around the button in the left table are all messed up in Firefox and I have been searching for a solution to no avail. Please note that I did not write this script from scratch (it was created with ImageReady) and despite my efforts to learn I still only have a limited understanding of what is actually occurring within the script unsure.gif so please be simple when explaining how I can fix this blush.gif
Any and all help is greatly appreciated biggrin.gif
Darin McGrew
Feb 17 2007, 08:27 PM
In what way is it "all messed up"? It looks the same to me in Opera, Firefox, and MSIE.

You have a few errors in your HTML, but they're fairly minor: bits of XHTML syntax in an HTML document, and a few deprecated attributes in an HTML Strict document.
Zeus12345
Feb 17 2007, 11:16 PM
Well the tables aren't messed up anymore (fixed it by using {display: block;}), and thanks for pointing out those errors in the HTML. I am now having trouble getting the buttons to work (change when mouse is passed over it or when it is clicked) when I have more than one on the same page. If there is only a single button it works fine but as soon as I copy paste the same button to another section of the same page of the site it stops working (it still links but it no longer changes when the mouse is passed over it or when it is clicked).
In the head tags I have placed
CODE
<script TYPE="text/javascript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
button_01_button_03_over = newImage("images/button_01-button_03_over.gif");
button_02_button_03_over = newImage("images/button_02-button_03_over.gif");
button_03_over = newImage("images/button_03-over.gif");
button_03_down = newImage("images/button_03-down.gif");
button_04_button_03_over = newImage("images/button_04-button_03_over.gif");
button_05_button_03_over = newImage("images/button_05-button_03_over.gif");
preloadFlag = true;
}
}

// -->
</SCRIPT>

and then in the body tags I place
CODE
<TABLE WIDTH=160 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD class="button" COLSPAN=3>
<IMG NAME="button_01" SRC="images/button_01.gif" WIDTH=160 HEIGHT=6 ALT=""></TD>
</TR>
<TR>
<TD class="button" ROWSPAN=2>
<IMG NAME="button_02" SRC="images/button_02.gif" WIDTH=5 HEIGHT=54 ALT=""></TD>
<TD class="button">
<A HREF="http://www.morehorizons.com"
ONMOUSEOVER="changeImages('button_01', 'images/button_01-button_03_over.gif', 'button_02', 'images/button_02-button_03_over.gif', 'button_03', 'images/button_03-over.gif', 'button_04', 'images/button_04-button_03_over.gif', 'button_05', 'images/button_05-button_03_over.gif'); return true;"
ONMOUSEOUT="changeImages('button_01', 'images/button_01.gif', 'button_02', 'images/button_02.gif', 'button_03', 'images/button_03.gif', 'button_04', 'images/button_04.gif', 'button_05', 'images/button_05.gif'); return true;"
ONMOUSEDOWN="changeImages('button_03', 'images/button_03-down.gif'); return true;"
ONMOUSEUP="changeImages('button_03', 'images/button_03-over.gif'); return true;">
<IMG NAME="button_03" SRC="images/button_03.gif" WIDTH=150 HEIGHT=48 BORDER=0 ALT=""></A></TD>
<TD class="button" ROWSPAN=2>
<IMG NAME="button_04" SRC="images/button_04.gif" WIDTH=5 HEIGHT=54 ALT=""></TD>
</TR>
<TR>
<TD class="button">
<IMG NAME="button_05" SRC="images/button_05.gif" WIDTH=150 HEIGHT=6 ALT=""></TD>
</TR>
</TABLE>

and it works fine until I paste the same section in the body again.
I hope this makes sense as I'm not sure if I'm doing a good job explaining it.
Any ideas?
Zeus12345
Feb 18 2007, 01:56 AM
Nevermind, It turns out they each had to have individual name=""
I'll be back biggrin.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.