|
JavaScript - Onmouseout On Div Elements Issue
Hi folks!
I want to display some information in a DIV (div1) that is originally hidden, display it when I hover my mouse over another DIV (div2), and hide it (div1) again when my mouse leaves that specific DIV (div2). My problem is that the onMouseOver and onMouseOut events are fired each time the mouse hovers another element within the div (such as <p> or <a> tags) which is, as far as I understood, a normal behavior, although it looks like a bug. Since the onMouseOver event will trigger an AJAX function and will retrieve some data from my db, I don't want it to be called like 5 times because the user just moved his mouse around, within the DIV and hovered different child elements. I have found this bit of code which is supposed to resolve this issue: PHP Code: function doSomething(e) { if (!e) var e = window.event; var tg = (window.event) ? e.srcElement : e.target; if (tg.nodeName != 'DIV') return; var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement; while (reltg != tg && reltg.nodeName != 'BODY') reltg= reltg.parentNode if (reltg== tg) return; // Mouseout took place when mouse actually left layer // Handle event } My question is: how do I call this function from my DIV, knowing that originally I have something like: <div id="div2" onMouseOut="hideDiv('div1')"></div> hideDiv being my javascript function that sets div_x to display = none How would I link these 2 functions together? And also is this going to fix the onMouseOver issue at the same time (if the mouse doesn't go out, does it mean it's still in?)? Sorry, my knowledge of javascript is kind of ltd! Thanks in advance for helping me! Arnaud Similar Tutorialsok so here is the problem in more detail i have a dropdown menu wrapped in a div attached to this div is the onmouseout event which hides the div this is working the problem however is when moving from 1 link to the next in the dropdown the onmouseout event of the wrapper div is firing and hiding the div prematurely see it live relevant code: Code: <div id="roster_drop" class="drop_menu" style="left: 128px;" onmouseout="this.style.display = 'none';"> <a href="roster.php">Superstars</a> <a href="champions.php">Champions</a> <a href="titlehistory.php">Title History</a> </div> how do i make the event only trigger when your mouse leaves the div itself and not crossing onto a link Alright,ill go straight to the problem. I want to get all the elements with a certain tag.However i can only get the first one. my code: Code: function getTags(tag) {
var x = document.getElementsByTagName(tag);
var y = x.length;
for(var i = 0; i <= y;i++) {
return x[i];
}
}
hey everyone: im using the following function: Code: function getByTag(tagName) {
var i, results = [], nodes = document.getElementsByTagName(tagName);
for (i = 0; i < nodes.length; i++) {
results.push(nodes[i]);
}
return results;
}
however when im trying to do this getByTag("div").style.color = "red" nothing happens.any help? 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'm trying to set a timer when someone moves off of an image. When I try my event without the timer there are no problems but it throws syntax or object expected errors (if I play with the quotes some) when I add in the timer. This is inline code on the image. onMouseout="newsTimer = setTimeout("Effect.toggle('news', 'slide')", 500)"; It is likely something simple I am overlooking but I cannot find any answers after a long search. Thank you for any and all help. Hi All!! I am using onmouseover functionality in php & my code is he echo "<a href='#' onmouseover='gettree_nickname($var)'; onmouseout='SetTimeout(gettree_nickname($var),1000);'>lookup a tree</a>"; Though onmouseover works fine,but onmouseout is not working properly. Is there any syntax mistake, or way of using it is not correct, please suggest. Thanks in advance!! I have a test peice of html is set up roughly like this: Code: <div id="bill" onmouseover="javascript: show('bob'); hide('bill');">
<h1>Bill says hi</h1>
</div>
<div id="bob" style="visibility:hidden; display:none;" onmouseout="javascript: show('bill'); hide('bob');">
<h1>Bob says hi</h1>
</div>
And my javascript looks like this: Code: function show(elemId) {
elem = document.getElementById(elemId);
elem.style.visibility = "visible";
elem.style.display = "block";
}
function hide(elemId) {
elem = document.getElementById(elemId);
elem.style.visibility = "hidden";
elem.style.display = "none";
}
You can see what it does from the code: When the page loads, it shows the text Bill says hi. When you move the mouse over the text, it changes to Bob says hi. When you move the mouse away from the text, it reverts to Bill says hi. BUT - this only seems to work consistently when the mouse is moved away from the text at slow speed - if you pull the mouse away quickly, it sometimes gets stuck on Bob says hi. Any ideas why? Hi, I'm trying to use one of the free scripts from Javascriptkit.com, and modifying it to work the way I would like it to. Therefore I have cut parts of it out (href refrences and anchor tags). This is an image rollover script that loads an enlarged image onMouseover to " function warp()". This image is 400x300px and is loaded from thumbnail images. The script works fine as it was written, even after my cutting some of it. The problem I have is that I want to add an onMouseout function that will reload the first image when the mouse moves off of the thumbnail. I am just learning coding, and have not been able to get the onMouseout to work, and I've tried everything I can think of, so I'm hoping you will help, my code is Code:
<script>
/*Rollover effect on different image script-
By JavaScript Kit (http://javascriptkit.com)
Over 200+ free scripts here!
*/
function changeimage(towhat){
if (document.images){
document.images.targetimage.src=towhat.src
}
}
function warp(){
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg","img6.jpg")
</script>
<p class="roller">
<"javascript:warp()"><img src="img6.jpg" name="targetimage" border=0><br>
<p class="roller">
<img src="image1.jpg" width="121" height="91" alt="" border="1" onMouseover="changeimage(myimages[0],this.image)";onMouseout="changeimage(myimages[5]),this.image)">
<img src="images/thumb2.jpg" width="121" height="91" alt="" border="1" onMouseover="changeimage(myimages[1],this.image)";onMouseout="changeimage(myimages[5],this.image)">
<img src="images/thumb3.jpg" width="121" height="91" alt="" border="1" onMouseover="changeimage(myimages[2],this.image)";onMouseout="changeimage(myimages[5]),this.image)">
<img src="images/thumb4.jpg" width="121" height="91" alt="" border="1" onMouseover="changeimage(myimages[3],this.image)";onMouseout="changeimage(myimages[5]),this.image)">
<img src="images/thumb5.jpg" width="121" height="91" alt="" border="1" onMouseover="changeimage(myimages[4],this.image)";onMouseout="changeimage(myimages[5]),this.image)">
I have seen many reports of this problem online but none of the fixes appear to exactly solve my problem. I need to be able to solve this problem with minimal code changes (code generated by a graphic designer in Dreamweaver). A section of the relevant code is below. The menu items are all images in AP DIVs. The menu items all flicker in IE and the onClick doesn't seem to have time to process. This works fine in FireFox. I've tried setTimeout around the call to MM_showHideLayers but this didn't seem to work. Any suggestions please? Code: function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v;
}
}
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
.
.
.
<div id="hello" onmouseover="MM_showHideLayers('helloover','','show')" onmouseout="MM_showHideLayers('helloover','','hide')" ></div>
.
.
.
<div id="helloover" onclick="MM_goToURL('parent','index.html');return document.MM_returnValue"></div>
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";
}
}
I have the below html. In the below code, I have an onmouseover and onmouseout on the parent DIV of three nested DIVs. Whenever I mouse INTO the nested DIVs, the onmouseout event fires for the outermost DIV. Is there a way to prevent this? <html> <head> <script language="JavaScript"> function mouseOnDiv() { alert("mouseon outerDiv"); event.cancelBubble = true; } function mouseOffDiv() { alert("mouseoff outerDiv"); event.cancelBubble = true; } </script> </head> <body> <div style="border:1px solid red; position:absolute" onmouseover="mouseOnDiv()" onmouseout="mouseOffDiv()"> This is some text <div style="border:1px solid blue; position:relative"> This is some text in the middle div <div style="border:1px solid green; position:relative"> <ul> <li>Item 1</li> </ul> </div> </div> </div> </body> </html> I found on the javascriptkit.com tutorials their js code for submenus he http://www.javascriptkit.com/script/...leveltab.shtml I've changed some things in the css but I'm afraid to change the js code. I would like my link to hide the submenu on the onmouseout. What is the code to do this and where would it go in my js page? Here is the js code that I've taken from the tutorial if that helps: Code: var mastertabvar=new Object()
mastertabvar.baseopacity=0
mastertabvar.browserdetect=""
function showsubmenu(masterid, id){
if (typeof highlighting!="undefined")
clearInterval(highlighting)
submenuobject=document.getElementById(id)
mastertabvar.browserdetect=submenuobject.filters? "ie" : typeof submenuobject.style.MozOpacity=="string"? "mozilla" : ""
hidesubmenus(mastertabvar[masterid])
submenuobject.style.display="block"
instantset(mastertabvar.baseopacity)
highlighting=setInterval("gradualfade(submenuobject)",50)
}
function hidesubmenus(submenuarray){
for (var i=0; i<submenuarray.length; i++)
document.getElementById(submenuarray[i]).style.display="none"
}
function instantset(degree){
if (mastertabvar.browserdetect=="mozilla")
submenuobject.style.MozOpacity=degree/100
else if (mastertabvar.browserdetect=="ie")
submenuobject.filters.alpha.opacity=degree
}
function gradualfade(cur2){
if (mastertabvar.browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (mastertabvar.browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (typeof highlighting!="undefined") //fading animation over
clearInterval(highlighting)
}
function initalizetab(tabid){
mastertabvar[tabid]=new Array()
var menuitems=document.getElementById(tabid).getElementsByTagName("li")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab
mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel") //store ids of submenus of tab menu
if (menuitems[i].className=="selected")
showsubmenu(tabid, menuitems[i].getAttribute("rel"))
menuitems[i].getElementsByTagName("a")[0].onmouseover=function(){
showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
}
}
}
}
Thank you so much for your help. I am trying to have a slide show of pictures that are randomly generated stop when the user mouses over the image, I have got everything to work so far except the onmouseover event, even the onmouseout seems to work I don't necessarily need the exact answer but any guidance would be appreciated! <script type="text/javascript"> /* ! [CDATA[ */ setInterval('randomImage()', 4000); //sets the interval of images to show every 4 seconds and runs the function to do so. var imgs = new Array("outdoors.jpg", "kayak.jpg", "fishing.jpg", "scuba.jpg", "biking.jpg"); //the array of images function randomImage() { document.getElementById("image").src = imgs[Math.floor(Math.random()*imgs.length)]; } //the function calls for a random number and applies it to the array of images to show a random picture. /* ]]> */ </script> </head> <body> <p> <img src="outdoors.jpg" width="200" height="200" alt="Random Image" id="image" onmouseover="clearInterval();" onmouseout="randomImage()" /> </p> I am not quite sure what I am doing wrong I've tried mutliple different set ups for the "onmouseover="clearInterval();" and nothing seems to work. I'm creating a new thread just for the sake of getting help from other people and getting help fast. Not sure if other people are or will be facing similar problems as I am but I will post this on the forum for other people's sake... I want to make my drop down box similar to the one seen at http://www.gamewearteamsports.com/ The menu links act as normal links but will drop down to a div box when a person hovers over the link. The box will appear when the person hovers it but SHOULD disappear once the person does not hover over the box anymore. So if the person hovers over another link, the box should disappear. I added a delay timeout to one of my div boxes and the box stays alive for a couple of seconds but then closes back up again even though I'm still hovering over it. Any ideas? My js: Code: <script type="text/javascript">
function drop(which)
{
document.getElementById("drop" + which).style.display = "block";
}
function undrop(which)
{
document.getElementById("drop" + which).style.display = "none";
}
</script>
My menu links code: Code: <ul id="head1" style="width:940px;">
<li><a href="#" onmouseover="drop(1)">Basketball</a></li>
<li><a href="#" onmouseover="drop(2)" onmouseout="undrop(2)">Football</a></li>
<li><a href="#" onmouseover="drop(3)" onmouseout="undrop(3)">Volleyball</a></li>
<li><a href="#" onmouseover="drop(4)" onmouseout="undrop(4)">Soccer</a></li>
<li><a href="#" onmouseover="drop(5)" onmouseout="undrop(5)">Baseball</a></li>
<li><a href="#" onmouseover="drop(6)" onmouseout="undrop(6)">Hockey</a></li>
<li><a href="#" onmouseover="drop(7)" onmouseout="undrop(7)">Training</a></li>
The code I have for the first link: Code: <div id="drop1" onmouseout="setTimeout('undrop(\'1\')', 3000);" style="z-index:3000;">
There's a table with content in it inside the div. There's a </ul> tag that closes out the menu links. Hi, I am having difficulty (tearing my hair out) with this problem. I have written a page as a learning experince for JavaScript. The page is here. The fade in works perfectly for ONLOAD and for ONMOUSEOVER but not for ONMOUSEOUT. The JavaScript code is as follows: Code: var d_opacity ;
var e_element ;
var t_timeout ;
function fadeInElement(s_element_to_fade_in)
{
d_opacity = 0.25 ;
e_element = document.getElementById(s_element_to_fade_in) ;
(e_element.style).display = "" ;
(e_element.style).opacity = d_opacity ;
t_timeout = setTimeout("fadeIn()", 125) ;
}
function fadeIn()
{
if (d_opacity == 1.0)
{
clearTimeout(t_timeout) ;
}
else
{
d_opacity += 0.075 ;
(e_element.style).opacity = d_opacity ;
t_timeout = setTimeout("fadeIn()", 125) ;
}
}
function fadeOutElement(s_element_to_fade_out)
{
e_element = document.getElementById(s_element_to_fade_out) ;
d_opacity = (e_element.style).opacity ;
t_timeout = setTimeout("fadeOut()", 125) ;
// (e_element.style).display = "none" ;
}
function fadeOut()
{
if (d_opacity == 0.25)
{
clearTimeout(t_timeout) ;
(e_element.style).display = "none" ;
}
else
{
d_opacity -= 0.075 ;
(e_element.style).opacity = d_opacity ;
t_timeout = setTimeout("fadeOutn()", 125) ;
}
}
When I use the commented out line in fadeOutElement(), the menu disappears which says to me ONMOUSEOUT is being triggered correctly, but if I do the fading out code, it does nothing. Any help greatly appreciated. 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. 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. 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'm trying to figure out how to have the onmouseout only revert an image, if the user hasn't clicked on the image. If that image has been chosen from a dropdown, then even with the rollover effects, I want the clicked choice to remain until another click. Right now, i have: Code: <a href="javascript:passit2('orange')" onMouseover="change1('pic11','image48')" onClick=" change1('pic11','image48'); add_content2('orange');" onMouseout="change1('pic11','image_off');">opposite</a></li>
<script>
function change1(picName,imgName)
{
if (document.images)
{
imgOn=eval(imgName + ".src");
document[picName].src= imgOn;
}
}</script>
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" -_- |
|||||||