Cartes d'image HTML et préchargement d'images

Question

J'ai créé une carte d'image HTML assez ancienne. Lorsque vous passez la souris sur une balise de zone, une autre image est chargée et remplace la totalité de la map. En tout il y a 30 images de mouseover et pour éviter le retard de chargement, je les ai préchargés en utilisant jQuery.

Le panneau Firebug Net affiche toutes les images en cours de chargement à pageload (pas encore de survol de la souris). Maintenant, quand je souris sur une zone, firebug montre que cette image est demandée une deuxième fois. Ceci malgré le fait que je vois clairement le nom de fichier quelques lignes plus haut dans firebug.

Est-ce un comportement normal? Il semble que le préchargement fonctionne ... mais le survol envoie toujours une requête au serveur pour obtenir l'image résultant en un délai de 1 à 2 secondes avant l'échange des images.

Ceci est tout le html droit, aucun AJAX impliqué.

Thx

Answer 1

Vous avez probablement besoin de modifier la configuration de la mise en cache sur votre serveur web afin que le navigateur ne sait pas retélécharger les images.

Answer 2

Voyez-vous le délai de 1-2 secondes lorsque Firebug n'est pas ouvert? J'ai eu des problèmes similaires et je n'ai jamais pu vraiment dire si elle demandait à nouveau l'image. Je ne verrais pas une nouvelle demande lors de la queue mes journaux non plus. De plus, je n'ai jamais vu ce comportement en regardant à travers l'inspecteur de Safari, donc je l'ai marqué à Firebug.

Answer 3

Il est possible de créer une liaison d'image à plusieurs pages dans une image particulière sur une partie particulière.

Ceci est appelé mappage d'une image en Html.

Vous spécifiez simplement quelles zones de l'image doivent être liées à où.

Dans l'exemple ci-dessous, si vous placez la souris dans le coin supérieur gauche, elle est liée à xyz.com .... et dans le coin inférieur droit .... elle est liée à abc.com.

<img src="test.jpg" usemap = #example border=0> 
<map name=example> 
<area shape=Rect Coords=0,0,29,29 Href="http://www.example.com"> 
<area shape=Rect Coords=30,30,59,59 Href="http://www.example.com"> 
</map> 

Dans l'exemple ci-dessus, nous n'avons utilisé que des mappages d'image rectangulaires. Nous pouvons utiliser des formes différentes comme cercle ou tri formes possibles: