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

Catégorie :Graphique Niveau : Initié Date de création : 26/07/2001 Vu / téléchargé: 20 779 / 1 422

Note :
6,67 / 10 - par 3 personnes
6,67 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (3)
Ajouter un commentaire et/ou une note

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

Commentaires et avis

signaler à un administrateur
Commentaire de retraite le 16/12/2004 19:53:54

Bonjour,
J'essaie de faire un petit programme avec une carte sur laquelle j'effectue des zooms.
L'image principale suit bien les coefficients appliqués mais je n'arrive pas à appliquer ces coefficients aux coordonnées (coords)
Est il possible de changer ces valeurs en fonction de "coeff"

<div align="left">
<a name="img"></a>
<a href="#img"><img src="Totale2.jpg" border="0" name="image" USEMAP="#Carte"></a></div>

<MAP name="Carte">
<area shape="rect" coords="91,118,122,139" href="Mexico/page_01.htm">
</map>

<script language="JavaScript">
<!--
//PLF-http://www.jejavascript.net/
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);

Merci par avance si vous connaissez la réponse.

A G

signaler à un administrateur
Commentaire de DarkGhost957 le 13/05/2006 09:36:06

Merci pour ce script pioup51!!!

signaler à un administrateur
Commentaire de OneWAY le 30/12/2006 18:17:21

Oui c'est pas mal ton truc là, mais c'est pas ce que je cherchais... sinon, j'ai une petite remarque à faire...
A la belote, il n'y a pas de 4, ni de 5... Voilà bonne journée...

<!-- L'art d'être chiant pour pas grand chose -->

Ajouter un commentaire



Nos sponsors

Sondage...

CalendriCode

Novembre 2008
LMMJVSD
     12
3456789
10111213141516
17181920212223
24252627282930

Consulter la suite du CalendriCode



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,343 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.