...

View Full Version : How can I alter a variable on mouseover in multiple browsers?



Ammonhra
12-19-2011, 10:01 PM
Hi all, I've been trying to teach myself Javascript to figure out this problem, but I'm apparently not learning what I need to.

The objective is this:
I want to have a div appear below my mouse when mousing over different parts of my website.

I know how to swap out the background images, I know how to change the div's sizes... It's just that I'm using one div, and in order to get this right, I need it to be positioned in different places under the mouse each time the image changes.

I've got a cross-browser mouse-follow worked out, I just don't know how to edit the "divvx" and "divvy" variables when I mouse over the "boxtest" div.

Here is the code I'm working on, maybe I'm just missing something obvious?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var divvx=22, divvy=22;
function doMouseMove(e){
var posx=0;var posy=0;
var e=(!e)?window.event:e;//IE:Moz
if (e.pageX){//Moz
posx=e.pageX+window.pageXOffset;
posy=e.pageY+window.pageYOffset;
}
else if(e.clientX){//IE
if(document.documentElement){//IE 6+ strict mode
posx=e.clientX+document.documentElement.scrollLeft;
posy=e.clientY+document.documentElement.scrollTop;
}
else if(document.body){//Other IE
posx=e.clientX+document.body.scrollLeft;
posy=e.clientY+document.body.scrollTop;
}
}
else{return false}//old browsers
var mydiv=document.getElementById('curicon');
mydiv.style.left=(posx-divvx)+'px';
mydiv.style.top=(posy-22)+'px';
}
document.onmousemove=doMouseMove
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
</script>
<style type="text/css">
<!--
#curicon {
background-image: url(resources/cursors/Inactive_Halo.png);
height: 44px;
width: 44px;
position: absolute;
top: -80px;
left: -80px;
}
#boxtest {
position: absolute;
height: 100px;
width: 400px;
background-color: #0F0;
left: 149px;
top: 213px;
}
-->
</style>
</head>
<body>
<div id="curicon" name="curicon" style="position:absolute; left:-250px; z-index:2"></div>
<div id="boxtest" onMouseOver="MM_callJS('divvx=68')"></div>
</body>
</html>

Thanks, everyone. This has been driving me nuts for an entire week.

chump2877
12-20-2011, 03:21 AM
It's not clear here what you are looking for.


The objective is this:
I want to have a div appear below my mouse when mousing over different parts of my website.

It appears that you have already met your objective: The code that you pasted does this adequately.


I need it to be positioned in different places under the mouse each time the image changes.

Can you explain this more? What images? Where are the images? What behaviors are attached to the images, if any?

Are you mousing over multiple images, and the div that follows the mouse needs to be positioned differently relative to the mouse for different images (onmouseover of these images)?


I've got a cross-browser mouse-follow worked out, I just don't know how to edit the "divvx" and "divvy" variables when I mouse over the "boxtest" div.

How is the "mouse-follow" behavior supposed to change exactly when one mouses over the "boxtest" div?

Ammonhra
12-21-2011, 06:50 PM
Sorry, I forgot to mention that the provided code is just my test code. I'm using it to get the principles down, so I don't accidentally mess up my actual page.

And I must have included too much information.

As it stands, I have the div box following the cursor. What I need to happen is for the div box to change position relative to the cursor when a user mouses over the test box.

That is, right now, the div box is 44px x 44px and is centered to the cursor (22x, 22y). Now, what would I need to do for the div box to move to, say, 35x, 52y relative to the mouse position on mouseover, then back to 22x, 22y on mouse out?

And how can I get it working cross-browser?

I hope that cleared it up, thanks for your time!

chump2877
12-22-2011, 06:26 PM
Well, theoretically, the following code should work:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function findCursorPos(e)
{
var posx = null;
var posy = null;
if (e.pageX)
{
//Moz
posx = e.pageX + window.pageXOffset;
posy = e.pageY + window.pageYOffset;
}
else if (e.clientX)
{
//IE
if (document.documentElement)
{
//IE 6+ strict mode
posx = e.clientX + document.documentElement.scrollLeft;
posy = e.clientY + document.documentElement.scrollTop;
}
else if (document.body)
{
//Other IE
posx = e.clientX + document.body.scrollLeft;
posy = e.clientY + document.body.scrollTop;
}
}
return [posx, posy];
}

