Ensure a user Mouses Over an Item

David Jubinville · Dec 7, 2004

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

Rob B said:
David said:

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.

Click to expand...

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.

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

RobG · Dec 8, 2004

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?

iterating over a list as if it were a circular list	3	Mar 7, 2013
small layer info on mouse over links : object or iframe ?	4	Jun 25, 2005
Using scriptaculous, how to trigger mouseover effect ONLY if mousedover for a period of time	2	Apr 28, 2008
Wrapping mouse over help icon up Web User Control	7	Oct 25, 2006
when draging a <div>, how can I detect what I'm moving over?	12	Nov 11, 2005
wait for an object.mouseover to execute a function	1	Sep 7, 2004
Mouse-over an image -> play video instead of swap image?	6	Apr 5, 2004
Adding an additional submenu to a collapsible/expandable menu	5	Jan 5, 2007

Ensure a user Mouses Over an Item

David Jubinville

David Jubinville

RobG

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads