Jump to content

Glowing buttons


Guest FirefoxRocks

Recommended Posts

Guest FirefoxRocks

I have this code for glowing buttons, however I want to condense it, but I don't know how:This is what works (uncondensed):

<table summary="Header/Navigation" border="1" rules="all" id="header"><tbody><tr><td rowspan="3" style="width:100px;opacity:1;filter:alpha(opacity=100)"><img src="logo.png" alt="XKingdom Center" width="100" height="100" id="logopng" /></td><td onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=40"><a href="announcements.php" title="Annoucements">Announcements</a></td><td onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=40"><a href="members/moderate.php" title="XKingdom Member login">Members</a></td><td onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=40"><a href="feedback.php" title="Comments, questions and/or suggestions">Feedback</a></td><td rowspan="3" style="width:250px;opacity:1;filter:alpha(opacity=100)"><?php require("mime.php");if($mime=='application/xhtml+xml'){echo '<object id="guildinfo" data="http://x-kings.com/public/banner/guild.php?name=XKingdom" type="text/html"></object>';}else{echo '<iframe id="guildinfoframe" width="250" height="70" frameborder="no" marginwidth="0" marginheight="0" scrolling="no" src="http://x-kings.com/public/banner/guild.php?name=XKingdom">Error loading guild stats. <a href="http://x-kings.com">Play X-Kings</a>!</iframe>';}?></td></tr><tr><td onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=40"><a href="refer.php" title="Help us get more members!">Recruit</a></td><td onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=40"><a href="newbies.php" title="New to X-Kings or XKingdom?">Newbies</a></td><td onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=40"><a href="spxchange.php" title="Exchange support points here!">SP X-Change</a></td></tr><tr><td onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=40"><a href="help.php" title="Help and Support">Help?</a></td><td onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=40"><a href="http://xkings.ourtoolbar.com/Home/" title="Some essential tools to help you">Tools (not setup yet)</a></td><td onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=40"><a href="http://xkingdom.7.forumer.com" title="The plain old forum">Forum</a></td></tr></tbody></table>

As you can see, I had to add the opacity things to each table cell onmouseover and onmouseout. I want to a script in the <head> section and refer to a function on each cell. That way if I decide to change the opacity then I can do so in the function, and not with every cell.This is what I tried:

<script type="text/javascript"><!--//--><![CDATA[//><!--function glow(){this.style.MozOpacity=0.4;this.filters.alpha.opacity=40;}function notGlow(){this.style.MozOpacity=1;this.filters.alpha.opacity=100;}//--><!]]></script>...<table summary="Header/Navigation" border="1" rules="all" id="header"><tbody><tr><td onmouseover="notGlow()"onmouseout="glow()"><a href="announcements.php" title="Annoucements">Announcements</a></td></tr></tbody></table><!-- This is an example with just 1 table cell -->

As you can see, it didn't work as expected. What am I doing wrong?

Link to comment
Share on other sites

<script type="text/javascript"><!--//--><![CDATA[//><!--function glow(ele){ele.style.MozOpacity=0.4;ele.filters.alpha.opacity=40;}function notGlow(ele){ele.style.MozOpacity=1;ele.filters.alpha.opacity=100;}//--><!]]></script>...<table summary="Header/Navigation" border="1" rules="all" id="header"><tbody><tr><td onmouseover="notGlow(this)"onmouseout="glow(this)"><a href="announcements.php" title="Annoucements">Announcements</a></td></tr></tbody></table>

Try passing the trigger element like above.

Link to comment
Share on other sites

Guest FirefoxRocks

One problem I forgot to mention...This is only referring to the mozOpacity selector. What about the CSS3 opacity selector that Mozilla/Opera/Safari is compatible with?Is it like:

ele.style.opacity=0.4;

or is that even in the DOM right now?

Link to comment
Share on other sites

I adapted this little gem from http://clagnut.com/sandbox/imagefades.php/.From what I have been able to tell so far, it's been working. I don't have Safari 3 so I can't test it, but it might work for you:

function setOpacity(element, opacity){	opacity = (opacity < 0) ? 0 : (opacity >= 100) ? 99.999 : opacity;	// IE/Win	element.style.filter = "alpha(opacity:"+opacity+")";	// Safari<1.2, Konqueror	element.style.KHTMLOpacity = opacity/100;	// Older Mozilla and Firefox	element.style.MozOpacity = opacity/100;	// Safari 1.2, newer Firefox and Mozilla, CSS3	element.style.opacity = opacity/100;}

<a href="#" onmouseover="setOpacity(this, 40);" onmouseout="setOpacity(this, 100);">link</a>

Link to comment
Share on other sites

Guest FirefoxRocks
I adapted this little gem from http://clagnut.com/sandbox/imagefades.php/.From what I have been able to tell so far, it's been working. I don't have Safari 3 so I can't test it, but it might work for you:
function setOpacity(element, opacity){	opacity = (opacity < 0) ? 0 : (opacity >= 100) ? 99.999 : opacity;	// IE/Win	element.style.filter = "alpha(opacity:"+opacity+")";	// Safari<1.2, Konqueror	element.style.KHTMLOpacity = opacity/100;	// Older Mozilla and Firefox	element.style.MozOpacity = opacity/100;	// Safari 1.2, newer Firefox and Mozilla, CSS3	element.style.opacity = opacity/100;}

<a href="#" onmouseover="setOpacity(this, 40);" onmouseout="setOpacity(this, 100);">link</a>

I'm sorry, but this won't do at all. I don't want to manually set the opacity percentage in the event attribute value of each element (in my case, table cell). This is because I may decide to change opacity levels in the future, and this would be a pain to do according to your instructions. I already have all the browsers working properly with this, just Safari 3 doesn't glow when hovered over. I heard it was something like this, but I'm not completely sure:
-webkit-opacity:40

At least that is what I think. Don't know what KHTML is, but Safari is built off of WebKit.

Link to comment
Share on other sites

You don't have to take the example literally, there's a thousand different ways to call that function.

var GLOWING = 40;var NOT_GLOWING = 100;function glow(element){	setOpacity(element, GLOWING);}function notGlow(element){	setOpacity(element, NOT_GLOWING);}

<a href="#" onmouseover="glow(this);" onmouseout="notGlow(this);">link</a>

And element.style.opacity is the standard way that modern browsers should support.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...