Designed by Maunakea !
179 en ligne   Boutique | Sites | Bar | Forum | PhpBB | Actu | Glossaire | Codes | Tips | Liens | Livres | Lettre  


 Recherche

 NewsLetter





   

JavaScript : Bascule automatique d'images

Remplacement d'images sans code ajouté au HTML





Derf
Le remplacement d'image (RollOver) est surement un des usages les plus répandus du JavaScript côté client. Le script que je vous propose permet de changer automatiquement les images survolées sans ajout de code dans le corps du document HTML.
Ce script a été testé et fonctionne avec MSIE 5.x/6.x, NN 6.x/7.x sous Windows et MacOS, et avec Opera 7.x sous Windows.

L'utilisation de ce script impose quelques contraintes au niveau du nommage des images et des attributs de la balise HTML 'IMG'.

Voir la demo
Télécharger le source et la démo



Pour chaque bouton nous devons avoir 2 images : une pour l'état par défaut et une autre pour l'état survolé. Ces deux images doivent porter le même nom (extension comprise) plus un identifiant que l'on ajoutera juste avant le point de l'extension pour l'image survolée.
Cet identifiant devra être le même pour chacune des images survolées de la page.
Exemple :
Bouton-image  1 - état défaut : forum.jpg
Bouton-image  1 - état survolé : forum_over.jpg

Bouton-image 2 - état défaut : glossaire.gif
Bouton-image 2 - état survolé : glossaire_over.gif
etc...
L'identifiant est '_over'. Cette règle de nommage des fichiers images constitue la première contrainte.


Tout d'abord, s’il s'agit de boutons, les images sont encadrées par des balises HTML 'A'. Ensuite il faut définir les balises 'IMG' et leurs attributs. Et c'est là qu'apparaît notre deuxième contrainte. En effet, hormis l'attribut 'SRC', nous devons définir un attribut 'NAME' qui sera identique pour chaque bouton-image et un attribut 'ID' qui lui sera différent pour chaque bouton-image.

Exemple :

<a href="www.asp-php.net/forum.php">
  <img src="forum.jpg" name="btn" id="forum" />
</a>
<a href="www.asp-php.net/tutorial/asp-php/glossaire.php">
  <img src="glossaire.gif" name="btn" id="glossaire" />
</a>

etc...


Comme on peut le constater, chaque bouton-image porte le même nom (btn) ce qui permettra à notre script de déterminer les images pour lesquelles notre bascule doit être active. Quant à l'identifiant, il est bien différent pour chacune de nos images, ainsi le script pourra les différencier.
Et les gestionnaires d'évènement dans la balise 'A' ?
On n'en a pas besoin ! C'est là que réside l'originalité de ces 'RollOver' et c'est ce que j'appelle un remplacement d'images sans code ajouté au HTML.



<script language="javascript" type="text/javascript">

  function fBascule(pnom,pmarqueur) {
  
    // Récupération de tous les ID des 'boutons-images' et
    // des adresses des fichiers images pour
    // les états over (survolés) et out (defaut).
    tabID = new Array();      // Stockage des Identifiants
    tabPictO = new Array();      // Stockage des Images Over (survolées)
    tabPictD = new Array();      // Stockage des Images Defaut
    
    for(i=0; i<document.getElementsByName(pnom).length; i++) {
      tabID[i] = document.getElementsByName(pnom).item(i).id;
      var vlURL = document.getElementsByName(pnom).item(i).getAttribute("src");
      tabPictD[i] = new Image();
      tabPictD[i].src = vlURL;
      
      // Extraction de l'extension du fichier (etat defaut) y compris le point
      var vlExt = vlURL.substring(vlURL.lastIndexOf('.'),vlURL.length);
      
      // Extraction du prefixe du fichier (etat defaut)
      var vlPre = vlURL.substr(0,(vlURL.length - vlExt.length));
      
      // Déduction et stockage du fichier de l'état Over
      vlURL = vlPre + pmarqueur + vlExt;
      tabPictO[i] = new Image();
      tabPictO[i].src = vlURL;
    }
    
    // Détection du type de navigateur pour l'activation des évènements souris
    flag = (window.Event)? true : false;
    // Vrai (window.Event) si Netscape ou Opera
    // Faux si IE (window.event pour IE)
    
    // Capture des évènements et redirection pour action
    if(flag) {
      document.captureEvents(Event.MOUSEOVER ¦ Event.MOUSEOUT);
    }
    
    document.onmouseover = fDocHandlerOver;
    document.onmouseout = fDocHandlerOut;
  }
  
  // Bascule des 'boutons-images'
  function fDocHandlerOver(e) {
    var vlElement = (flag)? e.target.id : window.event.srcElement.id;
    for (i=0;i<tabID.length;i++) {
      if (vlElement == tabID[i]) {
        window.document.images[vlElement].src = tabPictO[i].src;
        break;
      }
    }
  }
  
  // Restauration des 'Boutons-images'
  function fDocHandlerOut(e) {
    var vlElement = (flag)? e.target.id : window.event.srcElement.id;
    for (i=0;i<tabID.length;i++) {
      if (vlElement == tabID[i]) {
        window.document.images[vlElement].src = tabPictD[i].src;
        break;
      }
    }
  }
  

</script>
...
<body onLoad="fBascule('btn','_over')">
...
</body>


La fonction 'fBascule()' accepte deux arguments :
- pnom qui correspond au nom de chaque bouton-image défini par l'attribut 'NAME'
de la balise 'IMG' (dans notre exemple : btn).
- pmarqueur qui correspond au marqueur inséré dans chacun
des noms de fichier image survolé (dans notre exemple : _over).


