JavaScript - Mouse On, Mouse Off

Hi frds ,

I have requirement that when ever I hover the mouse on image then the mouse pointer should be hand symbol ,

So for that I have written the code as

<a style="cursor: hand;"> <img ....?</a>

in IE it works fine but in Firefox it doesnot works

Note :
I have already used as <a href="#"> <img ....></a> but due to this , the screen is jumping when we click on image

Thanks
Raj

I wrote this code for 1 image, and it is working perfectly fine:

Code:

function swapImage()

				{
					document.getElementById("linkedin").src = "images/glinkedin.png";
				}

function restoreImage()

				{
					document.getElementById("linkedin").src = "images/linkedin.png";
				}

the problem starts when I want to use this code for 4 images, can anyone correct it please:

Code:

function swapImage()

				{
					document.getElementById("linkedin").src = "images/glinkedin.png";
				}


				{
					document.getElementById("facebook").src = "images/gfacebook.png";
				}


				{
					document.getElementById("google").src = "images/ggoogle.png";
				}


				{
					document.getElementById("twitter").src = "images/gtwitter.png";
				}

function restoreImage()

				{
					document.getElementById("linkedin").src = "images/linkedin.png";
				}

				{
					document.getElementById("facebook").src = "images/facebook.png";
				}

				{
					document.getElementById("google").src = "images/google.png";
				}

				{
					document.getElementById("twitter").src = "images/twitter.png";
				}

background:

display 3-4 pictures and a generic parargraph. when you mouseover a picture the parargragh changes to the bio of the person pictured and doesn't change until a different picture is mouseovered or a reset butten is clicked.

current code:
i have adapted some code I found (thank you, donator) to basicly hide and unhide a span ID on mouseover. if functions as i want but the element id is hardcoded and i would like it to be dynamic on mouse location. not being that familair w/ coding and / or javascript; i'm stuck.
Code:

<script type="text/javascript">
   var el;
   var cpic; //elementId via mouse position
window.onload=function() {
   el=document.getElementById('pic1');
   el.onmouseover=function() {
   changeText('hide','show')
 }
   
 }
function changeText(cl1,cl2) {
   document.getElementById('span1').className=cl1;
   document.getElementById('span2').className=cl2;
}
</script>

so the above works for 1 image, but as you can see "pic1" is hard coded. i figured i could define "cpic" to takes it's place, but i'm not sure how to get the elementId (i'm assuming it would be from the mouse position). if the above code is totaly the wrong approach let me know. it was just the first thing i found that seemed to do what i needed.

on the HTML side "span1" is the default text and "span2" is the hidden mouseover text. i'm assuming that by adding 2 more pictures i'll need to add "span3" and "span4".
i'll also have to find a way of hiding the other spans. I.E. if i go from pic2 to pic3 then, the pic2 text will have to be hidden before pic3 text is displayed.

one thing i don't want to do is restrict the mouse to be focused on the picture to display the text. the text should change only when another picture is in focus or the rest button is clicked.

any direction / suggestions would be a big help.
regards,
Fatmann66

Hi I have a requirement....I have a timer on a page. If the user leave the page (mouse goes off of that page) the timer starts and continues...and when the user comes into that page(mouse over that page) the timer goes off/STOP....Is this can be done?? using javascript???
pls help...

I have a pop-up message box, that I'd like help changing to a mouse-over message box.

Any help would be appreciated. Thanks

Code:

<style>
.msg { display:block; position:absolute; top:300px;
left:300px; width:350px; background-color:#eeeeff; border-style:solid;
border-width:1px; padding:15px 20px 5px 20px; }
.msgclose { text-decoration:none; font-size:0.9em;
font-variant:small-caps; margin-top:10px; }
</style>

<div id="popupMsg" class="msg">
You must read this message.<br>
This is a test message box <br />
<div style="width:100%; text-align:right;">

<a class="msgclose" href="#" onclick="document.getElementById('popupMsg').style.display = 'block';
return false;"><font color="#800000">Close Window</font></a>
</div>

Hello everyone, I'm looking for a javascript script that will load a small image where the mouse is, then it would go away after a couple seconds.

Thanks a bunch!

Hey CodingFourm-ites!


Ive scoured the internet for scripts that make a <div> follow the mouse, and have found one that seems to work well. However, I want the <div> to stop moving when the CTRL or the SHIFT key is pressed, I dont care which. Hopefully, I can have a div that follows the mouse at an offset that contains some click-able items, so a menu is always by your mouse. Ive tried now more than a few times to put together a piece of code that can achieve this, but none have worked. Can somebody write a script that can achieve this, or point me in the right direction?

Thanks guys!

Current JS for mouse follow:

Code:

var divName = 'mouseFollow'; // div that is to follow the mouse
                       // (must be position:absolute)
var offX = 15;          // X offset from mouse position
var offY = 15;          // Y offset from mouse position

function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;}
function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;}

function follow(evt) {if (document.getElementById) {var obj = document.getElementById(divName).style; obj.visibility = 'visible';
obj.left = (parseInt(mouseX(evt))+offX) + 'px';
obj.top = (parseInt(mouseY(evt))+offY) + 'px';}}
document.onmousemove = follow;

The original code can be found at: http://javascript.about.com/library/blfollow2.htm

I've created a simple function to repeat an expression while the user has their mouse button held. For some reason this function just loops infinitely after the button is clicked. It also does not sense the first click. holdMouse() is called at the "onclick" event of the button. I've tried changing it to the "onmousedown" and there is no change.

