ROLLOVER 1 

Outils pour webmaster. Trucs et astuces en code HTML et JavaScript : améliorer son site internet

Descriptif : permet d'insérer un texte qui apparaît sur un lien ou une image. Remplace avantageusement la petite fenêtre jaune classique qui n'est visible qu'au bout d'un temps assez long.

Exemple :

Laissez le pointeur de votre souris quelques secondes sur cette image Assez lent. Et cette fenêtre disparaît si vous ne bougez plus le pointeur. Cliquez sur cette image si vous voulez ajouter cette page à vos favoris (avec I.E uniquement).

Puis sur ce lien ou cette image 

Mise en oeuvre : Sélectionnez et copiez directement à l'écran le code ci-dessous et collez-le dans votre page, code HTML visible.

Entre les deux balises <head> et </head>

<!--DEBUT DU CODE ROLLOVER 1-->
<script LANGUAGE="Javascript">
<!-- Scripts des bulles d'aide
// Copyright Frank Milard - http://www.asaisir.com/a-la-page
// Vous pouvez utiliser ou modifier ce script librement
// sous reserve de laisser le copyright visible
<!-- Script provenant de http://www.toulouse-renaissance.net/c_outils/ -->
IE4 = (document.all) ? 1 : 0;
NS4 = (document.layers) ? 1 : 0;
VERSION4 = (IE4 | NS4) ? 1 : 0;

if (!VERSION4) event = null;

function helpGetOffset(obj, coord) {
    var val = obj["offset"+coord] ;
    if (coord == "Top") val += obj.offsetHeight;
    while ((obj = obj.offsetParent )!=null) {
        val += obj["offset"+coord];
        if (obj.border && obj.border != 0) val++;
    }
    return val;
}

function helpDown () {
    if (IE4) document.all.helpBox.style.visibility = "hidden";
    if (NS4) document.helpBox.visibility = "hidden";
}

function helpOver (event,texte) {
    if (!VERSION4) return;

    var ptrObj, ptrLayer;
    if (IE4) {
        ptrObj = event.srcElement;
        ptrLayer = document.all.helpBox;
    }
    if (NS4) {
        ptrObj = event.target;
        ptrLayer = document.helpBox;
    }

    if (!ptrObj.onmouseout) ptrObj.onmouseout = helpDown;

    var str = '<DIV CLASS="helpBoxDIV">'+texte+'</DIV>';
    if (IE4) {
        ptrLayer.innerHTML = str;
        ptrLayer.style.top = helpGetOffset (ptrObj,"Top") + 2;
        ptrLayer.style.left = helpGetOffset (ptrObj,"Left");
        ptrLayer.style.visibility = "visible";
    }
    if (NS4) {
        ptrLayer.document.write (str);
        ptrLayer.document.close ();
        ptrLayer.document.bgColor = "yellow";
        ptrLayer.top = ptrObj.y + 20;
        ptrLayer.left = ptrObj.x;
        ptrLayer.visibility = "show";
    }
}
// -->
</script>

<style TYPE="text/css">
<!--
#helpBox {
    position: absolute;
    z-index: 1000;
    top: 0px;
    left: 0px;
    width: 160px;
}
DIV.helpBoxDIV {
    width: 190px;
    padding: 2px;
    background: white;
    border: 1px solid black;

    color: black;
    font-family: Arial,Helvetica;
    font-style: Normal;
    font-weight: Normal;
    font-size: 10px;
    line-height: 14px;
}
-->
</style>
<!--FIN DU CODE ROLLOVER 1-->

   

Juste après la balise <body>

<div ID="helpBox"></div>

 

Entre les deux balises <body> et </body>

<p><a onmouseover="helpOver(event,'Votre texte ici. S\'il comporte une apostrophe ne pas oublier l\'anti-slash avant celle-ci')"> <img src="votre image ici.jpg" width="173" height="113"></a></p>

Remarque : vous pouvez paramétrer les dimensions de la fenêtre, la couleur du fond, la fonte dans la partie <head> à la ligne :  DIV.helpBoxDiv
- Si votre texte dans la fonction onMouseOver comporte une apostrophe ne pas oublier l\'anti-slash avant celle-ci. Les guillements devront avoir la forme &quot;

Voir le code des couleurs

Voir aussi : Rollover 2

 

Retour

Copyright www.toulouse-renaissance.net ©