Hello!!<br><br>This is the code. Change "sun.gif" for any other image. You'll see what this code does when you point the cursor over two different regions. What I want to do is to freeze the menu to have time to choose some options and turn it off if the second region is pointed over or when clicking in any free area and vice-versa.
<br><br>Thanks!<br><br>Code:<br><br><HTML><br><HEAD><br><br><TITLE>Testing CSS with Menus</TITLE><br><br><STYLE type="text/css"><br><br>#picture {width:600px; height:800px; background:url(
sun.gif) no-repeat;}<br><br>#picture DD {position:absolute; padding:0; margin:0;}<br><br>#picture #region1 {left:220px; top:100px; z-index:20;}<br>#picture #region2 {left:230px; top:250px; z-index:20;}<br><br>#picture A#part1 {display:block; width:160px; height:120px; text-decoration:none; z-index:20;}
<br>#picture A#part2 {display:block; width:160px; height:100px; text-decoration:none; z-index:20;}<br><br>#picture A#part1:hover, #picture A#part2:hover {border:2px solid #cc0;}<br><br>#picture A:hover SPAN {position:absolute; display:block; color:#000; width:330px; height:270px; line-height:
1.8em; font-size:0.9em; text-align:justify;}<br><br>#picture A:hover SPAN {float:left; margin-right:1em; margin-bottom:0.5em; border:1px solid #000;}<br><br>#picture A EM {display:none;}<br>#picture A SPAN, #picture A:visited {display:none;}
<br><br>#picture A#part1:hover SPAN {left:600px; top:-50px;}<br>#picture A#part2:hover SPAN {left:500px; top:-50px;}<br><br>#picture A#part1:hover EM {position:absolute; display:block; left:80px; top:50px; width:530px; height:1px; overflow:hidden; font-size:1px; background:#f00;}
<br>#picture A#part2:hover EM {position:absolute; display:block; left:80px; top:50px; width:530px; height:1px; overflow:hidden; font-size:1px; background:#f00;}<br><br>A:link { color:blue }<br>A:visited { color:blue }<br>
<br></STYLE><br><br></HEAD><br><br><BODY><br><br><DL id="picture"><br><DD id="region1"><A href=#nogo id="part1" alt="Part One" title="This is Part One"><EM></EM>
<br><SPAN><br><UL><br> <LI><A href="page1.html">Link to Page One</A></LI><br> <LI><A href="page2.html">Link to Page Two</A></LI><br> <LI><A href="
page3.html">Link to Page Three</A></LI><br> <LI><A href="page4.html">Link to Page Four</A></LI><br></UL><br></SPAN></A></DD><br><DD id="region2"><A href=#nogo id="part2" alt="Part Two" title="This is Part Two"><EM></EM><SPAN>Some text should be written here.</SPAN></A></DD>
<br></DL><br><br></BODY><br></HTML><br><br><div><span class="gmail_quote">On 9/13/06, <b class="gmail_sendername">Troy III Ajnej</b> <<a href="mailto:trojani2000@hotmail.com">trojani2000@hotmail.com</a>
> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"><div>
<div>You are not clear.</div><div><span class="q"><br><br><br>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~<br> Troy III<br> progressive art enterprise<br>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<br><br>
</span></div><div><blockquote style="border-left: 2px solid rgb(0, 128, 128); padding-left: 5px; margin-left: 5px; margin-right: 0px;">
<hr>
Date: Wed, 13 Sep 2006 13:26:28 -0300</blockquote></div><div><span class="q"><br>From: <a href="mailto:henrique.renno@gmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">henrique.renno@gmail.com
</a><br>To: <a href="mailto:javascript@latech.edu" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">javascript@latech.edu</a><br></span></div><div>Subject: Re: [Javascript] Mapping Image<br>CC: </div>
<div><span class="e" id="q_10da9e766a2e81be_5"><br><br>Hello!!!<br><br>As I said before I just started learning CSS and I'm not understanding so well how things work. I've attached the html file that I did and I'd like to know if someone could take a look. What I want to do is to freeze the menu when the mouse passes over some predefined region in the image refering to this menu and make it disappear when another region is activated (turning on another menu) or when the user clicks over a region without any event associated with. If the menu disappears I think that even "The Flash" could not get a chance to choose an option!!
<br><br>Thanks for you help!!<br><br>
<div><span>On 9/12/06, <b>Paul Novitski</b> <<a href="mailto:paul@juniperwebcraft.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">paul@juniperwebcraft.com</a>> wrote:</span>
<blockquote style="padding-left: 1ex;">At 9/12/2006 08:17 AM, Paul Novitski wrote:<br>> <body class="menu01"><br>> ...<br>> <div class="menu" id="menu01">...</div>
<br>> <div class="menu" id="menu02">...</div> <br>><br>><br>> .menu<br>> {<br>> position: absolute;<br>> left: -1000em;
<br>> }<br>><br>> body.menu01 div#menu01,<br>> body.menu02 div#menu02<br>> {<br>> position: static;<br>> }<br></blockquote></div><br>-- <br>Henrique
</span></div><div><br><hr>Search from any Web page with powerful protection. Get the FREE Windows Live Toolbar Today! <a href="http://get.live.com/toolbar/overview" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
Try it now!</a></div>
</div><br>_______________________________________________<br>Javascript mailing list<br><a onclick="return top.js.OpenExtLink(window,event,this)" href="mailto:Javascript@LaTech.edu">Javascript@LaTech.edu</a><br><a onclick="return top.js.OpenExtLink(window,event,this)" href="https://lists.LaTech.edu/mailman/listinfo/javascript" target="_blank">
https://lists.LaTech.edu/mailman/listinfo/javascript</a><br><br><br></blockquote></div><br><br clear="all"><br>-- <br>Henrique