The vars passed in a (the button that was pressed, the expression to repeat, the ms interval to repeat it)

I feel like I did this right but I obviously haven't. How do I fix this?

Code:

function holdMouse(btn, action, interval) {
	var t;
	
	var repeat = function () {
		action();
		t = setTimeout(repeat, interval);
	}
	
	btn.onmouseup = function () { clearTimeout(t); }
	btn.onmousedown = function () { repeat(); }	
}

I'm a newbie Javascript coder and I've run into a little problem. I hope someone can help me with it.

The idea is that I've got a bunch of images, and I want one thing to fire when left-clicking them and a different thing when right-clicking. For the purpose of this thread I've replaced the 'things' with alerts.

this is the part that gets added to the images (called 'plaatje'):
Code:

plaatje.onclick = klik;

this is the function that gets executed when clicked.
Code:

function klik(event) {
	var fotoID = event.target.id;
	if (event.button == 0) {
		alert("Left click on " + fotoID + "!");
	} else if (event.button == 2) {
		event.preventDefault();
		alert("Right click on " + fotoID + "!");
}	}

I've added the "event.preventDefault();" part because I was told that would prevent the right-click menu from popping up.

The problem is that the left-click part of the code works perfectly, but the right-click part does nothing. The right-click menu comes up as normal and the alert never shows.

Can anyone tell me what I'm doing wrong?

I'm wondering if theirs a way to make a dim light, sorta like a candle follow my mouse cursor on a webpage?

Im wanting to make a div move according to where the mouse is IE if the mouse is on the left the div moves right and visa versa. I've got the pixels for where the middle of the screen is but im unsure what to do next.

If anyone can help ill be very grateful, ill try and find an example to help illustrate what i mean.

Hi once again!

Is it possible to detect was the mouse on the move or not in the moment when button is released ?

Hi

I have a control on the left side of the page which sits inside a div. The control reacts to where the mouse is positioned within the div.

This works fine in IE but I cant get it working in Firefox. Heres what I have:

Code:

<div id="divcon" class="boxContentLeft" OnMouseMove="SetValues(event);">

function SetValues(event)
{
	var ev=(!event)?window.event:event;  //Moz:IE
	
	if (ev.pageX) { //Mozilla or compatible

		/* The absolute position of the control */
		var MarqPos = GetAbsPosition(divcon);
		alert('MarqPos x = '+MarqPos.x+'\nMarqPos y = '+MarqPos.y);

		/* Relative to this div */
		MousePointerDivX = ev.pageX-MarqPos.x;
		MousePointerDivY = ev.pageY-MarqPos.y;   
		alert('MousePointerDivX = '+MousePointerDivX+'\nMousePointerDivY = '+MousePointerDivY);
		
		/* Relative to the top left of the viewable area */
		MousePointerClientX = ev.pageX;
		MousePointerClientY = ev.pageY;
		alert('MousePointerClientX = '+MousePointerClientX+'\nMousePointerClientY = '+MousePointerClientY);

	}
	else if(ev.clientX) { //IE or compatible

		/* Relative to this div */
		MousePointerDivX = window.event.x;
		MousePointerDivY = window.event.y;   
		alert('MousePointerDivX = '+MousePointerDivX+'\nMousePointerDivY = '+MousePointerDivY);

		/* Relative to the top left of the viewable area */
		//MousePointerClientX = window.event.clientX;
		//MousePointerClientY = window.event.clientY;
		//alert('MousePointerClientX = '+MousePointerClientX+'\nMousePointerClientY = '+MousePointerClientY);

		/* The absolute position of the control */
		var MarqPos = GetAbsPosition(divcon);
		alert('MarqPos x = '+MarqPos.x+'\nMarqPos y = '+MarqPos.y);

		/* The mouse position relative to top left of page */
		//MousePointerX = mouseX(window.event);
		//MousePointerY = mouseY(window.event);
		//alert('MousePointerX = '+MousePointerX+'\nMousePointerY = '+MousePointerY);

		/* The control relative to the top left of the parent control */
		//var OffsetLeft = marquees.offsetLeft;
		//var OffsetTop = marquees.offsetTop;
		//alert('OffsetLeft = '+OffsetLeft+'\nOffsetTop = '+OffsetTop);

	}
	else { //old browsers
		return false;
	}
	   
    setInterval("",20);
}

// Calculates the object's absolute position, and width and height
function GetAbsPosition(object) {

	var position = new Object;
	position.x = 0;
	position.y = 0;

	if( object ) {
		position.x = object.offsetLeft;
		position.y = object.offsetTop;

		if( object.offsetParent ) {
			var parentpos = GetAbsPosition(object.offsetParent);
			position.x += parentpos.x;
			position.y += parentpos.y;
		}
	}

	position.cx = object.offsetWidth;
	position.cy = object.offsetHeight;

	return position;
}

Using IE only I didnt need to find out the position of the DIV within the page as I could just use 'window.event.x' which would return the x coordinate within the DIV.

I dont think you can do that with Firefox so you have to get the coordinate of the mouse and then subtract the coordinates of the DIV.

But when Im calling GetAbsPosition(divcon) I get
Error: divcon is not defined.

Can somebody please tell me why I can call GetAbsPosition from IE and it works but I get an error calling the same thing in Firefox.

Thanks

I want to mouse over a symbol (or coordinate) on an image and have a photograph appear of the real life item. Is there a code that could be used for doing this?

Any help appreciated.