JavaScript - Mouse Hold Function

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>

How to mouse over the image then the words will appear below it?

Hi,

Does anyone knows how to use this effect using javascript?

http://www.modonline.com/

Really appreciate if someone can help me.

Thank You,
Nadun

I just want to know :
the animation you know the eyes of the who follow the mouse I can not put it on my web how could I please help me thank you

is it possible to make the mouse be at a given position on the screen using javascript for example i am writing a element resize script and i would like to have it so when u click on the resize button the cursor moves to the bottom right corner of the element for the starting position

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";
				}

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

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...

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

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!

Hi. I hope someone can help.

I am using a 'suckertree horizontal menu'.

I am trying to alter the javascript to provide a delay with mouseout (to hide the UL).

I am having issues!

Here is the original code:
Code:

ultags[t].parentNode.onmouseout=function(){
  this.getElementsByTagName("ul")[0].style.visibility="hidden"
}

Here is the code I am working with:
Code:

ultags[t].parentNode.onmouseout=function(){
  setTimeout("this.getElementsByTagName(\"" + ul + "\")[0].style.visibility=\"" + hidden + "\"", 1500);
}

Any help greatfully recieved!

I have a piece of raw code. I want to make some images greater/smaller onmouseover/onmouseout, in a graduate mode, on using some independent setTimeout objects which are to be started/clear . It works ok if the mouse goes up and down at a reasonable speed. But if the movement is fast, the onmouseout looks to fail in firing (and some images remain on their bigger stage), which is somehow weird. Where could be the mistake? What did I make wrong (except that I might have had done that with Flash)? Any thoughts?

You have in the attachment (see test.zip) the full example, with the used images, as well.

Code:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
img{
width:144px;
height:36px;
cursor:pointer;
}
</style>
<script type="text/javascript">
var big1,big2,big3,small1,small2,small3, step=1;
function bigPic1(obj,w,h){
w+=4;h++;
obj.style.width=w+'px';
obj.style.height=h+'px';
if(h<55){big1=setTimeout(function(){bigPic1(obj,w,h)},step)}
}
function smallPic1(obj,w,h){
w-=4;h--;
obj.style.width=w+'px';
obj.style.height=h+'px';
if(h>36){small1=setTimeout(function(){smallPic1(obj,w,h)},step)}
}
function bigPic2(obj,w,h){
w+=4;h++;
obj.style.width=w+'px';
obj.style.height=h+'px';
if(h<55){big2=setTimeout(function(){bigPic2(obj,w,h)},step)}
}
function smallPic2(obj,w,h){
w-=4;h--;
obj.style.width=w+'px';
obj.style.height=h+'px';
if(h>36){small2=setTimeout(function(){smallPic2(obj,w,h)},step)}
}
function bigPic3(obj,w,h){
w+=4;h++;
obj.style.width=w+'px';
obj.style.height=h+'px';
if(h<55){big3=setTimeout(function(){bigPic3(obj,w,h)},step)}
}
function smallPic3(obj,w,h){
w-=4;h--;
obj.style.width=w+'px';
obj.style.height=h+'px';
if(h>36){small3=setTimeout(function(){smallPic3(obj,w,h)},step)}
}
function setAtt(){
var allImg=document.getElementById('menu').getElementsByTagName('img'), img, i=0;
while(img=allImg[i++]){
img.style.width='144px';
img.style.height='36px';
img.ind=i;
img.onmouseover=function(){
if('small'+this.ind){clearTimeout('small'+this.ind)};
window['bigPic'+this.ind](this,parseInt(this.style.width),parseInt(this.style.height))
};
img.onmouseout=function(){
if('big'+this.ind){clearTimeout('big'+this.ind)};
window['smallPic'+this.ind](this,parseInt(this.style.width),parseInt(this.style.height))
};
}
}
onload=setAtt
</script>
</head>
<body>
<div id="menu">
	<div>
    	<img src="01.png" width="144" height="36" border="0" alt="">
	</div>
    <br>
	<br>
    <div>
    	<img src="02.png" width="144" height="36" border="0" alt="">
	</div>
	<br>
	<br>
    <div>
    	<img src="03.png" width="144" height="36" border="0" alt="">
	</div>
</div>
</body>
</html>

Hi,

Wondering if anyone can help me out with some javascript.

How do I check upon clicking a random object on the page that the object onmousedown is an image or not?

Any help is much appreciated.

-cantonboi

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