Images réactive !!

Soyez le premier à donner votre avis sur cette source.

Vue 29 151 fois - Téléchargée 1 888 fois

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 / 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

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
1
Date d'inscription
mercredi 25 août 2004
Statut
Membre
Dernière intervention
12 mars 2009

bonjour
Votre zip ne se décompresse pas :
Message WZ22
WinZip® does not recognize the name of the specified program. For example, you will get this error if you specify XYZ.EXE as the name for LHA.EXE. WinZip lets you specify the drive and folder containing the program, but prevents the use of unsupported file names to prevent unexpected errors.

voila ....
Messages postés
19
Date d'inscription
jeudi 13 juillet 2006
Statut
Membre
Dernière intervention
25 septembre 2007

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 -->
Messages postés
1
Date d'inscription
vendredi 12 mai 2006
Statut
Membre
Dernière intervention
13 mai 2006

Merci pour ce script pioup51!!!
Messages postés
15
Date d'inscription
dimanche 22 décembre 2002
Statut
Membre
Dernière intervention
17 décembre 2004

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"



#img


<MAP name="Carte">

</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

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.