Guest FirefoxRocks Posted August 11, 2007 Share Posted August 11, 2007 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 More sharing options...
Synook Posted August 12, 2007 Share Posted August 12, 2007 <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 More sharing options...
Guest FirefoxRocks Posted August 12, 2007 Share Posted August 12, 2007 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 More sharing options...
Synook Posted August 12, 2007 Share Posted August 12, 2007 Yep, that is right Link to comment Share on other sites More sharing options...
Guest FirefoxRocks Posted August 14, 2007 Share Posted August 14, 2007 Great! Now can anyone help me make this operable in Safari 3.0.3? Link to comment Share on other sites More sharing options...
jesh Posted August 14, 2007 Share Posted August 14, 2007 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 More sharing options...
Guest FirefoxRocks Posted August 15, 2007 Share Posted August 15, 2007 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 More sharing options...
jesh Posted August 15, 2007 Share Posted August 15, 2007 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.