Hello,
j'ai un vieux code JavaScript qui est plus lourd, mais l'infobulle suit bien le mouvement du curseur:
Le code html:
<head>
<script language="JavaScript" type="text/javascript" src="javascript/style.js"></script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
maketip('TIP1','title','texte');
-->
</script>
<div id="infodiv" style="position: absolute; visibility: hidden; z-index: 20; top: 0px; left: 0px;"></div>
<a href="#TIP1" onMouseOver="tip('TIP1');" onMouseOut="untip();">Survolez ce lien...</a>
</body>
et le fichier "style.js":
var IWIDTH=250 // Tip box width
var ns4 // Are we using Netscape4?
var ie4 // Are we using Internet Explorer Version 4?
var ie5 // Are we using Internet Explorer Version 5 and up?
var kon // Are we using KDE Konqueror?
var x,y,winW,winH // Current help position and main window size
var idiv=null // Pointer to infodiv container
var px="px" // position suffix with "px" in some cases
function nsfix(){setTimeout("window.onresize = rebrowse", 2000);}
function rebrowse(){window.location.reload();}
function hascss(){ return gettip('infodiv')?true:false }
function infoinit(){
ns4=(document.layers)?true:false, ie4=(document.all)?true:false;
ie5=((ie4)&&((navigator.userAgent.indexOf('MSIE 5')>0)||(navigator.userAgent.indexOf('MSIE 6')>0)))?true:false;
kon=(navigator.userAgent.indexOf('konqueror')>0)?true:false;
x=0;y=0;winW=800;winH=600;
idiv=null;
document.onmousemove = mousemove;
if(ns4&&document.captureEvents) document.captureEvents(Event.MOUSEMOVE);
// Workaround for just another netscape bug: Fix browser confusion on resize
// obviously conqueror has a similar problem :-(
if(ns4||kon){ nsfix() }
if(ns4) { px=""; }
}
function untip(){
if(idiv) idiv.visibility=ns4?"hide":"hidden";
idiv=null;
}
function gettip(name){return (document.layers&&document.layers[name])?document.layers[name]:(document.all&&document.all[name]&&document.all[name].style)?document.all[name].style:document[name]?document[name]:(document.getElementById(name)?document.getElementById(name).style:0);}
// Prepare tip boxes, but don't show them yet
function maketip(name,title,text){
//if(hascss())
document.write('<div id="'+name+'" name="'+name+'" style="position:absolute; visibility:hidden; z-index:20; top:0'+px+'; left:0'+px+';"><table width='+IWIDTH+' border=0 cellpadding=2 cellspacing=0 bgcolor="#333399"><tr><td class="tiptd"><table width="100%" border=0 cellpadding=0 cellspacing=0><tr><th><span class="ptt"><b><font color="#FFFFFF">'+title+'</font></b></span></th></tr></table><table width="100%" border=0 cellpadding=2 cellspacing=0 bgcolor="#CCCCFF"><tr><td><span class="pst"><font color="#000000">'+text+'</font></span></td></tr></table></td></tr></table></div>'+"\n");
}
function tip(name){
if(hascss()){
if(idiv) untip();
idiv=gettip(name);
if(idiv){
winW=(window.innerWidth)? window.innerWidth+window.pageXOffset-16:document.body.offsetWidth-20;
winH=(window.innerHeight)?window.innerHeight+window.pageYOffset :document.body.offsetHeight;
if(x<=0||y<=0){ // konqueror can't get mouse position
x=(winW-IWIDTH)/2+(window.pageXOffset?window.pageXOffset:0); y=(winH-50)/2+(window.pageYOffset?window.pageYOffset:0); // middle of window
}
showtip();
}
}
}
function showtip(){
idiv.left=(((x+260)<winW)?x+12:x-255)+px; idiv.top=(((y+90)<winH)?y+12:y-90)+px;
idiv.visibility=ns4?"show":"visible";
// window.status="idiv="+idiv+"X:"+(idiv.left?idiv.left:"NAN")+", Y:"+(idiv.top?idiv.top:"NAN")+", x:"+x+", y:"+y;
}
function mousemove(e){
if(e) {x=e.pageX?e.pageX:e.clientX?e.clientX:0; y=e.pageY?e.pageY:e.clientY?e.clientY:0;}
else if(event) {x=event.clientX; y=event.clientY;}
else {x=0; y=0;}
if(document.documentElement) // Workaround for scroll offset of IE
{
x+=document.documentElement.scrollLeft;
y+=document.documentElement.scrollTop;
}
if(idiv) showtip();
}
// EOF infobox.js
function NiftyCheck(){
if(!document.getElementById || !document.createElement)
return(false);
var b=navigator.userAgent.toLowerCase();
if(b.indexOf("msie 5")>0 && b.indexOf("opera")==-1)
return(false);
return(true);
}
function Rounded(selector,bk,color,size){
var i;
var v=getElementsBySelector(selector);
var l=v.length;
for(i=0;i<l;i++){
AddTop(v[i],bk,color,size);
AddBottom(v[i],bk,color,size);
}
}
function RoundedTop(selector,bk,color,size){
var i;
var v=getElementsBySelector(selector);
for(i=0;i<v.length;i++)
AddTop(v[i],bk,color,size);
}
function RoundedBottom(selector,bk,color,size){
var i;
var v=getElementsBySelector(selector);
for(i=0;i<v.length;i++)
AddBottom(v[i],bk,color,size);
}
function AddTop(el,bk,color,size){
var i;
var d=document.createElement("b");
var cn="r";
var lim=4;
if(size && size=="small"){ cn="rs"; lim=2}
d.className="rtop";
d.style.backgroundColor=bk;
for(i=1;i<=lim;i++){
var x=document.createElement("b");
x.className=cn + i;
x.style.backgroundColor=color;
d.appendChild(x);
}
el.insertBefore(d,el.firstChild);
}
function AddBottom(el,bk,color,size){
var i;
var d=document.createElement("b");
var cn="r";
var lim=4;
if(size && size=="small"){ cn="rs"; lim=2}
d.className="rbottom";
d.style.backgroundColor=bk;
for(i=lim;i>0;i--){
var x=document.createElement("b");
x.className=cn + i;
x.style.backgroundColor=color;
d.appendChild(x);
}
el.appendChild(d,el.firstChild);
}
function getElementsBySelector(selector){
var i;
var s=[];
var selid="";
var selclass="";
var tag=selector;
var objlist=[];
if(selector.indexOf(" ")>0){ //descendant selector like "tag#id tag"
s=selector.split(" ");
var fs=s[0].split("#");
if(fs.length==1) return(objlist);
return(document.getElementById(fs[1]).getElementsByTagName(s[1]));
}
if(selector.indexOf("#")>0){ //id selector like "tag#id"
s=selector.split("#");
tag=s[0];
selid=s[1];
}
if(selid!=""){
objlist.push(document.getElementById(selid));
return(objlist);
}
if(selector.indexOf(".")>0){ //class selector like "tag.class"
s=selector.split(".");
tag=s[0];
selclass=s[1];
}
var v=document.getElementsByTagName(tag); // tag selector like "tag"
if(selclass=="")
return(v);
for(i=0;i<v.length;i++){
if(v[i].className==selclass){
objlist.push(v[i]);
}
}
return(objlist);
}
window.onload=function(){
if(!NiftyCheck())
return;
Rounded("div.item","#FFFFFF","#d0d0d0");
Rounded("div.recommend","#FFFFFF","#e0e0e0");
Rounded("div.navcontainer","#FFFFFF","#f0f0f0");
infoinit();
}
Ce code date un peu, y'a surement plus léger pour le même résultat.
6 avril 2009 à 17:38