On peut déjà en HTML réalisé des images réactives, mais en Javascript elles deviennt plus facile à gérer.
En HTML, il y a la balise AREA mais grâce au Javascript, grâce au événements MousOver et Mouse Out, on peut faire réagir la page au survol des images !!
Les actions peuvent être multiple (chargement d'un son, d'une autr images, d'une pop-up,...)
Source / Exemple :
<html>
<head>
<title>Démo d'utilisation d'Images réactives..exploitation de l'évènement MouseOver</title>
<script language="JavaScript"><!--
/******* Préchargement des images des 4 textes bleu..
var ima=new Array(4); // création d'1 tableau d'objets Image
for (var i=0;i<4;i++)
{ ima[i]=new Image();ima[i].src='club_'+i+'.gif';}
function flip(n)//****Pour changer les images de textes
{
document.images['club'].src='club_'+n+'.gif';
/**** Remarquez ci-dessus qu'il est possible et même recommandé de préciser
entre les crochets du tableau 'images' non l'index des images mais leur nom :
( propriété NAME de leur balise <IMG..>) Impératif lorsque les images sont
insérées dans des tables HTML... *******************************************/
}
//-->
</script>
</head>
<body bgcolor="#ffffcc" text="blue" >
<h1 align=center><i><u>Association sportive du Centre</U></I></h1>
<table width=100% border=0>
<tr valign=middle><td align=right width=50% >
<font size=+1 color=gray><b><i><u>Nous vous proposons d'adhérer au ...</U></I></B></font>
</td><td ><img src="transpar.gif" NAME="club" width=154 height=20 align=middle>
</td>
</TR>
</TABLE>
<center>
<br>
<hr width=50% size=3>
<br>
<MAP name="site">
<!--
- Si vous souhaitez utiliser dans vos pages cette structure ,
les balises HREF restent à renseigner en plaçant le nom des pages
que ces liens doivent appeler en lieu et place des '#'..!
-->
<AREA shape="poly" coords="1,13,2,45,22,73,31,114,6,140,11,158,42,119,68,118,79,129,88,123,64,80,83,64,77,55,69,59,43,24,25,22,14,11,2,12"
href="#" onMouseOver="flip(0);" >
<AREA shape="poly" coords="115,9,80,36,96,109,158,123,179,72,152,4,115,9"
href="#" onMouseOver="flip(1);" >
<AREA shape="poly" coords="173,111,158,128,128,187,121,211,128,228,150,228,218,205,213,176,185,146,189,115,181,109,173,111"
href="#" onMouseOver="flip(2);" >
<AREA shape="poly" coords="36,130,22,166,27,216,101,220,114,200,111,163,101,120,64,144,58,127,36,130"
href="#" onMouseOver="flip(3);" >
</MAP>
<IMG src="globale.gif" width=219 height=229 border=0 USEMAP="#site">
</center>
<center>
<font size=-2 color=gray face="Verdana,Arial"><b>Programme Démontrant comment exploiter les Images Réactives en JavaScript</B></font>
</center>
</body>
</html>
Conclusion :
NB : télécharger le zip car à, il vous manque les images !!
Voilà, sinon c pas très difficle à comprendre, je vous fais confiance !!
bonn' prog à tous
@++
pi0up51
www.infobox51.fr.st
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.