JavaScript - Unobtrusive Problem - Onmouseover Onmouseout
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" -_- Similar TutorialsHeyho. 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. 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> Ok, I'm new to these form and I need help with an assignment. Hopefully I'm within the rules here as I most certainly don't want to get stung for plagiarism or cheating. But, here is my issue. I'm struggling with javascript and I can't manage to get this rollover effect working. The HTML side of things should be ok and it's probably a missing semicolon. Code: /* write functions that define the action for each event */ function showTip () { var sidTip; /* obtain access to the HTML tool tip element using id "sidTip" and link it a varialbe named sidTip */ sidTip = document.getElementById("sidTip"); /* display the HTML tool tip element sidTip bying change the value of its CSS property "display" to "inline" */ sidTip.style.display("inline"); } function hideTip () { /* this function hides the tool tip */ var = sidTip; /*first, get access to the tool tip HTML element */ sidTip = document.getElementById("sidTip") /* then, hide the tool tip HTML element by changing its CSS property "display" to "none" */ sidTip.style.display("none"); } function init () { alert("javascript working"); /* the init function links functions to appropriate events of corresponding HTML elements */ /* create a variable named sid */ var = sid; /* get access to the HTML element by its id "sid" and link it to sid */ sid = document.getElementById("sid"); /* link function showTip to the onmouseover event of sid */ onMouseOver = showTip; /* link function hideTip to the onmouseout event of sid */ onMouseOut = hideTip; } /* link function init to the onload event of the window so that function init will be called when the page is loaded */ window.onload = init; /* another random comment belonging to hebdomad */ I am trying to get my code to work without using <a> tags and inline html event handlers. I got most of my code laid out so far. But there is a problem I'm having. The way I have it right now for some reason it selects both of my images when I hover over them. I'm trying to get it to only select the one that is currently moused over and change the border and also display a tooltip of the image name that is moused over. When mouse is off image it goes back to normal. When that image is moused over it should display the same image but bigger in my blank image area with the name of the image above it. This image stays until you mouseover another image. Please help I'm stuck. HTML CODE: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Image Viewer</title> <meta http-equiv= "content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="icecream.js"></script> </head> <body> <h1>Products</h1> <table name="showProduct"> <tr> <td> <img src="images/blank.jpg" name="show" /> </td> </tr> </table> <table name="productList"> <tr> <td name="products" id="applePie"> <img src="images/Apple_Pie.gif" name="thumb" /> </td> <td name="products" id="banana"> <img src="images/Banana.gif" name="thumb"/> </td> <td name="products"> <img src="images/ButterscotchChips.jpg" name="thumb"/> </td > <td name="products"> <img src="images/Candy.jpg" name="thumb"/> </td> <td name="products"> <img src="images/CandyHearts.jpg" name="thumb"/> </td> <td name="products"> <img src="images/CandyHeartsHard.jpg" name="thumb"/> </td> <td name="products"> <img src="images/Carmel.gif" name="thumb"/> </td> <td name="products"> <img src="images/Carmel_Heath.gif" name="thumb"/> </td> <td name="products"> <img src="images/ChocChips.jpg" name="thumb"/> </td> <td name="products"> <img src="images/Chocolate_Marshmellow.gif" name="thumb"/> </td> </tr> <tr> <td name="products"> <img src="images/Chocolate_AlmondBar.gif" name="thumb"/> </td> <td name="products"> <img src="images/ChocPeanuts.jpg" name="thumb"/> </td> <td name="products"> <img src="images/ChocSprinkles.jpg" name="thumb"/> </td> <td name="products"> <img src="images/CoconutFlakes.jpg" name="thumb"/> </td> <td name="products"> <img src="images/Fudge_Almonds.gif" name="thumb"/> </td> <td name="products"> <img src="images/full_White_Mint.gif" name="thumb"/> </td> <td name="products"> <img src="images/GumDrops.jpg" name="thumb"/> </td> <td name="products"> <img src="images/GummyBears.jpg" name="thumb"/> </td> <td name="products"> <img src="images/GummySharks.jpg" name="thumb"/> </td> <td name="products"> <img src="images/HeartChews.jpg" name="thumb"/> </td> </tr> <tr> <td name="products"> <img src="images/JellyBeans.jpg" name="thumb"/> </td> <td name="products"> <img src="images/MMBits.jpg" name="thumb"/> </td> <td name="products"> <img src="images/Peanut_Butter_Chocolate.gif" name="thumb"/> </td> <td name="products"> <img src="images/PeanutButterChips.jpg" name="thumb"/> </td> <td name="products"> <img src="images/Peanuts.jpg" name="thumb"/> </td> <td name="products"> <img src="images/RainbowDrops.jpg" name="thumb"/> </td> <td name="products"> <img src="images/RainbowSprinkles.jpg" name="thumb"/> </td> <td name="products"> <img src="images/Raspberry_Brownie.gif" name="thumb"/> </td> <td name="products"> <img src="images/RedLicoriceTaffy.jpg" name="thumb"/> </td> <td name="products"> <img src="images/Rich_Chocolate.gif" name="thumb"/> </td> </tr> <tr> <td name="products"> <img src="images/Strawberry.gif" name="thumb"/> </td> <td name="products"> <img src="images/Strawberry_Cheesecake.gif" name="thumb"/> </td> <td name="products"> <img src="images/TaffyChocRasp.jpg" name="thumb"/> </td> <td name="products"> <img src="images/Tiramisu.gif" name="thumb"/> </td> <td name="products"> <img src="images/Vanilla.gif" name="thumb"/> </td> <td name="products"> <img src="images/Vanilla_Cashews.gif" name="thumb"/> </td> <td name="products"> <img src="images/Vanilla_ChocolateChip_PeanutButter_CookieDough.gif" name="thumb"/> </td> <td name="products"> <img src="images/Vanilla_Peaches.gif" name="thumb"/> </td> <td name="products"> <img src="images/Vanilla_Raspberry.gif" name="thumb"/> </td> <td name="products"> <img src="images/WaffleCone_Vanilla.gif" name="thumb"/> </td> </tr> <tr> <td name="products"> <img src="images/WatermellonSlices.jpg" name="thumb"/> </td> <td name="products"> <img src="images/White_Mint.gif" name="thumb"/> </td> <td name="products"> <img src="images/White_Pretzels_almonds_Fudge.gif" name="thumb"/> </td> <td name="products"> <img src="images/WhiteChocChips.jpg" name="thumb"/> </td> <td name="products"> <img src="images/YogurtPeanuts.jpg" name="thumb"/> </td> <td name="products"> <img src="images/YogurtRasins.jpg" name="thumb"/> </td> </tr> </table> </body> </html> JS CODE: Code: window.onload = function() { runInit(); } function runInit() { var thumbnails = document.getElementsByName('thumb'); for (var i=0; i<thumbnails.length; i++) { thumbnails[i].style.width = "75px"; thumbnails[i].style.height = "80px"; } var cells = document.getElementsByName('products'); for (var i=0; i<cells.length; i++) { cells[i].style.borderStyle = "outset"; } var products = document.getElementsByTagName('td'); for (var i=0; i<products.length; i++) { products[i].onmouseover = preloader; products[i].onmouseout = unHighlight; } } function unHighlight() { if (document.getElementById('applePie').onmouseout) { document.getElementById('applePie').style.borderStyle="outset"; } if (document.getElementById('banana').onmouseout) { document.getElementById('banana').style.borderStyle="outset"; } } function preloader() { if (document.images) { var applePie= new Image(75,80); applePie.src="images/Apple_Pie.gif"; if (document.getElementById('applePie').onmouseover) { document.getElementById('applePie').style.borderStyle="inset"; } var banana= new Image(75,80); banana.src="images/Banana.gif"; if (document.getElementById('banana').onmouseover) { document.getElementById('banana').style.borderStyle="inset"; } var blank= new Image(75,80); blank.src="images/blank.jpg"; var butterscotchChips= new Image(75,80); butterscotchChips.src="images/ButterscotchChips.jpg"; var candy= new Image(75,80); candy.src="images/Candy.jpg"; var candyHearts= new Image(75,80); candyHearts.src="images/CandyHearts.jpg"; var candyHeartsHard= new Image(75,80); candyHeartsHard.src="images/CandyHeartsHard.jpg"; var carmel= new Image(75,80); carmel.src="images/Carmel.gif"; var carmelHeath= new Image(75,80); carmelHeath.src="images/Carmel_Heath.gif"; var chocChips= new Image(75,80); chocChips.src="images/ChocChips.jpg"; var chocMarshmellow= new Image(75,80); chocMarshmellow.src="images/Chocolate_Marshmellow.gif"; var chocAlmondBar= new Image(75,80); chocAlmondBar.src="images/Chocolate_AlmondBar.gif"; var chocPeanuts= new Image(75,80); chocPeanuts.src="images/ChocPeanuts.jpg"; var chocSprinkles= new Image(75,80); chocSprinkles.src="images/ChocSprinkles.jpg"; var coconutFlakes= new Image(75,80); coconutFlakes.src="images/CoconutFlakes.jpg"; var fudgeAlmonds= new Image(75,80); fudgeAlmonds.src="images/Fudge_Almonds.gif"; var fullWhiteMint= new Image(75,80); fullWhiteMint.src="images/full_White_Mint.gif"; var gumDrops= new Image(75,80); gumDrops.src="images/GumDrops.jpg"; var gummyBears= new Image(75,80); gummyBears.src="images/GummyBears.jpg"; var gummySharks= new Image(75,80); gummySharks.src="images/GummySharks.jpg"; var heartChews= new Image(75,80); heartChews.src="images/HeartChews.jpg"; var jellyBeans= new Image(75,80); jellyBeans.src="images/JellyBeans.jpg"; var mmBits= new Image(75,80); mmBits.src="images/MMBits.jpg"; var pbChoc= new Image(75,80); pbChoc.src="images/Peanut_Butter_Chocolate.gif"; var pbChips= new Image(75,80); pbChips.src="images/PeanutButterChips.jpg"; var peanuts= new Image(75,80); peanuts.src="images/Peanuts.jpg"; var rbDrops= new Image(75,80); rbDrops.src="images/RainbowDrops.jpg"; var rbSprinkles= new Image(75,80); rbSprinkles.src="images/RainbowSprinkles.jpg"; var raspberryBrownie= new Image(75,80); raspberryBrownie.src="images/Raspberry_Brownie.gif"; var redLicTaffy= new Image(75,80); redLicTaffy.src="images/RedLicoriceTaffy.jpg"; var richChoc= new Image(75,80); richChoc.src="images/Rich_Chocolate.gif"; var strawberry= new Image(75,80); strawberry.src="images/Strawberry.gif"; var sbCheeseCake= new Image(75,80); sbCheeseCake.src="images/Strawberry_Cheesecake.gif"; var taffyChocRasp= new Image(75,80); taffyChocRasp.src="images/TaffyChocRasp.jpg"; var tiramisu= new Image(75,80); tiramisu.src="images/Tiramisu.gif"; var vanilla= new Image(75,80); vanilla.src="images/Vanilla.gif"; var vanCashews= new Image(75,80); vanCashews.src="images/Vanilla_Cashews.gif"; var vanChocChipPBCD= new Image(75,80); vanChocChipPBCD.src="images/Vanilla_ChocolateChip_PeanutButter_CookieDough.gif"; var vanPeaches= new Image(75,80); vanPeaches.src="images/Vanilla_Peaches.gif"; var vanRaspberry= new Image(75,80); vanRaspberry.src="images/Vanilla_Raspberry.gif"; var waffleCone= new Image(75,80); waffleCone.src="images/WaffleCone_Vanilla.gif"; var wmSlices= new Image(75,80); wmSlices.src="images/WatermellonSlices.jpg"; var whiteMint= new Image(75,80); whiteMint.src="images/White_Mint.gif"; var whitePretzels= new Image(75,80); whitePretzels.src="images/White_Pretzels_almonds_Fudge.gif"; var whiteChocChips= new Image(75,80); whiteChocChips.src="images/WhiteChocChips.jpg"; var yogurtPeanuts= new Image(75,80); yogurtPeanuts.src="images/YogurtPeanuts.jpg"; var yogurtRasins= new Image(75,80); yogurtRasins.src="images/YogurtRasins.jpg"; } } Hello! I have created a mouseover/mouseout event using 2 images. I am not sure how to add a third image so the mouseover/mouseout event changes images in sequence each time the mouse is passed over the image and keeps cylcing in order. Would you use an array with a for loop counter for this process? Also, how would you call the function? I guess you would place the call in the mouseover where you would normally put the image to be called? Thanks! I need help with making an Image onMouseOver event and onMouseOut event without using <a> tags and inline code in the HTML. I know how to do it with <a> tags and inline already. Not sure how to go about doing this without <a> tags and inline. If someone could give me an example of how to do this using strictly Javascript only, I would greatly appreciate the help. I am also planning on having the Images within a table and assigning functions that execute when the mouse is over the image within the cell and when the mouse is off the image in the cell. Aloha, I'm trying to make a page that changes a pic to match the paragraph the user's mouse is over. Page is here, http://rentalocal.thad.com/sample1 The problem I have is that the page reloads the initial image (the map) every time I move my mouse from one list item to the next, before it loads the next pic. It only does this the first time, but it's annoying, slow, and makes my page look bad. I tested it using both Safari and Firefox and got the same results. Does anyone know how I should correct it? TIA, Thad Code: <ul class="borderit" onmouseout="document.getElementById('picture').src='/pic0.jpg'"> <li onmouseover="document.getElementById('picture').src='/pic1.jpg'"> We are picked up at our hotel in Waikiki. We are greeted with aloha, and fresh leis too. Our destinations are numerous, so let's get started! </li> <li onmouseover="document.getElementById('picture').src='/pic2.jpg'"> We drive away from Waikiki toward the Windward side of O'ahu. Along the way, we see Diamond Head. We stop at a scenic lookout for our first pictures of the day. </li> <li onmouseover="document.getElementById('picture').src='/pic3.jpg'"> From there we view at Koko Crater and Hanauma Bay. Next we stop at the Halona Blowhole, where the waves force water through a lava tube and into the sky as high as 30 feet! </li> <li onmouseover="document.getElementById('picture').src='/pic4.jpg'"> We continue along past the amazingly beautiful blue costal waters. Have you ever seen waters so blue? </li> <li onmouseover="document.getElementById('picture').src='/pic5.jpg'"> We are now far from the hustle and bustle of Honolulu and Waikiki. We stop for a visit to one of the many fantastic local beaches, but not for long, we have much more to see! </li> <li onmouseover="document.getElementById('picture').src='/pic6.jpg'"> As we continue we reach a local macadamia nut farm where we stop to buy some flavorful gifts for friends back home. We make more visits to an art gallery, a ranch, a local restaurant for some ono (Hawaiian word for yummy) food. </li> <li onmouseover="document.getElementById('picture').src='/pic7.jpg'"> We make a stop at Laie Point, and learn about its Hawaiian legend. </li> <li onmouseover="document.getElementById('picture').src='/pic8.jpg'"> From there we continue on to the North Shore. We stop at a few of the world-famous beaches and observe some of the day's surfers. We even get a chance to swim with a honu (turtle). </li> <li onmouseover="document.getElementById('picture').src='/pic9.jpg'"> After a stop at a shrimp truck, we get to Hale'iwa Town for some shopping and dining. We get some yummy Matsumoto Shave Ice. </li> <li onmouseover="document.getElementById('picture').src='/pic10.jpg'"> After leaving the North Shore we begin our return the Waikiki. We travel through wonderfully fragrant pineapple fields. We stop at the Dole Plantation and try not to get lost in the world's largest maze. </li> <li onmouseover="document.getElementById('picture').src='/pic11.jpg'"> On our way back to town we visit the National Cemetery at Punchbowl and the State Capitol. </li> <li onmouseover="document.getElementById('picture').src='/pic12.jpg'"> Our final stop is another scenic point for one last view of the day. </li> <li style="margin-bottom:.5em" onmouseover="document.getElementById('picture').src='/pic13.jpg'"> We return to our hotel. Today we saw so many wondrous sights, took countless pictures, heard about Hawaiian history and legend, sampled some local food, discovered some Hawaiian treasures, and learned some Hawaiian language. This will be a memory that we will recall for the rest of our lives. </li> </ul> Hi all, I have this code: Code: <input type="hidden" value="update_cart" name="ca"> <input type="hidden" value="2" name="numcart"> <input type="submit" name="submit" value="Update Cart" class="inpSubmit"> I'd like to replace this: Code: <input type="submit" name="submit" value="Update Cart" class="inpSubmit"> with this: Code: <button>blabla<button> How can I do? I know something about unobtrusive javascript but I don't know how to do it. Thank you very much Hi, Does anyone know how to make the cycle function in jquery unobtrusive? I've got the following code and when I disable javascript, I get a nasty long list of images Jquery code: $(document).ready(function() { $('.homepage-slideshow').cycle({ fx: 'fade', befo onAfter, pause: 1, timeout: 0, pager: '#nav' }); }); function onAfter() { var cycle_href = this.href; var brokenstring = this.title.split(" :: "); var cycle_title = brokenstring[0]; var cycle_descr = brokenstring[1]; $('#output').html('<a href="'+cycle_href+'">'+cycle_title+'</a>'); $('#output-descr').html(cycle_descr); } Html code: <div class="homepage-slideshow"> <a href="http://url.com/" title="Info goes here."><img src="<?=SITE_URL?>/images/image1.jpg" alt="Click here for more on ..." ></a> <a href="http://url2.com/" title="Info goes here."><img src="<?=SITE_URL?>/images/image2.jpg" alt="Click here for more on ..." ></a> </div> <div class="homepage-pagination" id="nav" >Click the links to start the Google Tour: </div> <div class="homepage-metadata"> <p id="output-descr"></p> <h3 id="output"></h3> </div> First off by let me stating that I am not a great web devloper nor am I a good with css / javascript. I am creating this website for a friend of mines company and I have one problem. The problem is that the navigation menu on the right side will not remain fixed how i want it to be. I spoke with many people and they all said that this cannot be done with css considering your layout and because it needs to dodge the headers and the footer. I basically want this div (sidenav on the right) to scroll along the page as users scroll up or down but it can not interfere with the header or footer. Could someone please post an example or if anyone has the time please tell me exactly what code I need to add to get this to work? keep in mind that i do not want the right side navigation to go over the content or out of the wrapper. I want it to stay in the same position in all aspects - left / right / top / bottom. Here is a link to the site http://www.collisionbodyworks.com/Pl...tic/index.html Any help would be greatly appreciated. Thank you in advance I am trying to remove all Javascript code from my HTML doc and put into external .js file(s). I have event triggers that I would like to move to an external file, but I am not sure how. Below is an example. [CODE] <a href="residential.html" class="textdeco" > <img class="img-menu" id="res" src="images/buttons/btn_res_mouse_out.jpg" alt="Residential" onmouseover="FP_swapImg(1,0,/*id*/'res',/*url*/'images/buttons/btn_res_mouse_over.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'res',/*url*/'images/buttons/btn_res_mouse_out.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'res',/*url*/'images/buttons/btn_res_mouse_down.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'res',/*url*/'images/buttons/btn_res_mouse_up.jpg')" /> [CODE] The reason I want to do this is that this code is repeated in all pages and I want to reduce potential maintenance issues. Any help will be appreciated. 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...... 2 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> without outside extensions, how does one debug javascript events on a webpage that primarily relies on unobtrusive JS events? for instance, i have a website i log into that has a "submit" button. the button itself only has this code: Code: <input type="image" class="png" tabindex="5" value="Go" src="login.png"> obviously, the only way that it can submit the form is to use javascript. and it's obviously unobtrusive in this case. consider the fact that it isn't my webpage, and i don't want to try to put random breakpoints everywhere blindly. any help!? 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! 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 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??? 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! 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. 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> |