[Javascript] Mapping Image

Thu Sep 14 07:02:10 CDT 2006

Hello!!

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.

Thanks!

Code:

<HTML>
<HEAD>

<TITLE>Testing CSS with Menus</TITLE>

<STYLE type="text/css">

#picture {width:600px; height:800px; background:url(sun.gif) no-repeat;}

#picture DD {position:absolute; padding:0; margin:0;}

#picture #region1 {left:220px; top:100px; z-index:20;}
#picture #region2 {left:230px; top:250px; z-index:20;}

#picture A#part1 {display:block; width:160px; height:120px;
text-decoration:none; z-index:20;}
#picture A#part2 {display:block; width:160px; height:100px;
text-decoration:none; z-index:20;}

#picture A#part1:hover, #picture A#part2:hover {border:2px solid #cc0;}

#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;}

#picture A:hover SPAN {float:left; margin-right:1em; margin-bottom:0.5em;
border:1px solid #000;}

#picture A EM {display:none;}
#picture A SPAN, #picture A:visited {display:none;}

#picture A#part1:hover SPAN {left:600px; top:-50px;}
#picture A#part2:hover SPAN {left:500px; top:-50px;}

#picture A#part1:hover EM {position:absolute; display:block; left:80px;
top:50px; width:530px; height:1px; overflow:hidden; font-size:1px;
background:#f00;}
#picture A#part2:hover EM {position:absolute; display:block; left:80px;
top:50px; width:530px; height:1px; overflow:hidden; font-size:1px;
background:#f00;}

A:link { color:blue }
A:visited { color:blue }

</STYLE>

</HEAD>

<BODY>

<DL id="picture">
<DD id="region1"><A href=#nogo id="part1" alt="Part One" title="This is Part
One"><EM></EM>
<SPAN>
<UL>
  <LI><A href="page1.html">Link to Page One</A></LI>
  <LI><A href="page2.html">Link to Page Two</A></LI>
  <LI><A href="page3.html">Link to Page Three</A></LI>
  <LI><A href="page4.html">Link to Page Four</A></LI>
</UL>
</SPAN></A></DD>
<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>
</DL>

</BODY>
</HTML>

On 9/13/06, Troy III Ajnej <trojani2000 at hotmail.com> wrote:
>
> You are not clear.
>
>
>
> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
>                                          Troy III
>                            progressive art enterprise
> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
>
>  ------------------------------
> Date: Wed, 13 Sep 2006 13:26:28 -0300
>
>
> From: henrique.renno at gmail.com
> To: javascript at latech.edu
> Subject: Re: [Javascript] Mapping Image
> CC:
>
>
> Hello!!!
>
> 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!!
>
> Thanks for you help!!
>
> On 9/12/06, *Paul Novitski* <paul at juniperwebcraft.com> wrote:
>
> At 9/12/2006 08:17 AM, Paul Novitski wrote:
> >         <body class="menu01">
> >         ...
> >         <div class="menu" id="menu01">...</div>
> >         <div class="menu" id="menu02">...</div>
> >
> >
> >         .menu
> >         {
> >                 position: absolute;
> >                 left: -1000em;
> >         }
> >
> >         body.menu01 div#menu01,
> >         body.menu02 div#menu02
> >         {
> >                 position: static;
> >         }
>
>
> --
> Henrique
>
> ------------------------------
> Search from any Web page with powerful protection. Get the FREE Windows
> Live Toolbar Today! Try it now! <http://get.live.com/toolbar/overview>
>
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
>
>
>

-- 
Henrique
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20060914/f02c0c81/attachment.htm>