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

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 https://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 "

Voir le code des couleurs

Voir aussi : Rollover 2

 

Retour

Copyright www.toulouse-renaissance.net ©