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
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
_______________________________________________
Rails-spinoffs mailing list
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
