Ensure a user Mouses Over an Item

Discussion in 'Javascript' started by David Jubinville, Dec 7, 2004.

  1. Hi All,

    I've got another question for you...

    Same courseware-type application, new problem.

    What I would like to do is have the users mouse over each point to get a
    full description of the item - in this case a visual cut into sections.
    However, this is where things get complicated, I would like to block them
    from proceeding with the courseware until they have moused over each point.
    This is being done via a DIV overlaying the 'forward' nav button.

    How can I detect mouseovers > 0 for each situation, then hide the 'mask' DIV
    once all conditions are met?

    In flash it wouldn't be difficult...

    =====================CODE====================

    countPPV = 0;
    countMOD = 0;
    countEros = 0;

    function noCheat {
    if (countPPV > 0 && countMOD > 0 && countEros > 0) {
    document.layer.visibility(hide);
    }
    }

    onMouseOver return('noCheat(countPPV++)');

    =====================CODE====================

    It could also be defined as an array using ID's to keep it dynamic I
    suppose.

    If someone could help point me in the right direction it would be greatly
    appreciated.

    Thanks in advance,
    David Jubinville
     
    David Jubinville, Dec 7, 2004
    #1
    1. Advertising

  2. "Rob B" <> wrote in message
    news:1102450751.5c85a72d062f6373412b4c129fd26254@teranews...
    > David Jubinville wrote:
    >
    > > What I would like to do is have the users mouse over each point to get

    > a
    > > full description of the item - in this case a visual cut into

    > sections.
    > > However, this is where things get complicated, I would like to block

    > them
    > > from proceeding with the courseware until they have moused over each

    > point.
    > > This is being done via a DIV overlaying the 'forward' nav button.

    >
    > Slightly different approach:
    >
    > <!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="en" lang="en">
    > <head>
    > <title>feh!</title>
    > <style type="text/css">
    >
    > div.point {
    > width: 120px;
    > font: bold 90% verdana;
    > text-align: center;
    > margin: 8px;
    > padding: 2px;
    > border: 1px #000 dashed;
    > background: ghostwhite;
    > cursor: pointer;
    > }
    >
    > </style>
    > <script type="text/javascript">
    > //<![CDATA[
    >
    > function tally()
    > {
    > var el, n = 0, i = 0;
    > while (el = document.getElementById('point' + ++i))
    > if (el.seen)
    > ++n;
    > if (++n == i)
    > {
    > el = document.getElementById('next');
    > el.disabled = false;
    > el.parentNode.style.borderStyle = 'solid'; //overkill
    > el.parentNode.style.background = '#cec'; //ditto
    > }
    > }
    >
    > //]]>
    > </script>
    > </head>
    > <body>
    > <div id="point1" class="point"
    > onmouseover="this.seen=false;this.style.background='buttonface'"
    > onmouseout="this.seen=true;tally()">Point 1.</div>
    > <div id="point2" class="point"
    > onmouseover="this.seen=false;this.style.background='buttonface'"
    > onmouseout="this.seen=true;tally()">Point 2.</div>
    > <div id="point3" class="point"
    > onmouseover="this.seen=false;this.style.background='buttonface'"
    > onmouseout="this.seen=true;tally()">Point 3.</div>
    > <div id="point4" class="point"
    > onmouseover="this.seen=false;this.style.background='buttonface'"
    > onmouseout="this.seen=true;tally()">Point 4.</div>
    > <div id="point5" class="point"
    > onmouseover="this.seen=false;this.style.background='buttonface'"
    > onmouseout="this.seen=true;tally()">Point 5.</div>
    > <form>
    > <div class="point"><input id="next" type="button" name="next"
    > value="next" disabled="disabled" /></div>
    > </form>
    > </body>
    > </html>
    >
    > Didn't specify how the flyover (or whatever) is being implemented.
    >
    > *** Sent via Developersdex http://www.developersdex.com ***
    > Don't just participate in USENET...get rewarded for it!


    Thanks Rob!

    Very interesting way of approaching it, it never even occured to me to use a
    DOM model for validating the content.

    Very smooth, and alarmingly fast!

    David
     
    David Jubinville, Dec 7, 2004
    #2
    1. Advertising

  3. David Jubinville

    RobG Guest

    Rob B wrote:
    [...]
    > var i = 1, div;
    > while (div = document.getElementById('point' + i++))
    > {
    > div.onmouseover = unseen;
    > div.onmouseout = seen;

    [...]

    I realise this is just sample code, but as a quick question, why attach
    events to both mouseover and mouseout? Why not just attach seen on
    mouseover? Presumably the OP will add some visual affects too.

    this.seen could be set to false as part of init_points, or not at all.
    If seen isn't set, then the line:

    if (el.seen)

    relies on 'undefined' being evaluated as false (which seems to happen
    reliably) - is this OK?


    --
    Rob
     
    RobG, Dec 8, 2004
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Sally
    Replies:
    1
    Views:
    6,106
    John Saunders
    Apr 16, 2004
  2. =?Utf-8?B?Um9iIEx5bmNo?=
    Replies:
    9
    Views:
    341
    =?Utf-8?B?Um9iIGx5bmNo?=
    May 4, 2004
  3. Dot net work
    Replies:
    0
    Views:
    445
    Dot net work
    Jun 27, 2004
  4. Nacho Lafuente

    Tool to ensure quality over JSP

    Nacho Lafuente, Jan 29, 2004, in forum: Java
    Replies:
    0
    Views:
    601
    Nacho Lafuente
    Jan 29, 2004
  5. deathweaselx86
    Replies:
    5
    Views:
    1,117
    Raymond Hettinger
    Jun 25, 2011
Loading...

Share This Page