I am trying to achieve a Flash-like menu with OnMouseOver effects on
3 divs below. Unfortunately, the javascript resets when the mouse is
rolled over the text and if you go mouse crazy on the divs, the
script seems to remember where it cut off, and doesn''t roll down
completely afterwards.
Is it a good place to ask for help? I couldn''t find any Scriptaculous
forum (only a wishlist place where no help seems to be offered)...
——— THE CODE ———
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
lang="fr">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
<title>
Untitled
</title>
<meta name="generator" content="BBEdit 8.2" />
<style type="text/css" title="text/css">
/* <![CDATA[ */
body
{
padding: 10px;
margin: 0;
}
.menu
{
width: 90px;
height: 92px;
padding: 0 0 0 6px;
margin: 0 10px 0 0;
border-left: #CCC;
border-width: 0 0 0 1px;
border-style: none none none solid;
color: #000;
font-family: "Trebuchet MS", trebuchet, sans serif;
font-size: 14px;
line-height: 22px;
text-transform: uppercase;
text-align: left;
position: relative;
float: left;
}
#accueil { z-index: 10; }
#accueilhover
{
background-color: #CCC;
margin-left: -107px;
z-index: 5;
background-image: url(coin.png);
background-repeat: no-repeat;
background-position: right bottom;
}
#organisme { z-index: 10; }
#organismehover
{
background-color: #CCC;
margin-left: -107px;
z-index: 5;
background-image: url(coin.png);
background-repeat: no-repeat;
background-position: right bottom;
}
#clients { z-index: 10; }
#clientshover
{
background-color: #CCC;
margin-left: -107px;
z-index: 5;
background-image: url(coin.png);
background-repeat: no-repeat;
background-position: right bottom;
}
/* ]]> */
</style> <script src="javascripts/prototype.js"
type="text/javascript"></script> <script
src="javascripts/scriptaculous.js"
type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
function mover(cible) {
new Effect.BlindDown(cible, { duration: 0.15 });
return false;
}
function mout(cible) {
new Effect.BlindUp(cible, { duration: 0.15 });
return false;
}
// ]]>
</script>
</head>
<body>
<div class="menu" id="accueil"
onmouseover="mover(''accueilhover'');"
onmouseout="mout(''accueilhover'');">
<a href="#">
Accueil
</a>
</div>
<div class="menu" id="accueilhover"
style="display: none;">
</div>
<div class="menu" id="organisme"
onmouseover="mover(''organismehover'');"
onmouseout="mout(''organismehover'');">
<a href="#">
Organisme
</a>
</div>
<div class="menu" id="organismehover"
style="display: none;">
</div>
<div class="menu" id="clients"
onmouseover="mover(''clientshover'');"
onmouseout="mout(''clientshover'');">
<a href="#">
Clients
</a>
</div>
<div class="menu" id="clientshover"
style="display: none;">
</div>
</body>
</html>
Laurent LaSalle
2006-Jun-16 19:16 UTC
Re: Menu using Scriptaculous Effects = OnMouseOver bug
Anyone?> I am trying to achieve a Flash-like menu with OnMouseOver effects > on 3 divs below. Unfortunately, the javascript resets when the > mouse is rolled over the text and if you go mouse crazy on the > divs, the script seems to remember where it cut off, and doesn''t > roll down completely afterwards. > > Is it a good place to ask for help? I couldn''t find any > Scriptaculous forum (only a wishlist place where no help seems to > be offered)... > > ——— THE CODE ——— > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> > <head> > <meta http-equiv="content-type" content="text/html; > charset=utf-8" /> > <title> > Untitled > </title> > <meta name="generator" content="BBEdit 8.2" /> > <style type="text/css" title="text/css"> > /* <![CDATA[ */ > body > { > padding: 10px; > margin: 0; > } > > .menu > { > width: 90px; > height: 92px; > padding: 0 0 0 6px; > margin: 0 10px 0 0; > border-left: #CCC; > border-width: 0 0 0 1px; > border-style: none none none solid; > color: #000; > font-family: "Trebuchet MS", trebuchet, sans serif; > font-size: 14px; > line-height: 22px; > text-transform: uppercase; > text-align: left; > position: relative; > float: left; > } > > #accueil { z-index: 10; } > > #accueilhover > { > background-color: #CCC; > margin-left: -107px; > z-index: 5; > background-image: url(coin.png); > background-repeat: no-repeat; > background-position: right bottom; > } > > #organisme { z-index: 10; } > > #organismehover > { > background-color: #CCC; > margin-left: -107px; > z-index: 5; > background-image: url(coin.png); > background-repeat: no-repeat; > background-position: right bottom; > } > > #clients { z-index: 10; } > > #clientshover > { > background-color: #CCC; > margin-left: -107px; > z-index: 5; > background-image: url(coin.png); > background-repeat: no-repeat; > background-position: right bottom; > } > > /* ]]> */ > </style> <script src="javascripts/prototype.js" > type="text/javascript"></script> <script > src="javascripts/scriptaculous.js" type="text/javascript"></script> > <script type="text/javascript"> > // <![CDATA[ > > function mover(cible) { > new Effect.BlindDown(cible, { duration: 0.15 }); > return false; > } > > function mout(cible) { > new Effect.BlindUp(cible, { duration: 0.15 }); > return false; > } > > // ]]> > </script> > </head> > <body> > <div class="menu" id="accueil" onmouseover="mover(''accueilhover'');" > onmouseout="mout(''accueilhover'');"> > <a href="#"> > Accueil > </a> > </div> > <div class="menu" id="accueilhover" style="display: none;"> > </div> > <div class="menu" id="organisme" > onmouseover="mover(''organismehover'');" > onmouseout="mout(''organismehover'');"> > <a href="#"> > Organisme > </a> > </div> > <div class="menu" id="organismehover" style="display: none;"> > </div> > <div class="menu" id="clients" onmouseover="mover(''clientshover'');" > onmouseout="mout(''clientshover'');"> > <a href="#"> > Clients > </a> > </div> > <div class="menu" id="clientshover" style="display: none;"> > </div> > </body> > </html>_______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
With what browser(s) are you seeing the problems? Based on your description I''m guessing Safari? Safari fires mouseover events for text elements within an element (buggy, and why people use this shoddy browser is beyond me)... The fix in general will most likely involve you setting a flag on the first mouseover, and unsetting that flag once the roll-down is complete... if you get subsequent mouseovers while the flag is still set (rolldown still happening), do nothing or handle elegantly somehow (up to you)... as far Safari firing for every text character, you''ll have to first detect for safari, if safari == true, then do a lookup based on the fromElement and toElement of the mouseover/mouseout to see if the element firing the mouseover is actually a child of the parent element the mouse came from (if so do nothing)... etc, etc, etc... fun stuff. On 6/16/06, Laurent LaSalle <laurent-4fE5YV2w1rIAvxtiuMwx3w@public.gmane.org> wrote:> > Anyone? > > > I am trying to achieve a Flash-like menu with OnMouseOver effects > > on 3 divs below. Unfortunately, the javascript resets when the > > mouse is rolled over the text and if you go mouse crazy on the > > divs, the script seems to remember where it cut off, and doesn''t > > roll down completely afterwards. > > > > Is it a good place to ask for help? I couldn''t find any > > Scriptaculous forum (only a wishlist place where no help seems to > > be offered)... > > > > ——— THE CODE ——— > > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> > > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> > > <head> > > <meta http-equiv="content-type" content="text/html; > > charset=utf-8" /> > > <title> > > Untitled > > </title> > > <meta name="generator" content="BBEdit 8.2" /> > > <style type="text/css" title="text/css"> > > /* <![CDATA[ */ > > body > > { > > padding: 10px; > > margin: 0; > > } > > > > .menu > > { > > width: 90px; > > height: 92px; > > padding: 0 0 0 6px; > > margin: 0 10px 0 0; > > border-left: #CCC; > > border-width: 0 0 0 1px; > > border-style: none none none solid; > > color: #000; > > font-family: "Trebuchet MS", trebuchet, sans serif; > > font-size: 14px; > > line-height: 22px; > > text-transform: uppercase; > > text-align: left; > > position: relative; > > float: left; > > } > > > > #accueil { z-index: 10; } > > > > #accueilhover > > { > > background-color: #CCC; > > margin-left: -107px; > > z-index: 5; > > background-image: url(coin.png); > > background-repeat: no-repeat; > > background-position: right bottom; > > } > > > > #organisme { z-index: 10; } > > > > #organismehover > > { > > background-color: #CCC; > > margin-left: -107px; > > z-index: 5; > > background-image: url(coin.png); > > background-repeat: no-repeat; > > background-position: right bottom; > > } > > > > #clients { z-index: 10; } > > > > #clientshover > > { > > background-color: #CCC; > > margin-left: -107px; > > z-index: 5; > > background-image: url(coin.png); > > background-repeat: no-repeat; > > background-position: right bottom; > > } > > > > /* ]]> */ > > </style> <script src="javascripts/prototype.js" > > type="text/javascript"></script> <script > > src="javascripts/scriptaculous.js" type="text/javascript"></script> > > <script type="text/javascript"> > > // <![CDATA[ > > > > function mover(cible) { > > new Effect.BlindDown(cible, { duration: 0.15 }); > > return false; > > } > > > > function mout(cible) { > > new Effect.BlindUp(cible, { duration: 0.15 }); > > return false; > > } > > > > // ]]> > > </script> > > </head> > > <body> > > <div class="menu" id="accueil" > onmouseover="mover(''accueilhover'');" > > onmouseout="mout(''accueilhover'');"> > > <a href="#"> > > Accueil > > </a> > > </div> > > <div class="menu" id="accueilhover" style="display: > none;"> > > </div> > > <div class="menu" id="organisme" > > onmouseover="mover(''organismehover'');" > > onmouseout="mout(''organismehover'');"> > > <a href="#"> > > Organisme > > </a> > > </div> > > <div class="menu" id="organismehover" style="display: > none;"> > > </div> > > <div class="menu" id="clients" > onmouseover="mover(''clientshover'');" > > onmouseout="mout(''clientshover'');"> > > <a href="#"> > > Clients > > </a> > > </div> > > <div class="menu" id="clientshover" style="display: > none;"> > > </div> > > </body> > > </html>_______________________________________________ > > Rails-spinoffs mailing list > > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs >_______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Alex Duffield
2006-Jun-16 19:44 UTC
Re: Menu using Scriptaculous Effects = OnMouseOver bug
you need to use the effect queue so your blind up and blind down are not stepping on each other. More on queues here: http://blog.railsdevelopment.com/pages/effect/queue/ ______________________________________________________________________ Alex Duffield . Principal . InControl Solutions . http:// www.incontrolsolutions.com On 16-Jun-06, at 12:16 PM, Laurent LaSalle wrote:> Anyone? > >> I am trying to achieve a Flash-like menu with OnMouseOver effects >> on 3 divs below. Unfortunately, the javascript resets when the >> mouse is rolled over the text and if you go mouse crazy on the >> divs, the script seems to remember where it cut off, and doesn''t >> roll down completely afterwards. >> >> Is it a good place to ask for help? I couldn''t find any >> Scriptaculous forum (only a wishlist place where no help seems to >> be offered)... >> >> ——— THE CODE ——— >> >> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> >> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> >> <head> >> <meta http-equiv="content-type" content="text/html; >> charset=utf-8" /> >> <title> >> Untitled >> </title> >> <meta name="generator" content="BBEdit 8.2" /> >> <style type="text/css" title="text/css"> >> /* <![CDATA[ */ >> body >> { >> padding: 10px; >> margin: 0; >> } >> >> .menu >> { >> width: 90px; >> height: 92px; >> padding: 0 0 0 6px; >> margin: 0 10px 0 0; >> border-left: #CCC; >> border-width: 0 0 0 1px; >> border-style: none none none solid; >> color: #000; >> font-family: "Trebuchet MS", trebuchet, sans serif; >> font-size: 14px; >> line-height: 22px; >> text-transform: uppercase; >> text-align: left; >> position: relative; >> float: left; >> } >> >> #accueil { z-index: 10; } >> >> #accueilhover >> { >> background-color: #CCC; >> margin-left: -107px; >> z-index: 5; >> background-image: url(coin.png); >> background-repeat: no-repeat; >> background-position: right bottom; >> } >> >> #organisme { z-index: 10; } >> >> #organismehover >> { >> background-color: #CCC; >> margin-left: -107px; >> z-index: 5; >> background-image: url(coin.png); >> background-repeat: no-repeat; >> background-position: right bottom; >> } >> >> #clients { z-index: 10; } >> >> #clientshover >> { >> background-color: #CCC; >> margin-left: -107px; >> z-index: 5; >> background-image: url(coin.png); >> background-repeat: no-repeat; >> background-position: right bottom; >> } >> >> /* ]]> */ >> </style> <script src="javascripts/prototype.js" >> type="text/javascript"></script> <script >> src="javascripts/scriptaculous.js" type="text/javascript"></script> >> <script type="text/javascript"> >> // <![CDATA[ >> >> function mover(cible) { >> new Effect.BlindDown(cible, { duration: 0.15 }); >> return false; >> } >> >> function mout(cible) { >> new Effect.BlindUp(cible, { duration: 0.15 }); >> return false; >> } >> >> // ]]> >> </script> >> </head> >> <body> >> <div class="menu" id="accueil" onmouseover="mover(''accueilhover'');" >> onmouseout="mout(''accueilhover'');"> >> <a href="#"> >> Accueil >> </a> >> </div> >> <div class="menu" id="accueilhover" style="display: none;"> >> </div> >> <div class="menu" id="organisme" >> onmouseover="mover(''organismehover'');" >> onmouseout="mout(''organismehover'');"> >> <a href="#"> >> Organisme >> </a> >> </div> >> <div class="menu" id="organismehover" style="display: none;"> >> </div> >> <div class="menu" id="clients" onmouseover="mover(''clientshover'');" >> onmouseout="mout(''clientshover'');"> >> <a href="#"> >> Clients >> </a> >> </div> >> <div class="menu" id="clientshover" style="display: none;"> >> </div> >> </body> >> </html>_______________________________________________ >> Rails-spinoffs mailing list >> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org >> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs_______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Laurent LaSalle
2006-Jun-16 19:50 UTC
Re: Menu using Scriptaculous Effects = OnMouseOver bug
Thanks for your informative answer. This isn''t only happening in Safari, it also happens in Firefox so I was guessing that this bug was more global than expected. I haven''t test it on PC yet, but I can''t see why Firefox for Mac would be any different than it''s PC counterpart... Laurent> With what browser(s) are you seeing the problems? Based on your > description I''m guessing Safari? Safari fires mouseover events for > text elements within an element (buggy, and why people use this > shoddy browser is beyond me)... > > The fix in general will most likely involve you setting a flag on > the first mouseover, and unsetting that flag once the roll-down is > complete... if you get subsequent mouseovers while the flag is > still set (rolldown still happening), do nothing or handle > elegantly somehow (up to you)... as far Safari firing for every > text character, you''ll have to first detect for safari, if safari > == true, then do a lookup based on the fromElement and toElement of > the mouseover/mouseout to see if the element firing the mouseover > is actually a child of the parent element the mouse came from (if > so do nothing)... etc, etc, etc... fun stuff. > > On 6/16/06, Laurent LaSalle <laurent-4fE5YV2w1rIAvxtiuMwx3w@public.gmane.org> wrote: > Anyone? > > > I am trying to achieve a Flash-like menu with OnMouseOver effects > > on 3 divs below. Unfortunately, the javascript resets when the > > mouse is rolled over the text and if you go mouse crazy on the > > divs, the script seems to remember where it cut off, and doesn''t > > roll down completely afterwards. > > > > Is it a good place to ask for help? I couldn''t find any > > Scriptaculous forum (only a wishlist place where no help seems to > > be offered)... > > > > ——— THE CODE ——— > > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > > " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> > > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> > > <head> > > <meta http-equiv="content-type" content="text/html; > > charset=utf-8" /> > > <title> > > Untitled > > </title> > > <meta name="generator" content="BBEdit 8.2" /> > > <style type="text/css" title="text/css"> > > /* <![CDATA[ */ > > body > > { > > padding: 10px; > > margin: 0; > > } > > > > .menu > > { > > width: 90px; > > height: 92px; > > padding: 0 0 0 6px; > > margin: 0 10px 0 0; > > border-left: #CCC; > > border-width: 0 0 0 1px; > > border-style: none none none solid; > > color: #000; > > font-family: "Trebuchet MS", trebuchet, sans serif; > > font-size: 14px; > > line-height: 22px; > > text-transform: uppercase; > > text-align: left; > > position: relative; > > float: left; > > } > > > > #accueil { z-index: 10; } > > > > #accueilhover > > { > > background-color: #CCC; > > margin-left: -107px; > > z-index: 5; > > background-image: url(coin.png); > > background-repeat: no-repeat; > > background-position: right bottom; > > } > > > > #organisme { z-index: 10; } > > > > #organismehover > > { > > background-color: #CCC; > > margin-left: -107px; > > z-index: 5; > > background-image: url(coin.png); > > background-repeat: no-repeat; > > background-position: right bottom; > > } > > > > #clients { z-index: 10; } > > > > #clientshover > > { > > background-color: #CCC; > > margin-left: -107px; > > z-index: 5; > > background-image: url(coin.png); > > background-repeat: no-repeat; > > background-position: right bottom; > > } > > > > /* ]]> */ > > </style> <script src="javascripts/prototype.js" > > type="text/javascript"></script> <script > > src="javascripts/scriptaculous.js" type="text/javascript"></script> > > <script type="text/javascript"> > > // <![CDATA[ > > > > function mover(cible) { > > new Effect.BlindDown(cible, { duration: 0.15 }); > > return false; > > } > > > > function mout(cible) { > > new Effect.BlindUp(cible, { duration: 0.15 }); > > return false; > > } > > > > // ]]> > > </script> > > </head> > > <body> > > <div class="menu" id="accueil" onmouseover="mover > (''accueilhover'');" > > onmouseout="mout(''accueilhover'');"> > > <a href="#"> > > Accueil > > </a> > > </div> > > <div class="menu" id="accueilhover" style="display: > none;"> > > </div> > > <div class="menu" id="organisme" > > onmouseover="mover(''organismehover'');" > > onmouseout="mout(''organismehover'');"> > > <a href="#"> > > Organisme > > </a> > > </div> > > <div class="menu" id="organismehover" > style="display: none;"> > > </div> > > <div class="menu" id="clients" onmouseover="mover > (''clientshover'');" > > onmouseout="mout(''clientshover'');"> > > <a href="#"> > > Clients > > </a> > > </div> > > <div class="menu" id="clientshover" style="display: > none;"> > > </div> > > </body> > > </html>_______________________________________________ > > Rails-spinoffs mailing list > > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs_______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Queues is definately the solution, as Alex mentioned. In particular, you''ll need "scoped queues", having a scope for each menu item, otherwise you''ll have to wait for each menu to finish before the next can start.... -Jerod On 6/16/06, Laurent LaSalle <laurent-4fE5YV2w1rIAvxtiuMwx3w@public.gmane.org> wrote:> > Thanks for your informative answer. This isn''t only happening in Safari, it > also happens in Firefox so I was guessing that this bug was more global than > expected. I haven''t test it on PC yet, but I can''t see why Firefox for Mac > would be any different than it''s PC counterpart... > > Laurent > > With what browser(s) are you seeing the problems? Based on your description > I''m guessing Safari? Safari fires mouseover events for text elements within > an element (buggy, and why people use this shoddy browser is beyond me)... > > The fix in general will most likely involve you setting a flag on the first > mouseover, and unsetting that flag once the roll-down is complete... if you > get subsequent mouseovers while the flag is still set (rolldown still > happening), do nothing or handle elegantly somehow (up to you)... as far > Safari firing for every text character, you''ll have to first detect for > safari, if safari == true, then do a lookup based on the fromElement and > toElement of the mouseover/mouseout to see if the element firing the > mouseover is actually a child of the parent element the mouse came from (if > so do nothing)... etc, etc, etc... fun stuff. > > On 6/16/06, Laurent LaSalle <laurent-4fE5YV2w1rIAvxtiuMwx3w@public.gmane.org> wrote: > > Anyone? > > > > > I am trying to achieve a Flash-like menu with OnMouseOver effects > > > on 3 divs below. Unfortunately, the javascript resets when the > > > mouse is rolled over the text and if you go mouse crazy on the > > > divs, the script seems to remember where it cut off, and doesn''t > > > roll down completely afterwards. > > > > > > Is it a good place to ask for help? I couldn''t find any > > > Scriptaculous forum (only a wishlist place where no help seems to > > > be offered)... > > > > > > ——— THE CODE ——— > > > > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > > > " > http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> > > > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> > > > <head> > > > <meta http-equiv="content-type" content="text/html; > > > charset=utf-8" /> > > > <title> > > > Untitled > > > </title> > > > <meta name="generator" content="BBEdit 8.2" /> > > > <style type="text/css" title="text/css"> > > > /* <![CDATA[ */ > > > body > > > { > > > padding: 10px; > > > margin: 0; > > > } > > > > > > .menu > > > { > > > width: 90px; > > > height: 92px; > > > padding: 0 0 0 6px; > > > margin: 0 10px 0 0; > > > border-left: #CCC; > > > border-width: 0 0 0 1px; > > > border-style: none none none solid; > > > color: #000; > > > font-family: "Trebuchet MS", trebuchet, sans serif; > > > font-size: 14px; > > > line-height: 22px; > > > text-transform: uppercase; > > > text-align: left; > > > position: relative; > > > float: left; > > > } > > > > > > #accueil { z-index: 10; } > > > > > > #accueilhover > > > { > > > background-color: #CCC; > > > margin-left: -107px; > > > z-index: 5; > > > background-image: url(coin.png); > > > background-repeat: no-repeat; > > > background-position: right bottom; > > > } > > > > > > #organisme { z-index: 10; } > > > > > > #organismehover > > > { > > > background-color: #CCC; > > > margin-left: -107px; > > > z-index: 5; > > > background-image: url(coin.png); > > > background-repeat: no-repeat; > > > background-position: right bottom; > > > } > > > > > > #clients { z-index: 10; } > > > > > > #clientshover > > > { > > > background-color: #CCC; > > > margin-left: -107px; > > > z-index: 5; > > > background-image: url(coin.png); > > > background-repeat: no-repeat; > > > background-position: right bottom; > > > } > > > > > > /* ]]> */ > > > </style> <script src="javascripts/prototype.js" > > > type="text/javascript"></script> <script > > > src="javascripts/scriptaculous.js" > type="text/javascript"></script> > > > <script type="text/javascript"> > > > // <![CDATA[ > > > > > > function mover(cible) { > > > new Effect.BlindDown(cible, { duration: 0.15 }); > > > return false; > > > } > > > > > > function mout(cible) { > > > new Effect.BlindUp(cible, { duration: 0.15 }); > > > return false; > > > } > > > > > > // ]]> > > > </script> > > > </head> > > > <body> > > > <div class="menu" id="accueil" > onmouseover="mover(''accueilhover'');" > > > onmouseout="mout(''accueilhover'');"> > > > <a href="#"> > > > Accueil > > > </a> > > > </div> > > > <div class="menu" id="accueilhover" style="display: > none;"> > > > </div> > > > <div class="menu" id="organisme" > > > onmouseover="mover(''organismehover'');" > > > onmouseout="mout(''organismehover'');"> > > > <a href="#"> > > > Organisme > > > </a> > > > </div> > > > <div class="menu" id="organismehover" style="display: > none;"> > > > </div> > > > <div class="menu" id="clients" > onmouseover="mover(''clientshover'');" > > > onmouseout="mout(''clientshover'');"> > > > <a href="#"> > > > Clients > > > </a> > > > </div> > > > <div class="menu" id="clientshover" style="display: > none;"> > > > </div> > > > </body> > > > </html>_______________________________________________ > > > Rails-spinoffs mailing list > > > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > > > > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > > > _______________________________________________ > > Rails-spinoffs mailing list > > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > > > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > >