|
HTML - Multiple Onmouseover And Onclick Sounds
Hi,
After messing around with my script so many time i cant get it to work and i am not sure if i messed up something along the way. Basically what i want to do is have a table that highlights to one color when mouse is on the table and changes back to the original color onmouseout. In addition, having the table produce a sound when i put my mouse on it. So when i put the mouse on the table it should change color and play sound. Then when i click on the link on the table it should make a different sound and take me to the page. I am lost now and i am having a hard time figuring out or finding a simple code that could work. Here is my code. Changing colors on the table works but the sound effects within the same code is giving me trouble. So i just deleted any code i put and left it the way i had it before i started messing with it. sound files are in the my root folder. <Html> <Head> <script LANGUAGE="JavaScript"><!-- // Preload and play audio files with event handler (MouseOver sound) // designed by JavaScript Archive, (c)1999 // Get more free javascripts at http://jsarchive.8m.com var aySound = new Array(); // Below: source for sound files to be preloaded aySound[0] = "Mouse Click 1.wav"; aySound[1] = "wood-cracking-1.mp3"; // DO NOT edit below this line document.write('<BGSOUND ID="auIEContainer">') IE = (navigator.appVersion.indexOf("MSIE")!=-1 && document.all)? 1:0; NS = (navigator.appName=="Netscape" && navigator.plugins["LiveAudio"])? 1:0; ver4 = IE||NS? 1:0; onload=auPreload; function auPreload() { if (!ver4) return; if (NS) auEmb = new Layer(0,window); else { Str = "<DIV ID='auEmb' STYLE='position:absolute;'></DIV>"; document.body.insertAdjacentHTML("BeforeEnd",Str); } var Str = ''; for (i=0;i<aySound.length;i++) Str += "<EMBED SRC='"+aySound[i]+"' AUTOSTART='FALSE' HIDDEN='TRUE'>" if (IE) auEmb.innerHTML = Str; else { auEmb.document.open(); auEmb.document.write(Str); auEmb.document.close(); } auCon = IE? document.all.auIEContainer:auEmb; auCon.control = auCtrl; } function auCtrl(whSound,play) { if (IE) this.src = play? aySound[whSound]:''; else eval("this.document.embeds[whSound]." + (play? "play()":"stop()")) } function playSound(whSound) { if (window.auCon) auCon.control(whSound,true); } function stopSound(whSound) { if (window.auCon) auCon.control(whSound,false); } //--> </script> </head> <body> <td width="131" id="side1" onclick="playSound(0)" onmouseover="this.style.background='#9CF';this.sty le.cursor='pointer'" onmouseout="this.style.background='white';">{In this part was were i had the other mouse over affect to play sound (1) but didnt work} <a href="www.mypage.html">Cats</a></td> </body> </html> Thanks in advance Similar TutorialsHeys guys, I'm trying to build a website and I'm trying to embed multiple sound files into one page. I think there will probably be about 5 files. I've actually tried this but when the page loads only 2 or 3 of the 5 files load. I've tried putting them on one or two at a time and it works that way, but not all at the same time. Also, when the page loads I get 5 popup ActiveX boxes to click on...is there anyway to maybe only get 1? Would really appreciate any help!!! Jeff Terrell Good day everyone. For my job, I've been tasked to create a page with some images on it. When you put your mouse over one images, it is suppose to open a web page, an other document or an other images in a popup window, and the popup should close itself when you remove your cursor from over the image. Also, if you click on the image, the popup should stay open, so you can get more information and browse the page if you want... I have some basic knowledge of HTML but I consider myself a beginner, and I can't see how to solve this problem. I'm using dreamweaver 8 to do my pages. I also have access to firework if more fancy images techniques are required.. I tried the following basic code: <body> <a target="_blank" href="http://www.google.com/" onmouseover="window.open(this.href, 'popupwindow', 'width=400, height=300, scrollbar, resizable'); return false;">Example</a> </body> But the problem is that the popup pages open corretly but I don't know how to make it close. Also, I'm like it to be a hotspot on an image, and not just a word... If I can please have some advice on how to do this, it would be very appreciated! I'm using mozilla and seamonkey and for some reason sounds need a apple quicktime plugin and I was wondering if there is any way to add a sound to an html file that seamonkey and mozilla could play without any plugins? Hi, im making a website for my tafe project. And so far i have made a home page with a table that has links to other sections of the site. Now, i have music that plays when you open the site, however when you click on the links to go to the other parts of the website the music starts again for each page and it then becomes very irritating. What I want to try and do, is get the music to continously play while you click on the other parts of the site so it doesnt stop from the first time you enter. Plus does anyone know how to make a mute icon, so for example at the top right hand of the page you can click the little icon to mute the background music throughout the site. Thanks for you help This might sound pretty lame and stupid for you guys, but I'm a total beginner here and have a deadline that's coming in fast. There's no time for tutorials and so on so here goes: I've implemented a simple search field in my companies website with this: Code: <form name="form" action="http://www.idlena.lt/?section=naujienos&sub=naujienos4&lang=lt" method="get"> <input type="text" name="section=naujienos&sub=naujienos4&lang=lt&q" </> <input type="submit" name="Submit" value="Rasti" /> </form> Quite short and simple. Right? Wrong... the second link in the code should redirect the inputted text (in the search field) to the actual php script that handles the search with my database. The problem is - that link should redirect to Code: http://www.idlena.lt/?section=naujienos&sub=naujienos4&lang=lt&q=&Submit=Rasti Instead it redirects me in browser to Code: http://www.idlena.lt/?section%3Dnaujienos%26sub%3Dnaujienos4%26lang%3Dlt%26q=&Submit=Rasti and it breakes the url this way. I've read that sometimes ampersand has to be written with & in the code, I've done that. Doesn't make a difference. And what is even more strange - why doesn't the equal (=) sign show up as it should? This is just too frustrating. As a total beginner I understand that the explanation or the fix could be very simple but I just can't figure this out. Maybe there's an error in my code? Maybe I'm typing the url wrong? The main question remains - why don't ampersands and "=" signs show up as they should? Tried using the & , &amp; , %26 in the code but nothing helped. Firefox 3.0.5 and IE 8 show up a broken link with "&" shown as "%26" and "=" with "%3D". It won't work.... HTML Code: <a href="index.html"
onmouseover="window.status='home'; changeImages('home', 'images/home-over.jpg'); return true;"
onmouseout="window.status=''; changeImages('home', 'images/home.jpg'); return true;"
onmousedown="changeImages('home', 'images/home-over.jpg'); return true;"
onmouseup="changeImages('home', 'images/home-over.jpg'); return true;">
<img name="home" src="images/home.jpg" width="109" height="100" border="0" alt="home"></a>
any help? Hi All, I would like to create a little message box when the user puts the mouse cursor on a text entry in a table. The message box would contain text only. Can someone point me in the right direction for the code to do this? What I have found so far calls another webpage. Is that the only way to do it? Thanks!!! Any good onmouseover tutorials? Thanks. I have created an image map using a map of the USA. In this map it displays our home office and branch locations. I would like for a small box to appear (and stick) that displays the office address when/if the star or other icons are passed over. I have not done this since college and have no clue what to script. LOL, can anyone help an old fart? Hi! I've something like that:: <body> <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1"> <tr> <td width="36%">Contact</td> <td width="26%"> <p align="center"> <img border="0" src="IMAGE URL ..."></td> <td width="38%"> </td> </tr> </table> </body> How can i make to when i pass mouse in Contact display another image in middle colunm? Can you help me? I have a table on my page in which I have overridden the onmouseover and onmouseout event handlers. Those event handlers get called just fine when the mouse enters or leaves any of the objects contained within the table, but they do not get called when entering or leaving the table itself. Is that the expected behavior? I would have thought that those handlers would also get called for the table itself. Do I need to attach those event handlers to a higher level object (containing the table) in order for them to get called upon entry and exit of the table? Interestingly, the event handlers get called when entering or leaving a cell (a td item) of the table, but they do not get called when entering or leaving a row (a tr item) of the table. I would be happy if I could make it call the event handlers for the row as well, but so far have had no luck doing that. On my employer's site, I am trying to create certain mouseover events for the navigation bar. My goal to to either create alternate colored text on mouseover (which it currently does) and return to normal text (either link color or vlink color, which it doesn't), or change the text background color on mouseover, and back on mouseout (with appropriate colors, link/vlink). The code is as follows: <table width="740" border="1" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr> <td width="100%" height="7" align="center" valign="top" colspan="1"> <font color="#707BA8" face="Trebuchet MS" size="5"> <a href="index.htm" style="text-decoration: none"><font onmouseover="color='#4682B4'" onmouseout="color='normal'">Home</font></a> <a href="about.htm" style="text-decoration: none"><font onmouseover="color='#4682B4'" onmouseout="color='normal'">About Us</font></a> <a href="contact.htm" style="text-decoration: none"><font onmouseover="color='#4682B4'" onmouseout="color='normal'">Contact Us</font></a> <a href="links.htm" style="text-decoration: none"><font onmouseover="color='#4682B4'" onmouseout="color='normal'">Links</font></a> <a href="questions1.htm" style="text-decoration: none"><font onmouseover="color='#4682B4'" onmouseout="color='normal'">Q&A</font></a> </td> </tr> </table> With the body defined as follows: <body bgcolor=#FFFFFF background="images/bg1.jpg" link="0000FF" vlink="#4B0082" alink="#57E964"> Any assistance is appreciated, thanks. Hi Colls, I have a task such this: At onmouseover, i need to swap the jpg with marquee text. I have tried a lot of things but probably i think in wrong direction. Coudl you help about it? Thank you in advance. I've got a problem...I make a page...only for training.....but i've got some problem with the HOVER...i have to wait a long time and after,the HOVER is work.Can help me someone to make it faster?pls..here is the page http://piticu.byethost14.com/site2/index1.php and the code for the submenu Code: <td valign="top" id="left_menu"> <table border="0"> <br /> <tr> <td style="border:0" align="center"> <b><i><h2 style="color:#FFDEAD;text-decoration:underline overline">CATEGORIES:</h2></b></i> <a href="" onmouseover='animal.src="submenu/animal2.png"' onmouseout='animal.src="submenu/animal.png"'><img src="submenu/animal.png" name="animal" border="0"></a><br /> <a href="" onmouseover='car.src="submenu/car2.png"' onmouseout='car.src="submenu/car.png"'><img src="submenu/car.png" name="car" border="0"></a><br /> <a href="" onmouseover='cartoon.src="submenu/cartoon2.png"' onmouseout='cartoon.src="submenu/cartoon.png"'><img src="submenu/cartoon.png" name="cartoon" border="0"></a><br /> <a href="" onmouseover='celebrity.src="submenu/celebrity2.png"' onmouseout='celebrity.src="submenu/celebrity.png"'><img src="submenu/celebrity.png" name="celebrity" border="0"></a><br /> <a href="" onmouseover='digital.src="submenu/digital2.png"' onmouseout='digital.src="submenu/digital.png"'><img src="submenu/digital.png" name="digital"border="0"></a><br /> <a href="" onmouseover='fantasy.src="submenu/fantasy2.png"' onmouseout='fantasy.src="submenu/fantasy.png"'><img src="submenu/fantasy.png" name="fantasy"border="0"></a><br /> <a href="" onmouseover='fine.src="submenu/fine2.png"' onmouseout='fine.src="submenu/fine.png"'><img src="submenu/fine.png" name="fine"border="0"></a><br /> <a href="" onmouseover='holiday.src="submenu/holiday2.png"' onmouseout='holiday.src="submenu/holiday.png"'><img src="submenu/holiday.png" name="holiday" border="0"></a><br /> <a href="" onmouseover='nature.src="submenu/nature2.png"' onmouseout='nature.src="submenu/nature.png"'><img src="submenu/nature.png" name="nature"border="0"></a><br /> <a href="" onmouseover='movie.src="submenu/movie2.png"' onmouseout='movie.src="submenu/movie.png"'><img src="submenu/movie.png" name="movie"border="0"></a><br /> <a href="" onmouseover='space.src="submenu/space2.png"' onmouseout='space.src="submenu/space.png"'><img src="submenu/space.png" name="space"border="0"></a><br /> </td> <tr> </table> </td> and here is for the submenu left: Code: <td valign="top" id="content"> <table border="0" width="700px" class="one" align="center"> <br /> <tr align="center"> <td colspan=3 align="center" style="border:0"> <b class="one" style="color:#FFDEAD"><u><i>Top Quality Free Wallpaper for your Desktop</i></u></b><br /> <b style="color:#FFDEAD">Click on images to see the whole selection of wallpapers in each category<b><br /><br /> </td> </tr> <tr valign="middle" align="center"> <td style="border:0;color:#FFDEAD"> <b>Animals:</b><br /> <a href="animals.htm" onmouseover='animals.src="images/animals1.jpg"' onmouseout='animals.src="images/animals.jpg"'><img src="images/animals.jpg" name="animals"></a> </td> <td style="border:0;color:#FFDEAD"> <b>Cars:</b><br /> <a href="cars.htm" onmouseover='cars.src="images/cars1.jpg"' onmouseout='cars.src="images/cars.jpg"'><img src="images/cars.jpg" name="cars"></a> </td> <td style="border:0;color:#FFDEAD"> <b>Cartoons:</b><br /> <a href="cartoons.htm" onmouseover='cartoons.src="images/cartoons1.jpg"' onmouseout='cartoons.src="images/cartoons.jpg"'><img src="images/cartoons.jpg" name="cartoons"></a> </td> </tr> <tr valign="middle" align="center"> <td style="border:0;color:#FFDEAD"> <b>Celebrities:</b><br /> <a href="celebrity.htm" onmouseover='celebs.src="images/celebs1.jpg"' onmouseout='celebs.src="images/celebs.jpg"'><img src="images/celebs.jpg" name="celebs"></a> </td> <td style="border:0;color:#FFDEAD"> <b>Digital Art & 3D:</b><br /> <a href="digital.htm" onmouseover='digit.src="images/digital1.jpg"' onmouseout='digit.src="images/digital.jpg"'><img src="images/digital.jpg" name="digit"></a> </td> <td style="border:0;color:#FFDEAD"> <b>Fantasy Art:</b><br /> <a href="fantasy.htm" onmouseover='fantas.src="images/fantasy1.jpg"' onmouseout='fantas.src="images/fantasy.jpg"'><img src="images/fantasy.jpg" name="fantas"></a> </td> </tr> <tr valign="middle" align="center"> <td style="border:0;color:#FFDEAD"> <b>Fine Art:</b><br /> <a href="art.htm" onmouseover='art.src="images/art1.jpg"' onmouseout='art.src="images/art.jpg"'><img src="images/art.jpg" name="art"></a> </td> <td style="border:0;color:#FFDEAD"> <b>Holidays:</b><br /> <a href="holidays.htm" onmouseover='holi.src="images/holidays1.jpg"' onmouseout='holi.src="images/holidays.jpg"'><img src="images/holidays.jpg" name="holi"></a> </td> <td style="border:0;color:#FFDEAD"> <b>Natu </b><br /> <a href="nature.htm" onmouseover='natur.src="images/nature1.jpg"' onmouseout='natur.src="images/nature.jpg"'><img src="images/nature.jpg" name="natur"></a> </td> </tr> </table> </td> I'm sorry if i make some mistakes on the post.... Is there anyway I can have a line of text in my FAQ's on my website with a onmouseover command to drop down a box with the answer to the question? Thank you in advance, Regards, Josh Hello, I have a site with a big picture that use <area> and <map> tags. How can I replace piece of the big picture, by other image using OnMouseOver or by other way? (The image is defined by coords) Thank You! Big Image, and the image that I need to replace. hi everyone, I have a small problem. I want to implent the facebook (like), twitter (tweet) and Hyves (respect) buttons on my website. However, I dont like the styles of either one. Because they are using an iFrame, Im not able (or my skills limit me..) to change their looks. So I was thinking about creating an onmouseover event. A picture at first and when onmouseover it changes to the actual button. (IF there is a better way of hiding the button but still keep its functionallity, please tell me) The problem starts when I want to code it. I have no clue what so ever how to get this to work. Perhaps someone here can help me out? Because I have never worked with events in Expression Web 4. Thanks in advance! Ferdri3 PS. Behavior -> swap image (+ editting second img url doesnt work) Im using expression web 4 Hi Guys/Girls, Im in a sticky situation i have been searching the web and forums for a tutorial or example on how to create a popup box when the mouse cursor glides over it. what i want to achieve is something like this if you can please browse to http://www.uncle-buck.co.uk/Need-Mon...ncle-Buck.htm# if you hover over "See representative example >" you will see a popup box appear i want to achieve just that im not fussed on the color etc at the moment i ideally would like to get the functionality working correctly and then make it look nice later. if someone can help me i really would appreciate or even better if you know of or have seen a tutorial based on this then please do share it with me. Hope to hear from someone soon. Thanks <a onmouseover="ddrivetip('<b>Purple Parasol</b><br /> 1.0 HC Sofas<br />Status:Stable','white', 125)" ;="" onmouseout="hideddrivetip()"><img src="http://omgvalues.net/images/pparasol.gif" border="0"></a> While the page loads, this mouseover works just fine (theres around 1,000 other mouseovers) after the page loads, my mouseovers do not work.. OMGValues.net is my URL. My site works JUST based on mouseovers. Furnivalues.net is where they gave me their layout, so our sites are similar their roll-overs do work, where our ones STOP working. Please help thank you ) Hi: - All of the left-menu icons correctly highlight when I scroll over them except for the one (which I have most recently added to the site) - All of the left-menu icons correctly remain highlighted when I travel to any given corresponding destination page on the site Here's the function call of the menu button in question...this is logically identical to the other function calls invoking mouse-over "highlighting": <div><a href="destination.html" onmouseover="java script:rollOver('ln_07','ln_07_ov');" onmouseout="java script:rollOver('ln_07','ln_07');"><img src="img/ln_07.jpg" name="ln_07" alt="Destination" width="126" height="26" border="0"></a></div> Just to restate: the scroll-over highlights are correctly invoked in all instances with the exception of the one menu icon applicable to all pages of the site except its destination page (where it correctly remains in highlight mode...) Many thanks-- BR |
|||||||