Bonjour,
Je progresse à petite vitesse sur la question...
Mon problème est d'afficher un Tool'Tips coloré lors du survol des liens, et je désire pouvoir formater et insérer des <br/> dans le texte du ToolTips,
avec une solution qui marche pour IE
et pour FF...
En visitant le site
http://repaire.net/, j'ai trouvé une implémentation qui m'intéressait.
L'introduction de < br/ > génère bien les sauts de lignes, dans IE et dans FF.
J'ai élagué le code, pour ne prendre que le nécessaire.
Ca a continué à marcher sous IE ( 6.0.2 xpsp2 ) et FF ( 1.0.7 )
J'ai ensuite converti la syntaxe <HTML> en <xhtml>, en ajoutant en entête :
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
puis en transformant les majuscules en minuscules...
Je passe passe dans
http://validator.w3.org/ sans erreur. Je me sens génial !
Par contre, ça marche encore dans IE, mais plus bien dans FF.
Il me suffit d'enlever la première ligne <DOCTYPE... > et là, ça s'exécute bien aussi sous FF...
Dans FF, quand "ça marche pas", comprenez : le tool'tips coloré s'affiche en haut à gauche de l'écran, sans suivre les mouvements de la souris.
Bon, dans le Java que j'ai récupéré, voici les trucs louches que j'ai remarqués :
la
fonction browser() ne teste pas explicitement le cas "firefox".
J'ai dupliqué/rajouté les 2 lignes opéra pour les adapter à Firefox :
Code : Tout sélectionner
this.ff = (navigator.userAgent.indexOf('Firefox')>-1);
if (this.ff){this.browser = 'ff'}
Autre problème potentiel, la
fonction get_mouse(e) : cette fonction semble récupérer les coordonnées x,y de la souris :
Code : Tout sélectionner
function get_mouse(e) {
var x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
var y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
skn.left = x;
skn.top = y+20;
}
Visiblement, elle teste le cas "NetScape" ? pour appliquer une formule ou l'autre, mais aucune des 2 formules ne semble marcher pour FF avec <DOCTYPE> ( mais ça marche sans <DOCTYPE> ... )
Quelqu'un peut-il me dire comment faire dans le Javascript de FF pour récupérer les événements de la souris ?
Du même tonneau, la
fonction setOpacity() ne marche pas pour FF ( avec ou sans ligne DOCTYPE )
Quelle syntaxe proposeriez vous ?
Merci pour votre aide.
Si vous avez une explication sur pourquoi ma ligne <DOCTYPE> empêche de marcher...
Je suis débutant en xhtml... et encore plus en Javascript !
Je donne en dessous, l'ensemble de mon code, pour que vous puissiez tester si vous ne me croyez pas...
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test PoperLink</title>
<!--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
-->
<style type="text/css" >
<!--
.popperlink {
font-family: "Century Gothic", Verdana, Arial;
font-size: 14px;
font-weight: normal;
color: #555555;
background-color:#FF5A02;
VISIBILITY: hidden; POSITION: absolute
}
-->
</style>
</head>
<body onload="setOpacity('topdecklink','90');" >
<div class="popperlink" id="topdecklink"></div>
<p>
<script language="JavaScript" type="text/JavaScript">
<!--
function Browser(){
this.name = navigator.appName;
if ( this.name == 'Microsoft Internet Explorer') this.browser = 'ie';
else if (this.name.match(/Netscape/)) this.browser = 'ns';
else this.browser = this.name;
this.version = parseInt(navigator.appVersion);
this.ns = (this.browser=='ns' && this.version>=4);
this.ns4 = (this.browser=='ns' && this.version==4);
this.ns6 = (this.browser=='ns' && this.version>=5);
this.ie = (this.browser=='ie' && this.version>=4);
this.ie4 = (this.browser=='ie' && navigator.userAgent.indexOf('MSIE 4')>-1);
this.ie5 = (this.browser=='ie' && navigator.userAgent.indexOf('MSIE 5')>-1);
this.ie6 = (this.browser=='ie' && navigator.userAgent.indexOf('MSIE 6')>-1);
if (this.ie5) this.version = 5;
this.op5 = (navigator.userAgent.indexOf('Opera 5')>-1);
if (this.op5){this.browser = 'op'}
this.ff = (navigator.userAgent.indexOf('Firefox')>-1);
if (this.ff){this.browser = 'ff'}
this.dom1 = (document.implementation && document.implementation.hasFeature)?true:false;
this.os = (navigator.platform)?navigator.platform:'unknown';
if (this.ie){ this.language = navigator.userLanguage.substring(0,2).toLowerCase() } else if (this.ns || this.op5) { this.language = navigator.language.substring(0,2).toLowerCase() }
this.toString = function(){ return '[object Browser]'}
return this;
}
function setOpacity(objId, i){
b = new Browser()
if (b.ie){
obj = document.all[objId]
obj.style.filter = "alpha(opacity=" + i + ")";
}
else if (b.ns6){
obj = document.getElementById(objId)
obj.style.MozOpacity = i+'%'
}
}
domok = document.getElementById;
if (domok) {
skn = document.getElementById("topdecklink").style;
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = get_mouse;
}
function pop(size, msg) {
var content ="<table width="+size+" ><tr><td>"+msg+"<br/>browser=" + navigator.userAgent +"</td></tr></table>";
if (domok) {
document.getElementById("topdecklink").innerHTML = content;
skn.visibility = "visible";
}
}
function get_mouse(e) {
var x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
var y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
skn.left = x;
skn.top = y+20;
}
function kill() {
if (domok)
skn.visibility = "hidden";
}
//-->
</script>
<a href="#">
<img src="videoimages/tests2.jpg"
name="Tests"
onmouseover="pop( 300, 'Pour mieux choisir <br/>votre matériel <br/>venez sur mon forum ! ')"
onmouseout="kill()" alt="image inexistante" />
</a>
<br/><br/><br/><br/><br/>
<a href="#"
onmouseover="pop( 300, 'Pour mieux choisir <br/>votre matériel <br/>venez sur mon forum ! ')"
onmouseout="kill()" >
FORUM <br/>FORUM <br/>FORUM FORUM FORUM </a>
</p>
</body>
</html>
