I'm facing difficulties in both IE6 and IE7 with mouseovers. You can see what I mean on http://www.nezci.com when you move over the categories with links to games on the top of the browser everything is fine and a screenshot with some text is nicely displayed just besides the link. When you scroll down and then move over another link you will see that it isn't nicely positioned next to the link anymore. In firefox everything works fine but in IE6 and IE7 not. I think it has something to do with the quirksmode because if I use <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> everything is ok. But when I use <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> which is needed for my design it doesn't work. Here is the code of the javascript which handles these mouseovers: var old,skn,iex=(document.all),yaxis=-1000; var ns4=document.layers var ns6=document.getElementById&&!document.all var ie4=document.all if (ns4) { skn=document.popup } else if (ns6) { skn=document.getElementById("popup").style; } else if (ie4) { skn=document.all.popup.style; } if(ns4) { document.captureEvents(Event.MOUSEMOVE); } else { skn.visibility="visible" skn.display="none" } document.onmousemove=get_mouse; function screenshot(imgid,naam,cijfer,catnaam,rijid) { var content="<table width=248 height=104 cellpadding=0 cellspacing=0 border=0 style='background-image:url(./img/popup_"+rijid+".gif);'><tr><td height=104 width=100 align=center valign=middle><img width=80 height=70 src='../img/spellen/"+imgid+".jpg' style='border:1px solid #464952;'></td><td width=148 style='color:#000;'><strong style='font-size:14px;'>"+naam+"</strong><br/> <br/>Categorie: "+catnaam+"<br/>Cijfer: "+cijfer+"<br/></td></tr></table>"; yaxis=0; if(ns4) { skn.document.write(content); skn.document.close(); skn.visibility="visible"; } if(ns6) { document.getElementById("popup").innerHTML=content;skn.display=''; } if(ie4) { document.all("popup").innerHTML=content;skn.display=''; } } function screenshot2(imgid,naam,cijfer,catnaam,rijid,speel) { var content="<table width=248 height=104 cellpadding=0 cellspacing=0 border=0 style='background-image:url(../../img/popup_1.gif);'><tr><td height=104 width=100 align=center valign=middle><img width=80 height=70 src='"+imgid+"' style='border:1px solid #464952;'></td><td width=148 style='color:#000;'><strong style='font-size:14px;'>"+naam+"</strong><br/> <br/>Categorie: "+catnaam+"<br/>Cijfer: "+cijfer+"<br/></td></tr></table>"; yaxis=0; if(ns4) { skn.document.write(content); skn.document.close(); skn.visibility="visible"; } if(ns6) { document.getElementById("popup").innerHTML=content;skn.display=''; } if(ie4) { document.all("popup").innerHTML=content;skn.display=''; } } function get_mouse(e) { var x=(ns4||ns6)?e.pageX:event.x+document.body.scrollLeft; skn.left=x+15; var y=(ns4||ns6)?e.pageY:event.y+document.body.scrollTop; skn.top=y+yaxis; } function verberg() { yaxis=-1000; if(ns4) { skn.visibility="hidden"; } else if (ns6||ie4) { skn.display="none"; } } Code (markup):
It works great! I tested it again an again, I compared firefox and IE output, it's almost the same output (bug1) There are only two minor bugs: bug 1:the select field on the search block overlaps the popup on IE.(maybe css z-index problem) bug 2:You used "title" on href, so there are two popups when u mouse over the game title.
I don't think you understood exactly what I mean. Just scroll to the bottom of the page and then hover over a link. Then you will see there isn't a screenshot displayed.
I have no idea what you are trying to do. Your narrative isn't clear, and neither is your code. I refuse to go to an unfamiliar site. But, in standards mode, it's: document.documentElement.scrollLeft document.documentElement.scrollTop I probably have clean, cross-browser code for whatever it is you are trying to do, if you would just describe the situation, and the desired result. Otherwise, good luck.
Sorry but I find it difficult to explain. The problem occurs in IE6 and IE7. When you move your mousepointer on a link you will see a small screenshot preview of the game with some text. But when you scroll down to the middle of the page or even further then you will notice that when you move your mousepointer over a link the screenshot is about 200px above the link. I want that the screenshot is always nicely positioned when you move your mousepointer on a link. I want it just like you can see in firefox. Then I don't have problems with the y-axis. I hope I was more clear now.
I really hate IE6 now. It's so incompatible with almost everything web 2.0 which is where the majority of my niche lies. I'm still an MS fan but I wish they'd find a way to get the millions of losers still using IE6 to upgrade to IE7 or get firefox.
This code displays a trailing image, with a caption, on mouseover a thumbnail image, but you can use it with ordinary anchor links. Just include the onmouseover function call within your "a" tag. Experiment with the style.left and style.top values to position the floating image, in relation to the mouse pointer, to your preference. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Any Title</title> <script type="text/javascript"> var floatWidth = 220; // set the width of the floating image var floatHeight = 160; // set its height // ************** DO NOT EDIT BELOW THIS LINE **************** var midWindow = 0; var nContainer = ""; var IE = false; if (navigator.appName == 'Microsoft Internet Explorer'){IE = true} function stayHome(m){ if (IE) { var currX = event.clientX; var currY = event.clientY; } else { var currX = m.pageX; var currY = m.pageY; } if (document.documentElement && document.documentElement.scrollLeft || document.documentElement && document.documentElement.scrollTop) { var iL = document.documentElement.scrollLeft; var iV = document.documentElement.scrollTop; } else { var iL = document.body.scrollLeft; var iV = document.body.scrollTop; } if (currX > midWindow-30) { var msgWidth = nContainer.clientWidth; if (IE){nContainer.style.left = (currX-msgWidth-10+iL)+'px'} else {nContainer.style.left = (currX-msgWidth-10)+'px'} } else { if (IE){nContainer.style.left = (currX+10+iL)+'px'} else {nContainer.style.left = (currX+10)+'px'} } if (IE){nContainer.style.top = (currY+iV-(floatHeight/2)-12)+'px'} else {nContainer.style.top = (currY-(floatHeight/2)-12)+'px'} } function insertFloatMsg(){ styleStr = "<style type='text/css'>.msgFloat {Position:Absolute;Top:0;Left:0;Border-Style:Solid;Border-Width:1px;Background-Color:Yellow;Padding-Right:5px;Padding-Left:5px;Padding-Top:5px;Padding-Bottom:5px;}<\/style>"; divStr = "<div class='msgFloat' id='isFloat'> <\/div>" document.write(styleStr); document.write(divStr); nContainer = document.getElementById('isFloat'); document.onmousemove = stayHome; } function hideImage(){ while (nContainer.lastChild) {nContainer.removeChild(nContainer.lastChild)} document.getElementById('isFloat').style.display = 'none'; } function showImage(isImg,currItem,currCaption){ document.getElementById('isFloat').style.display = 'inline'; nIMG = document.createElement('img'); nContainer.appendChild(nIMG); nIMG.setAttribute('src',isImg); nIMG.setAttribute('width',floatWidth); nIMG.setAttribute('height',floatHeight); nCaption = document.createElement('div'); nCaption.setAttribute('align','center'); nCaption.style.backgroundColor = '#EAE3C6'; nCaption.style.padding = '5px'; nCaption.style.color = '#000000'; nCaption.style.fontSize = '10pt'; nContainer.appendChild(nCaption); nCaption.innerHTML = currCaption; currItem.onmouseout=hideImage; } function getMidWindow(){ if (document.documentElement && document.documentElement.scrollLeft || document.documentElement && document.documentElement.scrollTop) { midWindow = document.documentElement.clientWidth/2; } else { midWindow = document.body.clientWidth/2; } } function initFloatImg(){ insertFloatMsg(); hideImage(); if (!IE){document.captureEvents(Event.mousemove)} getMidWindow(); } onresize=getMidWindow; </script> </head> <body> <table align='center'> <tbody> <tr> <td height='300'> <img src='1/moon.jpg' width='120' height='90' onmouseover="showImage(this.src,this,'The Moon')" alt=''> </td> </tr> <tr> <td height='300'> <img src='1/earth.jpg' width='120' height='90' onmouseover="showImage(this.src,this,'The Earth is the third<br>planet from the Sun.<br>Good Morning!')" alt=''> </td> </tr> </tbody> </table> <!-- Keep the following line as the last line in the Body --> <script type="text/javascript"> initFloatImg() </script> </body> </html> Code (markup):