JavaScript - Mouse Over Ploblem
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"; } Similar TutorialsI've got to have a typo somewhere, but i can't seem to find it. I need a new pair of eyes to point it out for me. background: trying to code a mouseover link for a nav bar. everything is working( hyperlink, normal image shows up) but when i mouse over the image swap doesn't happen. I have 2 parts of code. 1st preloads images and does the swap function. loads in <head> See below: Code: <SCRIPT language="javascript" type="text/javascript"> if (document.images) { /* preload images */ var subcontractorsOn = new Image (); subcontractorsOn.scr = "subcontractorsOn.gif"; var subcontractorsOff = new Image (); subcontractorsOff.scr = "subcontractorsOff.gif"; } function mouseOn (imgName) { if (document.images) document [imgName].scr = eval (imgName + "On.scr"); } function mouseOff (imgName) { if (document.images) document [imgName].scr = eval (imgName + "Off.scr"); } </SCRIPT> 2nd just calls the functions to preform the swap. this is in the <body> see code below Code: <a href="subcontractors.htm" onMouseOut="mouseOn('subcontractors')" onMouseOver="mouseOff('subcontractors')"> <img src="subcontractorsOff.gif" height="40" width="133" name="subcontractors" id="subcontractors" border="0" alt="subcontractors"></a> any insight would be great. regards, Fatmann66 hi, when i mouseon an image, how can i make it so, the image i'm mousingon and a second image both fade into alternate images, and then fade back out to the original images when i mouseoff? here is an example- http://www.javascript-fx.com/develop...t/ifctest.html . any help would be most appreciated.
How to mouse over the image then the words will appear below it?
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
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 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 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. |