C'est la méthode getElementsByName() du DOM1 qui nous permet de retrouver les images correspondant aux boutons et la méthode getAttribute() du même DOM1 qui récupère l'adresse de nos images.
La détection des évènements souris se fait par le biais de l'objet Event.
Ce script est limité aux navigateurs de génération 5 comme je l'ai indiqué en introduction mais il est perfectible.

Bon amusement.

Pour pouvoir écrire dans ce forum, identifiez-vous !

  v1.3p © ASP-PHP.net 2002  

Derf le 06/06/2004 (44 528 hits)
Didier 11 logiciels Microsoft GRATUITS dont Visual Studio 2008 Pro,
SQL Server 2005, Expression Studio, Windows Server 2003, Office project Pro, etc... !!!
Au fil des news  
Magazines - Le n°108 de Programmez est disponible
Adobe - Téléchargez gratuitement le dossier spécial Adobe
Magazines - Le N°107 de Programmez est disponible.
Créer une Feature d'administration sous SharePoint - Comment créer un composant d'administration
Dans les précédents articles, nous avons évoqué la création de pages personnalisées dans ...
PHP - Afficher une date : multilangage et relative
Agenda - Inscrivez-vous au WygDay [Wygwam] le 22/5 à Lille
Sync Framework - Introduction au MS Sync Framework - Installation
Microsoft, lors du Keynote du TechEd Europe 2007, a annoncé la mise à disposition d'un nouveau ...
Reporting Services et SharePoint - Utiliser SharePoint comme source de données
Dans un précédent article, nous avons pu apprendre comment créer un rapport utilisant une source de ...
JavaScript - Affiche un calendrier sous une zone de saisie
Adobe - Adobe lance la version bêta publique de Photoshop
Microsoft Expression Web - Premier contact
Je suis revenu des Techday's 2008 avec une idée en tête. Je voulais savoir comme travailler avec ...
PHP & MySQLi - de Hello / Sector One
Hello de Sector One propose un article avec PHP et MySQLi, la nouvelle extension de MySQL
VBScript - Zip de fichiers automatique et efface la source
Dreamweaver CS3 + Php + Mysql - Trucs et Astuces - Part 4 -
Pour changer, deux nouvelles astuces pour vous . Alternate Colors. Inscription et envoi de mail
Magazines - Le N°106 de Programmez est disponible.
Divers - Zone Webmasters
PHP5 - Classe de connexion à MySQL
Agenda - 20/03 : Boostez vos applis PHP-Windows Server 2008
Créer un thème graphique pour WSS V3 - Comment créer un thème graphique pour WSS V3
Nous avons vu dans un précédent article comment créer une master page. Il peut parfois être ...
Les plans de maintenance et SQL Server 2000 - Installer un plan de maintenance sous SQL Server
Dans le cadre de la gestion d'instances SQL Server 2000 hébergeant SharePoint, il est intéressant ...
PHP - PHP et MYSQL - MySQLi - PDO
Jeux de l'été (et de 4) - Un petit jeu de Mastermind
C'est reparti pour un tour... Il y avait longtemps que je n'étais pas venu vous proposer un petit ...
Migration WSS avec un Site Template spécifique - Migration WSS avec un Site Template spécifique
Les précédents articles nous ont permis de voir les différents modes de migration de WSS V2 vers ...
DataBase Upgrade de WSS V2 vers WSS V3 - Upgrade de WSS V2 vers WSS V3 par la DataBase
Parmi les trois modes de migration de Windows SharePoint Services V2 vers WSS V3, nous avons vu les ...
Création de module DotNetNuke en C# - Source : Jerome Fortias sap-integration.net
Je vous propose un nouvel article consacré au développement de modules pour DotNetNuke en C#. Il ...
ASP-PHP.net - On sera aux MS TechDays 2008 ! et vous ?
Créer son modèle de rapports SSRS - Créer son modèle de rapports Reporting Services
Après la création du modèle de style pour Reporting Services, il est souhaitable aussi d'avoir un ...
PHP - publipostage sur rtf préformaté avec mysql
Créer son style de rapports SSRS - Créer son style de rapports Reporting Services
Lorsqu'on travaille avec Reporting Services pour développer ses rapports, on veut très souvent ...
.NET - C#2 et ASP.NET 2.0 - Développez un projet de A à Z
SharePoint - MOSS 2007 - De l'intégration au développement
PHP - PHP 5 MySQL 5 AJAX
Découverte de Visual Studio 2008 -
Microsoft a annoncé, lors du TechEd'07 organisé à Barcelone, la mise à disposition de la release de ...
Adobe - Photoshop Elements 6 Version MAC
Adobe - Adobe sur Intergraphic 2008
Reporting Services et données XML - Utiliser des données XML dans Reporting Services
Une demande récente que j'ai reçue : Comment utiliser des données provenant d'un flux XML dans ...
Dreamweaver CS3 + XML + Ajax - Création d'une région détail
Dans cet article, je vais vous montrer comment utiliser la technique région détail, avec Spry
PHP - Jolie arborescence dynamique
Magazines - Le N°104 de Programmez est disponible
PHP - PhPBB 3.0.0 !!!
Tutorial : HTML | Scripting | ASP-PHP | ASP.net | SQL Server | XML
Sharepoint | XAML | Pocket | Dreamweaver | VML | Divers
  Scripts : Scripting | ASP-PHP | ASP.net | Divers
  Boutique | Annuaire | Bannières | Météo | Tribune | Partenariats
v3 © Didier 2003   
 

Corpo Sciences de Reims Partitions gratuites Carte, météo, annonces
 Wygwam TechNet CodePPC MVP DotNet Project El Roubio Codes Sources Groupes Utilisateurs Microsoft ASP-magazine The Inquirer FR