begin process at 2012 05 28 10:39:04
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Graphique

 > IMAGES RÉACTIVE !!

IMAGES RÉACTIVE !!


 Information sur la source

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

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Graphique Niveau :Initié Date de création :26/07/2001 Vu / téléchargé :27 161 / 1 783
Auteur : pi0up51

Ecrire un message privé
Site perso
Commentaire sur cette source (4)
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

Les Membres Club peuvent 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

EVENT HANDLER (INFO-AIDE FORMULAIRE + QQS FONCTIONS)
FRACTALE MANDLEBROT (GÉNÉRER EN JS AVEC BOUCLE FOR..)
POPUP QUI AFFICHE LE TEMPS DE CONNECTION SUR UNE PAGE ;)
INFOBULLE SOUS IE ET/OU NETSCAPE
DESSINER UN HISTOGRAMME (DYNAMIQUEMENT ! :)
Toutes les sources de pi0up51

 Sources de la même categorie

Source avec Zip JDMATH-MINI.JS : GÉNÉRATION D'EXPRESSION MATHÉMATIQUE par jdmcreator
Source avec une capture SPHERE 3D DÉFORMABLE par phm
Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111
Toutes les sources de la catégorie Graphique

Commentaires et avis

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

Commentaire de DarkGhost957 le 13/05/2006 09:36:06

Merci pour ce script pioup51!!!

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

Commentaire de jose1955 le 12/03/2009 12:36:37

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

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


Archos Tablette PC ARNOVA ARNOVA 10 4GB
Entre 200€ et 210€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), 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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,437 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)