Le point sur les techniques de remplacement d'image

Bonjour!

Je n'arrive pas à trouver une technique de remplacement d'image qui me convienne a 100% et j'aimerais votre avis. Je parle ici d'images qui sont mise dans le document html avec la balise img, pas d'un texte avec un fond.
Voilà les différentes techniques que j'ai utilisées jusque là:

Css:

Remplacer l'image par son bakground:

<ul id="h_menu">
    <li><a href="#" style="background-image: url(item1_h.gif)">
      <img src="item1.gif" class='hover' alt="Item 1" />
    </a></li>
    <li><a href="#" style="background-image: url(item2_h.gif)">
      <img src="item2.gif" class='hover' alt="Item 2" />
    </a></li>
    <li><a href="#" style="background-image: url(item3_h.gif)">
      <img src="item3.gif" class='hover' alt="Item 3" />
    </a></li>
</ul>

J'imagine que vous avez compris l'idée, je vous épargne les css, le probléme de cette technique est que si on désactive les images, au passage sur le lien l'attribut alt disparait également ce qui peut être génant pour un élément aussi important que le menu.

test : hover css

Remplacer l'image par une autre image:

Cette technique consiste a mettre nos deux images dans la balise a, et de basculer de l'une a l'autre via les css:

<style> 
#h_menu{list-style:none;}
#h_menu img{border:0px;height:100%}
#h_menu a .out{display:none}
#h_menu a:hover .hover{display:none}
#h_menu a:hover .out{display:inline}
</style> 

  <ul id="h_menu">
    <li><a href="#" >
      <img src="item1.gif" class='hover' alt="Item 1" />
      <img src="item1_h.gif" class='out' alt="Item 1" />
    </a></li>
    <li><a href="#">
      <img src="item2.gif" class='hover' alt="Item 2" />
      <img src="item2_h.gif" class='out' alt="Item 2" />
    </a></li>
    <li><a href="#">
      <img src="item3.gif" class='hover' alt="Item 3" />
      <img src="item3_h.gif" class='out' alt="Item 3" />
    </a></li>
  </ul>

Cette technique marche bien il faut juste un petit patch pour ie6, mais rien de méchant, par contre pour tout visiteur qui désactive la css, ou en a une autre, avoir deux titre égaux doit être perturbant, et si on met la balise alt que sur la premiére image on se retrouve dans le même cas de figure que dans l'exemple 1, sinon on peut mettre alt="Item 1 - hover".

test : hover css

Javascript:

Remplacer l'attribut source de mon image:

<script type="text/javascript">

function hoverImages(context){
  var imgHover = new Array()
  var img = document.getElementById(context).getElementsByTagName('img');
  for (I = 0; I<img.length; I++) {
   
    imgHover[I] = new Image()
    imgHover[I].src = img[I].src.replace(".gif", "_h.gif");

    img[I].onmouseover = function(){
      this.src = (this.src.indexOf("_h") == -1)? this.src.replace(".gif", "_h.gif"):this.src;     
    }
    img[I].onmouseout = function(){
      this.src = (this.src.indexOf("_h") != -1)? this.src.replace("_h.gif", ".gif"):this.src;    
    }
  }
}
</script>

  <ul id="h_menu">
    <li><a href="#" >
      <img src="item1.gif" alt="Item 1" />
    </a></li>
    <li><a href="#">
      <img src="item2.gif" alt="Item 2" />
    </a></li>
    <li><a href="#">
      <img src="item3.gif" alt="Item 3" />
    </a></li>
  </ul>

<script type="text/javascript">hoverImages('h_menu');</script>

Cette technique marche trés bien également seulement probléme elle oblige a avoir une image appelé image.gif et l'autre image_h.gif (ou image_hover.gif), bref que le début du nom de l'image soit identique, en effet le script ne vat pas chercher une nouvelle image mais transforme le nom de l'image presente.

test : hover JavaScript

Mon probléme c'est que souvent quand j'utilise le remplacement d'image c'est avec un filtre de spip qui permet de fabriquer des images avec une typo défini celon un texte avec gd2, c'est super mais ça crée des nom url complexe, ce qui ne permet pas d'utiliser cette technique, mon code js devient alors un truc un peu plus complexe comme:

function $(strId){
	return document.getElementById(strId);
}

function hoverImages(){

  var numImg = '3'
  var srcHover = new Array();
  srcHover[0] = "item1_h.gif";
  srcHover[1] = "item2_h.gif";
  srcHover[2] = "item3_h.gif";

  var imgHover = new Array();
  var imgOut = new Array();
  
  for (I = 0; I<numImg; I++) {
    imgHover[I] = new Image();
    imgHover[I].src = srcHover[I];
    imgOut[I] = $('item'+i).src;
    
    $('item'+I).onmouseover = function(){
      this.src = imgHover[this.id.replace("item", "")].src
    };
    $('item'+I).onmouseout = function(){
      this.src = imgOut[this.id.replace("item", "")]
    };
  }
}

En plus pour que ça marche il faut rajouter des id item0, item1, à chaque image.

test : hover JavaScript

Voilà donc ou j'en suis, que me recomenderiez vous? J'ai mis les test pour que vous puissiez tester avec differents navigateurs dans toutes les conditions possibles.
Modifié par matmat (28 Feb 2007 - 05:25)

Bonjour,

les astuces 1 et 2 sont en effet exclues (pas tout à fait pour les raisons invoquées, mais peu importe).

Le problème des techniques 3 et 4, en ce qui te concerne, ne réside pas dans la solution elle-même, mais dans le déploiement spécifique de l'outil de génération d'images, manifestement inapproprié, et qui nécessiterait d'être adapté à l'usage que tu en fait. Bref, c'est un problème de modification du filtre spip.

Excuse moi d'insister un peu lourdement mais pourrais tu me dire vite fait les raisons qui font que les solutions 1 et 2 sont exclues, j'aime bien comprendre le pourquoi de l'accessibilité, cela permet des fois d'appliquer les mêmes principes à d'autre problémes.
Modifié par matmat (28 Feb 2007 - 15:55)

C'est clair que de modifier le filtre de spip pour qu'il produise l'image a partir du texte ainsi que l'image version "hover" avec deux url semblable, serait l'idéal.

Dans tout les cas je comprend ton point de vue, il faut adapter le cms au contrainte d'accessiblité et non l'inverse.

Avant de marquer le sujet comme résolu (solution 3), j'aimerais savoir si quelqu'un à des remarques sur le js, elles sont les bienvenues.

Je pense que ça peut servir à tout le monde, c'est un probléme frequent, et la solution et trés simple, faire une image appelée image.gif et une autre appelé image_h.gif mettre le js et ça marche.
Modifié par matmat (28 Feb 2007 - 19:14)