JavaScript - Onmouseover Script Problem With Vista
Hey everyone,
I'm trying to make a sound by using the mouseover event on JS. The script works fine on my husband's computer (IE8, windows xp), but does not work on mine (IE8, Vista). Click on the link below to give you an idea. Just mouseover the images and you should hear an elephant and duck sound. Mouseover the word "elephant" and it "should" make an elephant sound. http://www.mypreciousarrival.com/Ani...oundtest4.html I just need to find a script that will work with different operating systems (or at least windows xp and vista) and browsers (or at least IE) Any suggestions are greatly appreciated. I would like to not resort to any macromedia or schockwave scripting. Thank you! Similar Tutorials2 onmouseover conflict. i cant click menu1-jQuery. can someone help me out. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>灰色CSS+Js实现的下拉菜单代码- www.webdm.cn</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script language="JavaScript" type="text/javascript"> function $(id){ return document.getElementById(id); } function menu_my(name,num) { var my; my = $(name); if ( my.last == undefined ) { my.last = 1; } var Menu = $("Menu" + name + my.last); var Cont = $("Cont" + name + my.last); Menu.className = ""; Cont.style.display = "none"; var Menu = $("Menu" + name + num); var Cont = $("Cont" + name + num); Menu.className = "selectd"; Cont.style.display = "block"; my.last = num; } </script> <script type="text/javascript"> startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; </script> <style type="text/css"> body{ text-align: center; font-size:12px; } #popimg{ WIDTH:770px; margin:0 auto; text-align:center; } #popimg2{ WIDTH:770px; margin:0 auto; text-align:center; z-index:-1; } ul { padding: 0; margin: 0; list-style: none; } li { position:relative; float: left; width: 110px; } li ul { position:absolute; display: none; top: 20px;left:0; } li:hover ul, li.over ul { display: block; } ul li a{ display:block; font-size:12px; border: 1px solid #ccc; padding:3px; margin-right:1px; text-decoration: none; color: #777;background:#eee; } ul li a:hover{ background-color:#f4f4f4; } #test{ clear:both; background-color:#999999; width:769px; height:100px; margin:0 auto; } .menu0307 { OVERFLOW: hidden; ZOOM: 1; HEIGHT: 28px } .menu0307 SPAN { BACKGROUND: url(http://upload.ouliu.net/g/ad2da94515010b2c275a9b4958441e20.png) no-repeat -1000px 0px; FLOAT: left; OVERFLOW: hidden; WIDTH: 125px; LINE-HEIGHT: 300px; HEIGHT: 28px } .menu0307 SPAN#Menuxuehua1 { BACKGROUND-POSITION: 0px 0px } .menu0307 SPAN#Menuxuehua2 { BACKGROUND-POSITION: -125px 0px; WIDTH: 124px } .menu0307 SPAN.selectd#Menuxuehua1 { BACKGROUND-POSITION: 0px -32px } .menu0307 SPAN.selectd#Menuxuehua2 { BACKGROUND-POSITION: -125px -32px } </style> </head> <body> <div id="popimg"> <ul id="nav"> <li><a href="">menu1</a> <ul> <li><a href="/">Ajax/JavaScript</a></li><li><a href="/">ExtJS</a></li><li><a href="/">jQuery</a></li> </ul> </li> <li><a href="">menu2</a> <ul> <li><a href="/">test1</a></li><li><a href="/">test2</a></li><li><a href="/">test3</a></li> </ul> </li> <li><a href="">Ajax</a> <ul> <li><a href="/">CSS</a></li><li><a href="/">HTML</a></li><li><a href="/">editor</a></li> </ul> </li> <li><a href="">menu3</a> <ul> <li><a href="/">media</a></li><li><a href="/">object</a></li><li><a href="/">graphic</a></li> </ul> </li> <li><a href="">menu4</a> <ul> <li><a href="/">Ajax/JavaScript</a></li><li><a href="/">ExtJS</a></li><li><a href="/">jQuery</a></li> </ul> </li> <li><a href="">menu5</a> <ul> <li><a href="/">game</a></li><li><a href="/">programming</a></li><li><a href="/">sale</a></li> </ul> </li> <li><a href="">VC++</a> <ul><li><a href="/">database</a></li><li><a href="/">oracle</a></li><li><a href="/">sql</a></li> </ul> </li> </ul> </div> <div id="popimg2"> <div id="test"> <DIV class=menu0307 id=xuehua> <SPAN class=selectd id=Menuxuehua1 onmouseover="menu_my('xuehua',1)" ;>meeting</SPAN> <SPAN id=Menuxuehua2 onmouseover="menu_my('xuehua',2)" ;>note</SPAN> </DIV> <DIV id=Contxuehua1 style="POSITION: relative">test</DIV> <DIV id=Contxuehua2 style="DISPLAY: none">database</DIV> </div> </div> </body> </html> Hi I have a script that runs fine in FF, Chrome But in IE it does not work at all...(mouse over/mouseout) Would you please help me fix the problem... here is the code: Code: <script type="text/javascript"> var c=0; var t; var timer_is_on=0; function timedCount() { document.getElementById('txt').value=c; c=c+1; t=setTimeout("timedCount()",1000); } window.onmouseout=doTimer; function doTimer() { if (!timer_is_on) { timer_is_on=1; timedCount(); } } function stopCount() { clearTimeout(t); timer_is_on=0; } function descriptionKeyUp() { if (timer === null) { startTimer(); } else { clearTimeout(timestop); } timestop = setTimeout(stopTimer, 6000); } </script> ----------------------- <form> <textarea name="taskdesc" id="taskdesc" cols="45" rows="5"onmouseover="stopCount()" onkeyup="descriptionKeyUp()"></textarea> <p>Time Spent on Other tasks: <input type="text" name ="txt" id="txt" /> </p> <p>Time Spent on Documenting: <input type="input" name="seconds" id="timer" /> </form> basically what it does is when user takes the mouse away from the form it counts the time...when user put the cursor in side the form...it stops counting...... Heyho. Well I'm rather new to JavaScripting, so don't be harsh on me . Well I'm trying to make a 'onMouseOver & onMouseOut' event, where you hold the cursor over a image, it will change to another. So, here is my code: Code: <A HREF="Home.html" onmouseover="document.but.src='HOME_OVER.PNG'" onmouseout="document.but.src='HOME_BASE.PNG'"> <IMG SRC="Home_BASE.PNG" NAME="but" BORDER="0" ALT="..."> </A> <br> <A HREF="http://city-driving.co.uk" onmouseover="document.but.src='FORUM_OVER.PNG'" onmouseout="document.but.src='FORUM_BASE.PNG'"> <br> <IMG SRC="FORUM_BASE.PNG" NAME="but2" BORDER="0" ALT="..."> </A> It works fine when I use it for 1 picture, but it really mess up when I use it more then 1 time :/. I don't understand why. Probably obvious for you! Looking forward to (hopefully) see a solution . Marius. hi i have a problem coding a menu i have 4 links on menu and clicking on items should expand a DIV and change the menu item image. also rollover has to change the image too i mean 3 conditions for every menu item: normal, rollover, clicked. i have no problem with rollover but when item is been clicked and image changes, image has to change on mouse over again, but has not to change to original image on mouse out. also clicking on another menu item has to change the previous item image to original. i'm confused enough i tried by samples over and over. but the main problem is that i dont know js syntaxes and coding however, anybody could help??? this is my script Quote: <a href="javascript:void(0);" onmouseOver="hahaha()"> <img border="0" src="pink.gif" name="Mainpic" id="image"></a> and this is the function Quote: function hahaha() { document.getElementById('image').src="blue.gif"; } the problem is when i mouseover the image look like this why is that? help please! thanks http://www.primedesigning.com/ellis/ I'm working on a site for a friend and I can't figure out what's causing this blinking! Hover over one of the 3 pictures in the "Products" section to see what I'm talking about (the larger, expanded picture and its border blinks on and off). BTW, this site is still under construction. Any design ideas you guys may have would be appreciated too Thanks for any help! So I have this client who has a web form, the form was not made by me, I am debugging it as it has error's it seems. He has had 3 clients in the past two days complain they cannot finish the form, when they get to step 2 and click the button to go from step 2 to 3 they get this error: Quote: Type Error: Unable to get value of the property (error): Object is null and undefined. Now to me that looks to be JS, but there is no way at all to replicate it! I have tried this same procedure in IE6(XP), IE8(XP), Chrome, FF and it never happens to me ever. I am pretty sure it's JS related since the form is never reloaded for each page, it's a JS tab paging system for each step. Now he did finally get answer's from two of the 3 that had problems. They only said they were using IE on Windows Vista. And user's are not the most techie so I have been trying for two days to get info from them and nothing, info like IE version and what toolbar's and plugins they might have installed. Nothing. So I am left here at this point. Does anyone know of anything related in Vista? I don't have Vista so I cannot test this. I am testing right now on 7 with IE8 and then upgrading it to IE9 to test on 7 with IE9. The site is he https://optimalmedicalstaffing.com/register.php It's on step two, you get to step 2 by finishing step 1 and clicking on "Complete Application" to go to step 2. It's when clicking on the button to continue from step 2 to 3 that it happens. As I said I cannot seem to duplicate this in any way. I was hoping someone had Vista and IE to test for me, since your a coder you can screenshot for me the error and what happens, maybe that will help ha ha Or maybe this has happened to someone before, the form seems to be using Dojo as it's FW. Thanks. So I have been struggling with a Javascript issues for a couple of days now and can't find an answer anywhere online that has helped. I have a javascript loop that is looping through all of my <dfn> html tags. These tags are used to show a glossary term on my page. When the user mouses over the term it shows a popup with the term name and the definition. Here is my javascript function: Code: function definitionRollover(){ var j; var dfns = document.getElementsByTagName('dfn') for (j=0; j<dfns.length;j++){ var term = dfns[j].innerHTML.charAt(0).toUpperCase() + dfns[j].innerHTML.slice(1); var definitionArray = new Array(term, dfns[j].title); dfns[j].onmouseover = function(){stm(definitionArray,Style[0])} dfns[j].onmouseout = function(){htm();}; } } As you can see I am adding a onmouseover event to these <dfn> tags which calls another function (stm) with the definition and term being held in the definitionArray. This works great until I have multiple terms on a page. When I have multiple terms it only shows the last terms definition for all terms. My question is how I can get it to work for all terms. I know that throughout the loop the definitionArray is holding the correct info at the correct time but for some reason it only shows the last one. I hope that this makes sense and if anyone could give me any tips or leads it would be very much appreciated. So i've written abit of code myself in order to do this: I will have multiple video tags on my website, each of the video tag's will have to be able to play/pause seperatly, so technically speaking only 1 video should be playing at a time, when the user 'onmouseout' it should pause and when the user's gos to another video that other video should start playing. If he move's the cursor out of the video it should stop... The problem is now, i have video A & B. When i go 'onmouseover' video B, video A starts playing. This is how i started coding: 1 . 2 functions for playing/pausing a video tag 2 . Check how many <video> tags are on the page (after load) 3 . Add Event "mouseout" + function to each <video> tag And the actual code: Javascript: Code: /*** FUNCTIONS OM DE MOUSEOVER & OUT TE DOEN WERKEN ***/ function speelFilmpje(){ document.getElementById("filmpke").play(); } function stopFilmpje(){ document.getElementById("filmpke").pause(); } window.onload = function(){ /*** FUNCTION DIE ONMOUSEOVER & OUT FUNCTIE AAN 'VIDEO' TAGS TOEVOEGT ***/ var video = document.getElementsByTagName('video'); var videotags = video.length; //console.log(videotags); for(i=0; i<videotags;i++){ video[i].addEventListener("mouseover", speelFilmpje,false); video[i].addEventListener("mouseout", stopFilmpje,false); }//einde van de functie } HTML: Code: <div id="right_column"> <div id="preview1"> <video width="197" height="81" id="filmpke"> <source src="unknown.ogg" type="video/ogg"> <source src="unknown.mp4" type="video/mp4"> </video> <a href="#">Unknown (2010)</a> </div> <div id="preview1"> <video width="197" height="81" id="filmpke"> <source src="unknown.ogg" type="video/ogg"> <source src="unknown.mp4" type="video/mp4"> </video> <a href="#">Unknown (2010)</a> </div> </div> Any thoughts or information is welcome. I've stumbled upon my own wall of "Lack of knowledge" -_- Has anyone else come across this issue? Setting and using a session cookie works everywhere else - Mac, PC, IE, FF, etc. - everywhere except with MS Vista running on the machine. I'm not sure what the problem is and a Google search didn't reveal much. Thanks in advance. Here is a javascript/html code that changes a text phrase to something else on mouseover but it doesn't return to its original state before the event happened. The code is below. Thank you for your help. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script></script> <title>Javascript</title> <style type="text/css"> div { font-family: Georgia } </style> </head> <body> <script type="text/javascript"> function changetext() { var textchange2 = "~Home~" ; var id = document.getElementById("A"); id.innerHTML=textchange2; } </script> <div id="A" onmouseover="changetext();">Home</div> </body> </html> hi, please ignore this thread..it is a duplicate of one already active. MODS please delete. apologies for my mistake. Hi, Im a complete newbie to javascript and I've basically copied and pasted the javascript I found here to use on my site. Its an onMouseOver slideshow: http://www.javascriptkit.com/script/...ifferent.shtml to use on my site. Basically, my problem is how do I add a second, separate image in a different location on the web page, associated with this script? If I post <a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a> in two different locations, which is the script for the image, the script stops working, but having it once makes it work. So how do I add two different image locations? Can someone please help me here? I just want to add more images in a different location. ie have image location 1, and image location 2. Thanks in advance Script Below: Code: <script> function changeimage(towhat,url){ if (document.images){ document.images.targetimage.src=towhat.src gotolink=url } } function warp(){ window.location=gotolink1 } </script> <script language="JavaScript1.1"> var myimages=new Array() var gotolink="#" function preloadimages(){ for (i=0;i<preloadimages.arguments.length;i++){ myimages[i]=new Image() myimages[i].src=preloadimages.arguments[i] } } preloadimages(my images here) </script> For the Links: <a href="creativewriting.html" onMouseover="changeimage(myimages[1],this.href)">Creative Writing</a><br> For the Image: <a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a> I added this "show hint" script to my website. I submitted the URL in W3C's HTML validator. It says that XHTML doesn't support onMouseover, so I changed it to all lowercase: onmouseover. When I refreshed the page, the little error warning showed up in my lower left corner. The JavaScript seemed to not be working because I changed it from onMouseover to onmouseover. Help? Code: <script type="text/javascript"> var horizontal_offset="9px" //horizontal offset of hint box from anchor link /////No further editting needed var vertical_offset="0" //horizontal offset of hint box from anchor link. No need to change. var ie=document.all var ns6=document.getElementById&&!document.all function getposOffset(what, offsettype){ var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop; var parentEl=what.offsetParent; while (parentEl!=null){ totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop; parentEl=parentEl.offsetParent; } return totaloffset; } function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function clearbrowseredge(obj, whichedge){ var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1 if (whichedge=="rightedge"){ var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40 dropmenuobj.contentmeasure=dropmenuobj.offsetWidth if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure) edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset) } else{ var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18 dropmenuobj.contentmeasure=dropmenuobj.offsetHeight if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure) edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight } return edgeoffset } function showhint(menucontents, obj, e, tipwidth){ if ((ie||ns6) && document.getElementById("hintbox")){ dropmenuobj=document.getElementById("hintbox") dropmenuobj.innerHTML=menucontents dropmenuobj.style.left=dropmenuobj.style.top=-500 if (tipwidth!=""){ dropmenuobj.widthobj=dropmenuobj.style dropmenuobj.widthobj.width=tipwidth } dropmenuobj.x=getposOffset(obj, "left") dropmenuobj.y=getposOffset(obj, "top") dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px" dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px" dropmenuobj.style.visibility="visible" obj.onmouseout=hidetip } } function hidetip(e){ dropmenuobj.style.visibility="hidden" dropmenuobj.style.left="-500px" } function createhintbox(){ var divblock=document.createElement("div") divblock.setAttribute("id", "hintbox") document.body.appendChild(divblock) } if (window.addEventListener) window.addEventListener("load", createhintbox, false) else if (window.attachEvent) window.attachEvent("onload", createhintbox) else if (document.getElementById) window.onload=createhintbox </script> Code: <a href="#" class="hintanchor" onmouseover="showhint('Display hint here.', this, event, '150px')"><img src="/images/help.gif" alt=""/></a> Hi Guys im new to javascript but i have got this code so far to work Code: <script type="text/javascript"> function do_something(e) { document.getElementById('imgholder') .style.background="transparent url('images/img2.jpg') no-repeat"; } </script> and it works with this Code: <div id="flash"> <div id="imgholder"> </div> <div id="myController2"> <span class="jFlowControl2">No 1 </span> <span class="jFlowControl2">No 2 </span> </div> <div id="mySlides2"> <div> <a onmouseover="do_something(this)" class="vm" href="#" title="Vulnerability Management"></a> <a class="grc" href="#" title="grc"></a> <a class="pci" href="#" title="pci"></a> <a class="gcs" href="#" title="gcs"></a> <a class="pt" href="#" title="Penetration Testing"> </a> <span class="jFlowNext2 NextFlash"> </span> </div> <div> <span class="jFlowPrev2 BackFlash"> </span> </div> </div> </div> Currently the background changes on the 1st link hover. is it possible to have different images load on the hover of different a's? any help would be appricated I have been googling this for two days and am coming to the conclusion that the answer is no. Am I correct?
Alright I know about the problems IE has, but I'm testing out an id that is titled "slideRecord1" and trying to move it. The functions work with Firefox for the onmouseover and onmouseout attributes. But IE doesn't support that. So I'm trying to do it manually in the Javascript, but it's still not reading it. Any help? Code: /* <![CDATA[ */ document.getElementById('slideRecord1').onmouseover = function(){slideRecord(1);} function slideRecord(disc) { var record = "disc"+disc; var y = 20; document.getElementById(record).style.top = y + 'px'; } function unSlideRecord(disc) { record = "disc"+disc; var y = 0; document.getElementById(record).style.top = y + 'px'; } /* ]]> */ confused:hope its the right place to post a newbie here . but i have a problem with a firefox accepting a script that i wrote it works on exploer but not on firefox onclick="javascript:if (this.parentNode.parentNode.nextSibling.style.display !='block') this.parentNode.parentNode.nextSibling.style.display ='block'; else this.parentNode.parentNode.nextSibling.style.display ='none';" hope u can help me thx I finished this code, the full code is not here, but when I ran it as a diagnostic the action did not occur when i clicked on the "process item" button. I believe it may have something to do with the script, but i am new to javascript and cannot seem to figure it out, it is supposed to multiply the price by the number to give the value of sale (sale). Any help would be much appreciated!!! Code: <html> <script language="javascript"> function test() { var Items,Price,Number,sale; Items = parselfloat(document.victoria.secondnumber.value); Price = parselfloat(document.victoria.price.value); Number = parselfloat(document.victoria.num.value); sale = Price*Number; document.victoria.val.value=sale; } </script> <body><form name ="victoria"> <center> <table border=40 bordercolor="yellow"> <tr><td>Customer Number <input name ="firstnumber" type="text" size="6" value="1" ></td> <td>Home Delivery <input name="customer_name" type="checkbox"Checked></td><tr> <tr><td>Items Purchased</td><td><center><input name="secondnumber" type="text" size="12"></center></td></tr> <tr><td>Item Number</td><td><center><input name="itemnum" type="text" size="12" value="1"></center></td></tr> <tr><td>Price</td><td><center><input name="price" type="text" size="12"></center></td></tr> <tr><td>Number Purchased</td><td><center><input name="num" type="text" size="12"></center></td></tr> <tr><td>Value of Sale</td><td><center><input name="val" type="text" size="12" value="0"></center></td></tr> <tr><td>Customer Total</td><td><center><input name="total" type="text" size="12" value="0"></center></td></tr> <tr><td></td><td><input type="button" value="Process Item" onclick="test()"></td></tr> </table> </center></form> </body></html> |