function getTargetElem(e)
{
var targElem;
if (e.target)
{
targElem = e.target;
}
else if (e.srcElement)
{
targElem = e.srcElement;
}
targElem = (targElem.nodeType == 3) ? targElem.parentNode : targElem; // defeat Safari bug
return targElem;
}

function doMouseMove(event)
{
var e = (!event) ? window.event : event;
var cursorPos = findCursorPos(e);

targElemOnMousemove = getTargetElem(e);
//alert(targElemOnMouseover.id);
var divvx = (targElemOnMousemove.id == 'boxtest') ? 35 : 22;
var divvy = (targElemOnMousemove.id == 'boxtest') ? 52 : 22;

var mydiv = document.getElementById('curicon');
if (cursorPos[0] != null)
{
mydiv.style.left = (cursorPos[0] - divvx) + 'px';
mydiv.style.top = (cursorPos[1] - divvy) + 'px';
}
}

document.getElementsByTagName('html')[0].onmousemove = doMouseMove;
</script>
<style type="text/css">
#curicon {
background-color: red;
height: 44px;
width: 44px;
position: absolute;
z-index:200;
top: -80px;
left: -80px;
}
#boxtest {
position: absolute;
z-index:100;
height: 100px;
width: 400px;
background-color: #0F0;
left: 149px;
top: 213px;
}
</style>
</head>
<body>
<div id="curicon" name="curicon"></div>
<div id="boxtest"></div>
</body>
</html>

...and it kind of does....but the curicon div doesn't always adjust when moving over boxtest, or it does so a little later than expected.

A little Googling tells me that the onmousemove event, while functional, is not one of the best DOM events to manipulate because it can be slow to respond (http://www.quirksmode.org/js/events_mouse.html#mousemove). (I personally don't find myself handling onmousemove much -- or really at all -- in my own projects.)

Whether or not that is the case here, I'm not completely sure. I don't have any more time to play with this right now, so in the meantime, perhaps one of the javascript experts here can see something that I can't.

chump2877
12-23-2011, 02:46 AM
I looked at this again and realized what I was doing wrong. this should work for you:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function findCursorPos(e)
{
var posx = null;
var posy = null;
if (e.pageX)
{
//Moz
posx = e.pageX + window.pageXOffset;
posy = e.pageY + window.pageYOffset;
}
else if (e.clientX)
{
//IE
if (document.documentElement)
{
//IE 6+ strict mode
posx = e.clientX + document.documentElement.scrollLeft;
posy = e.clientY + document.documentElement.scrollTop;
}
else if (document.body)
{
//Other IE
posx = e.clientX + document.body.scrollLeft;
posy = e.clientY + document.body.scrollTop;
}
}
return [posx, posy];
}

function doMouseMove(event)
{
var e = (!event) ? window.event : event;
var cursorPos = findCursorPos(e);
if (cursorPos[0] != null)
{
var boxtestDiv = document.getElementById('boxtest');
var isHoveringBoxtest = cursorPos[0] >= parseInt(boxtestDiv.style.left) && cursorPos[0] <= parseInt(boxtestDiv.style.left) + parseInt(boxtestDiv.style.width) && cursorPos[1] >= parseInt(boxtestDiv.style.top) && cursorPos[1] <= parseInt(boxtestDiv.style.top) + parseInt(boxtestDiv.style.height);
var divvx = (isHoveringBoxtest) ? 35 : 22;
var divvy = (isHoveringBoxtest) ? 52 : 22;
var mydiv = document.getElementById('curicon');
mydiv.style.left = (cursorPos[0] - divvx) + 'px';
mydiv.style.top = (cursorPos[1] - divvy) + 'px';
}
}

document.getElementsByTagName('html')[0].onmousemove = doMouseMove;
</script>
<style type="text/css">
#curicon {
background-color: red;
height: 44px;
width: 44px;
position: absolute;
z-index:200;
top: -80px;
left: -80px;
}
#boxtest {
position: absolute;
z-index:100;
background-color: #0F0;
}
</style>
</head>
<body>
<div id="curicon"></div>
<div id="boxtest" style="height:100px;width:400px;left:149px;top:213px"></div>
</body>
</html>

...So now, by cross-referencing the width, height, and coordinates of boxtest with the current coordinates of the mouse pointer, we can determine when the mouse is hovering over boxtest and shift the curicon div accordingly.

Ammonhra
01-01-2012, 12:13 AM
Oh, wow! I'm looking over it now, and it looks like it will work perfectly!
Sorry for the late response, holiday crap...

But thank you so, so much! You're a lifesaver!!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum