...

View Full Version : detect mouseover and mouseout & show coordinates



javastudent
12-06-2010, 07:05 AM
This is what my code is supposed to do:

1. create a select list that changes the photo showing, (which I have)
2. create script so that when the user hovers over the image it shows a div
3. when the users mouse is off the image/div shows the coordinates where it last left
4. on mouseout hides the div again (this is the part I'm stuck on)

This is my html:


<style>
#selectdiv
{
position:absolute;
left:10px;
top:10px;
width:400px;
height:400px;
}
#mylist
{
position: absolute;
left: 200px;
top: 100px;
width:inherit;
height:inherit;
}
#myyellow
{
position: absolute;
left: 600px;
top: 100px;
width:300px;
height:200px;
background-color:#FF3;
}
</style>
<body>
<div id="selectdiv">
<h1 style="font-size:28px">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" style="display:none" onmouseover="showYellow(event);" onmouseout="showpixels(event)"></div>
<div id="John" style="display:none">
<img src="beatles_john.jpg" />
</div>
<div id="Paul" style="display:none">
<img src="beatles_paul.jpg" />
</div>
<div id="George" style="display:none">
<img src="beatles_george.jpg" />
</div>
<div id="Ringo" style="display:none">
<img src="beatles_ringo.jpg" />
</div>
<div id="myyellow" style="display:none"></div>
<div id="msg"></div>
</body>

This is my script:

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"; //Makes div viewable
break;

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


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


case 'R':
myDiv = document.getElementById("Ringo");
myList.innerHTML = myDiv.innerHTML;
myList.style.display = "block"; //Makes div viewable
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;
}

Any feed back is greatly appreciated.

javastudent
12-06-2010, 10:30 PM
Nevermind, I figured it out.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum