|
 Trouver une ressource
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
 IMAGES RÉACTIVE !!
 Information sur la source
 Description
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
- <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>
<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
 Fichier Zip
Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !
 Télécharger le zip
 Sources du même auteur
 Sources de la même categorie
 Commentaires et avis
|
|