When the mouse pointer leaves the Beatle image then hide the yellow div once again.


One Big Exception

If the mouse pointer leaves the image and is over the yellow div, do NOT hide it!

Once the yellow div appears the only ways it should disappear again are...

1. When the user clicks on the yellow div
2. When the user takes the mouse pointer over the Beatle image again and then
takes the mouse pointer off the image while NOT going back over the yellow div.


<html>
<head>

<script language="JavaScript" type="text/Javascript">
function showDiv()
{
var mySelect = document.getElementById("myselect");
var myList = document.getElementById("mylist");

switch (mySelect.value)
{
case 'J':
myDiv = document.getElementById("John");
myList.innerHTML = myDiv.innerHTML;
myList.style.display = "block";
break;

case 'P':
myDiv = document.getElementById("Paul");
myList.innerHTML = myDiv.innerHTML;
myList.style.display = "block";
break;


case 'G':
myDiv = document.getElementById("George");
myList.innerHTML = myDiv.innerHTML;
myList.style.display = "block";
break;


case 'R':
myDiv = document.getElementById("Ringo");
myList.innerHTML = myDiv.innerHTML;
myList.style.display = "block";
break;
}
}

function showYellow(event)
{
var myyellow = document.getElementById("myyellow");
myyellow.style.display = "block";

}
function showpixels(event)
{
x=event.clientX
y=event.clientY

var myMsg = document.getElementById("msg");
myMsg.innerHTML = "X coords: " + x + ", Y coords: " + y;
}

</script>
<style type="text/css">

#selectdiv
{
position:left;
left:10px;
top:10px;
width:400px;
height:400px;
}
#mylist
{
position:absolute;
left: 200px;
top: 100px;
width:inherit;
height:inherit;
}
#myyellow
{
position: left;
left: 200px;
top: 100px;
width:200px;
height:100px;
background-color:#FF3;
}
</style>
<title></title>

<style type="text/css">
div.c2 {display:none}
h1.c1 {font-size:28px}
</style>
</head>
<body>
<div id="selectdiv">
<h1 class="c1">Select a Beatle</h1>
<select name="beatles" size="1" id="myselect" onchange="showDiv();">
<option value="-">-</option>
<option value="J">John</option>
<option value="P">Paul</option>
<option value="G">George</option>
<option value="R">Ringo</option>
</select></div>
<div id="mylist" class="c2" onmouseover="showYellow(event);" onmouseout="showpixels(event)"></div>
<div id="John" class="c2"><img src="beatles_john.jpg" alt="** PLEASE DESCRIBE THIS IMAGE **"></div>
<div id="Paul" class="c2"><img src="beatles_paul.jpg" alt="** PLEASE DESCRIBE THIS IMAGE **"></div>
<div id="George" class="c2"><img src="beatles_george.jpg" alt="** PLEASE DESCRIBE THIS IMAGE **"></div>
<div id="Ringo" class="c2"><img src="beatles_ringo.jpg" alt="** PLEASE DESCRIBE THIS IMAGE **"></div>
<div id="myyellow" class="c2"></div>
<div id="msg"></div>
<div onmouseover="document.getElementById('myyellow').style.visibility = 'visible'"> <div id="myyellow" onmouseout="this.style.visibility = 'hidden'"> </div> </div>
</body>
</html>