...

View Full Version : FireFox not Working right with Mouse Overs



Hypnos
07-08-2010, 02:39 PM
Hi All,
This is my first time posting here but I might have more at time goes on...

Making a Guild Web page (using Microsoft Expression Web) and as Always IE works fine but there are bugs in FireFox (I'm sure the bugs are because of EW)

Anyway, what is happing is, the mouse overs are working but after clicking on one and going the directed page if I hit the "back button" in FF it dosent reload the Mouse over effect for the link I hit.

For Ex: When I move my mouse over the Red "ABOUT" button it changes the word "ABOUT" from Red to Yellow and back when I move the mouse off it. But when I click the Red "ABOUT" button and follow the link, then hist the back button (in Firefox) to go back to the page the word "ABOUT" is not Yellow and will not update with mouse overs.

Here is my Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Forces of Corruption</title>
<style type="text/css">em{font-weight:bold;font-style:normal}
.style1 {
background-color: #000000;
background-image: url('foc-header.jpg');
text-align: center;
}
.style2 {
text-align: center;
background-color: #000000;
background-image: url('foc-center.jpg');
}
.style3 {
text-align: center;
background-color: #000000;
background-image: url('foc-bottem.jpg');
}
.style4 {
background-color: #000000;
}
.style5 {
margin-left: 40px;
}
.style6 {
vertical-align: top;
}
.style9 {
border-width: 0px;
margin-top: 7px;
margin-bottom: 7px;
}
.style10 {
border-width: 0px;
}
:focus {
outline: 0;
}
</style>
<script type="text/javascript">
<!--
function FP_swapImgRestore() {//v1.0
var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) {
var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } }
doc.$imgSwaps=null; }
}

function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}

function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
// -->
</script>
</head>

<body style="background-color: #000000" onload="FP_preloadImgs(/*url*/'about-gold.png',/*url*/'rules-gold.png',/*url*/'apply-gold.png',/*url*/'forum-gold.png')">

<table style="width: 1200px; height: 850px" cellspacing="0" cellpadding="0" align="center" class="style4">
<tr>
<td style="width: 1200px; height: 170px" class="style1" valign="bottom">
<a href="about.html">
<img alt="" src="about-red.png" width="139" height="49" class="style9" id="img1" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img1',/*url*/'about-gold.png')" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="rules.html">
<img src="rules-red.png" width="113" height="48" class="style9" id="img2" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img2',/*url*/'rules-gold.png')" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="apply.html">
<img src="apply-red.png" width="133" height="57" class="style10" id="img3" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img3',/*url*/'apply-gold.png')" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://www.forcesofcorruption.com/forum/">
<img src="forum-red.png" width="135" height="48" class="style9" id="img4" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img4',/*url*/'forum-gold.png')" /></a></td>
</tr>
<tr>
<td style="width: 1200px; height: 580px" class="style2">&nbsp;</td>
</tr>
<tr>
<td style="width: 1200px; height: 100px" class="style3" valign="top">
<p class="style5"><a href="http://www.wowrealmstatus.net/">
<img border=0 src="http://www.wowrealmstatus.net/status.php?s=arygos&r=1" alt="Wow server" style="float: left" class="style6"></a></p>
</td>
</tr>
</table>

</body>

</html>


I'll post my Web Site here so you can see what it is doing for yourself, but I'm going to remove it from my post after it is fixed.

Forces of Corruption (http://www.forcesofcorruption.com)

Thanks,

SB65
07-08-2010, 04:00 PM
Well, haven't really looked through your code but Firefox 3.6 does exactly what you say you want it to do. In IE7 the link doesn't show gold on page back but the mouseover works fine.


as Always IE works fine but there are bugs in FireFox

Not my experience in any way, shape or form.....

Hypnos
07-08-2010, 04:09 PM
Maybe I worded it wrong. I DON'T want to to be gold on Page Back. I want it to work just like IE dose. :)

Hypnos
07-08-2010, 09:33 PM
So no one know's how to fix this? I would have asumed it was just a easy fix for some one that knows HTML (Not me).

skywalker2208
07-08-2010, 09:38 PM
I would suggest not using javascript for the mouseover effects. You should just use css. Take a look at http://www.w3schools.com/CSS/css_pseudo_classes.asp. If you don't want to go that route then this should be moved to the javascript section.

Hypnos
07-08-2010, 11:46 PM
Good idea. if some one can move this to the Java Section hat would be geat! :)

_Aerospace_Eng_
07-09-2010, 05:16 AM
You really shouldn't be using tables for page layout. Read the link in my sig. Also I agree with the comment about javascript, there is no need for it. I was bored. Here you go. I rewrote your code. Its not as messy and its a lot simpler to read/understand.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
body {
background:#000 url(foc-center.jpg) no-repeat center 170px;
}
#container {
width:1200px;
margin:auto;
}
#header {
height:170px;
background:url(foc-header.jpg) no-repeat;
}
#nav {
list-style:none;
height:57px;
width:680px;
margin:0 auto;
padding:115px 0 0 0;
}
#nav li {
float:left;
height:57px;
line-height:57px;
margin:0 20px;
display:inline;
}
#nav li img {
border:0;
}
#nav li a {
height:57px;
background-position:center;
display:block;
outline:0;
}
#nav li a img {
visibility:hidden;
}
#nav li a#about {
width:139px;
background-image:url(about-red.png);
}
#nav li a#rules {
width:113px;
background-image:url(rules-red.png);
}
#nav li a#apply {
width:133px;
background-image:url(apply-red.png);
}
#nav li a#forum {
width:135px;
background-image:url(forum-red.png);
}
#nav li a#about:hover {
background-image:url(about-gold.png);
}
#nav li a#rules:hover {
background-image:url(rules-gold.png);
}
#nav li a#apply:hover {
background-image:url(apply-gold.png);
}
#nav li a#forum:hover {
background-image:url(forum-gold.png);
}
</style>
</head>

<body>
<div id="container">
<div id="header">
<ul id="nav">
<li><a href="about.html" id="about"> <img alt="" src="about-gold.png" width="139" height="49"></a></li>
<li><a href="rules.html" id="rules"> <img src="rules-gold.png" width="113" height="48"></a></li>
<li><a href="apply.html" id="apply"> <img src="apply-gold.png" width="133" height="57"></a></li>
<li><a href="http://www.forcesofcorruption.com/forum/" id="forum"> <img src="forum-gold.png" width="135" height="48"></a></li>
</ul>
</div>
<div id="content"></div>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum