<html>
<head>
<title>Boutons sensitifs</title> <script LANGUAGE="JavaScript">
<!--
n = (document.layers) ? 1:0
ie = (document.all) ? 1:0
function preload()
{
for (var i=0; i<arguments.length; i++) {
eval(arguments[i]+' = new Image()')
eval(arguments[i]+'.src = "'+arguments[i]+'.gif"')}
}
preload('contact','contact_hit','webmaster_hit','webmaster')
function changeImage(layer,imgName,imgObj)
{
if (n && layer!=null)
eval('document.'+layer+'.document.images["'+imgName+'"].src = '+imgObj+'.src');
else document.images[imgName].src = eval(imgObj+".src");
}
//-->
</script>
<style
TYPE="text/css">
<!--
#imgDiv1 {position:absolute; left:150 ; top:200;}
#imgDiv2 {position:absolute; left:550 ; top:200;}
-->
</style>
</head>
<body bgcolor="#000000" text="#FFFFFF">
<p align="center">Boutons sensitifs en
action</p>
<p><!--webbot bot="HTMLMarkup"
startspan -->
<div
ID="imgDiv1"><a HREF="mailto:contact@nautilum.com"
onMouseOver="changeImage('imgDiv1','myImg1','contact_hit')"
onMouseOut="changeImage('imgDiv1','myImg1','contact')">
<img NAME="myImg1"
SRC="contact.gif" BORDER="0" width="100"
height="100"></a>
</div>
<div ID="imgDiv2"><a HREF="mailto:webmaster@nautilum.com"
onMouseOver="changeImage('imgDiv2','myImg2','webmaster_hit')"
onMouseOut="changeImage('imgDiv2','myImg2','webmaster')">
<img NAME="myImg2"
SRC="webmaster.gif" BORDER="0" width="100"
height="100"></a>
</div>
<!--webbot bot="HTMLMarkup" endspan --></p>
</body>
</html> |
En tête de page htm Déclaration du language
de programmation
Définition des variables pour reconnaître l'explorateur
Fontction de préchargement des images
Préchargement des images
Fonction de changement d'images suivant le type d'explorateur
Définition de la position absolue de l'image par rapport au
coin supérieur gauche du cadre de la page
ce webbot indique (pour FP) ne ne pas s'occuper du code suivant
OnMouseOver, spécifie l'action à faire quand la souris
passe sur l'image
OnMouseOut spécifie l'action à faire quand la souris sort de l'espace de l'image
Fin du WebBot
Fin de page |
- Pour le besoin de la page nous avons 4 images contact.gif,
contact_hit.gif, webmaster_hit.gif, webmaster.gif. Pour vos tests vous pouvez les
télécharger en cliquant sur les noms.
- Ce script est très simple, il faut faire attention à bien
spécifier les noms des images dans l'appel preload, de
spécifier l'endroit exact de l'image #imgDiv1 {position:absolute;
left:150 ; top:200;} et #imgDiv2 {position:absolute; left:550
; top:200;} et de respecter la syntaxe du code.
|