onmouseorver for child element
-
i was creating little animation using javascript....but got stuck
body{} .imgC{width:350px; height:300px;} #divV{background-color:#000000; opacity:0.6; filter:alpha(opacity=60); width:350px; height:70px;} #mainDiv{width:100%; height:100%; background-color:#c3c3c3; top:0px; left:0px; position:absolute;} window.onload=inItAll; function inItAll() { document.getElementById("img1").onmouseover = cursorOver; document.getElementById("img1").onmouseout = cursorOut; document.getElementById("divV").onmouseout = cursorVOut; } function cursorOver() { if(!document.getElementById("divV")) { var Y1 = document.getElementById("img1").offsetTop; var X1 = document.getElementById("img1").offsetLeft; var Elem = document.createElement("div"); Elem.id="divV"; Elem.cssClass="divVc"; Elem.style.position="absolute"; Elem.style.top = 230+Y1+"px"; Elem.style.left = X1+"px"; document.getElementById("div1").appendChild(Elem); } } function cursorOut(e) { var Y1 = document.getElementById("img1").offsetTop; var Y2 = Y1 + 300; var X1 = document.getElementById("img1").offsetLeft; var X2 = X1 + 350; if (!e) var e = window.event; if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX posy = e.clientY } if(posx>=X1 && posx<=X2 && posy>=Y1 && posy<=Y2) { } else { var Elem = document.getElementById("divV"); document.getElementById("div1").removeChild(Elem); } } function cursorVOut() { var Elem = document.getElementById("divV"); document.getElementById("div1").removeChild(Elem); } everything works fine except document.getElementById("divV").onmouseout = cursorVOut; this part is not working..... when i bring cursor on image(img1) a small div appears at the bottom of image and if i move my cursor out it should disappear...the p -
i was creating little animation using javascript....but got stuck
body{} .imgC{width:350px; height:300px;} #divV{background-color:#000000; opacity:0.6; filter:alpha(opacity=60); width:350px; height:70px;} #mainDiv{width:100%; height:100%; background-color:#c3c3c3; top:0px; left:0px; position:absolute;} window.onload=inItAll; function inItAll() { document.getElementById("img1").onmouseover = cursorOver; document.getElementById("img1").onmouseout = cursorOut; document.getElementById("divV").onmouseout = cursorVOut; } function cursorOver() { if(!document.getElementById("divV")) { var Y1 = document.getElementById("img1").offsetTop; var X1 = document.getElementById("img1").offsetLeft; var Elem = document.createElement("div"); Elem.id="divV"; Elem.cssClass="divVc"; Elem.style.position="absolute"; Elem.style.top = 230+Y1+"px"; Elem.style.left = X1+"px"; document.getElementById("div1").appendChild(Elem); } } function cursorOut(e) { var Y1 = document.getElementById("img1").offsetTop; var Y2 = Y1 + 300; var X1 = document.getElementById("img1").offsetLeft; var X2 = X1 + 350; if (!e) var e = window.event; if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX posy = e.clientY } if(posx>=X1 && posx<=X2 && posy>=Y1 && posy<=Y2) { } else { var Elem = document.getElementById("divV"); document.getElementById("div1").removeChild(Elem); } } function cursorVOut() { var Elem = document.getElementById("divV"); document.getElementById("div1").removeChild(Elem); } everything works fine except document.getElementById("divV").onmouseout = cursorVOut; this part is not working..... when i bring cursor on image(img1) a small div appears at the bottom of image and if i move my cursor out it should disappear...the pPersonally I can't see how any of it works. Your onload function refers to divV before it has even been defined. Can I suggest you try using the Error console in Firefox to try debugging your JavaScript....