Images intuitive

[Sarc]

Bonjour à tous,

Je vais avoir sur un de mes sites une quinzaine de plans de quartiers, avec environ 100 propriétés par quartier... J'aimerais que quand on cible une propriété particulière, l'image change (par exemple que la propriété ciblée devienne bleue). En Flash, ça serait sûrement très simple et bien plus joli, mais je ne connais pas Flash et je n'ai pas de quoi m'offrir un flasheur pour l'instant...

Donc j'aimerais le faire en PHP et CSS. Mais en comptant bien, ça fait 100*15 = 1500 images minimum, et vu que la couleur de surlignage risque de changer suivant quelques attributs de la propriété, ça me ferait des milliers d'images...

Vous voyez le problème.

Quelle serait la meilleure solution à votre avis ? :/ Propre, rapide, et peu coûteuse..

[TheRec]

Bonjour,

J'ai récemment vu un nouvel exemple "d'imagemap" de Stu Nicholls et j'ai trouvé cela bien fait... peut-être que cela t'aidera... l'idéal serait de rester sémantique en ayant une lise à puce pour chaque zone de ton image, cet exemple va dans ce sens. Il y a d'autres exemples sans le "popup" (inline) sur le même site dans la section "Demos" sous "Demos - Image maps".

Bonne chance.

[Sarc]

Salut

C'est moyennement sémantique, ce qu'il propose tout de même...

<b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b><b class="xb5"></b><b class="xb6"></b><b class="xb7"></b>

Et puis il charge une nouvelle image à chaque zone survolée, donc lui, vu qu'il a peu de zones, il peut se permettre de faire télécharger 4 images en plus, mais moi, sachant le nombre de possibilités différentes, je serais obligé de stocker un nombre incroyable d'images, ou de les créer en GD, ce qui serait pas forcément rapide non plus...

En GD, on peut se permettre de créer 100 images d'un coup, à chaque appel du script ?

[TheRec]

En fait le code que tu cites c'est pour réaliser les arrondis des boîtes qui apparaissent, effectivement ce n'est pas sémantique, mais cet exemple n'est pas à prendre tel quel... "l'imagemap" à proprement parler est sémantique, il me semblait que c'était ce que tu cherchais

Concernant le reste du code qui n'est pas très propre il peut être épuré si la compatibilité avec IE5.5 est négligée.

Concernant le chargement des images supplémentaires, si tu as une autre technique fais-moi signe... je ne vois pas d'autres solution si tu veux appliquer un "effet graphique" (autre que changer le style de l'élément... car ce n'est certainement pas ce type de

"surlignage" que tu recherches) à une image sans charger une autres image.

Peut-être que si tu as tant de zones à gérer c'est que tu as une erreur de conception, ne peux tu pas décomposer ton problème en plusieurs sous problèmes ? Par exemple, si ton but est de présenter beaucoup de lieux sur une carte, tu peux commencer par une carte avec des régions, puis présenter les lieux pour la région sélectionnée.

Finalement je ne vois pas l'intérêt de générer des images à chaque appel d'un script si elle ne changent pas d'un appel à l'autre... mais comme je ne connais pas les détails de ton implémentation mais à priori si tu dois fait générer ces images à chaque appel du script ce n'est pas la bonne solution, comme tu le dis au niveau des ressources et à plus forte raison au niveau du temps d'exécution

[Sarc]

Effectivement, à côté de la plaque pour le code... Je devrais réfléchir un peu avant de poster n'importe quoi

Il n'utilise pas vraiment l'imagemap mais une liste avec des divs imbriqués... Enfin, ça fait très trafiqué je trouve, quand je vois un code avec plein de hacks Internet Explorer :

<li id="moon"><a href="#nogo" class="tl">MOON<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="xsnazzy">

M'enfin bon, le problème des div's est également la forme : elles sont forcément carrées, alors que j'ai besoin réellement de "map + area" pour ce dont j'ai besoin.

Et j'ai environ 100 zones par quartier, j'ai déjà découpé en sous-quartiers, mais je veux pas encore plus découper... Ensuite, il faudrait pas mal de liens pour arriver à l'essentiel, je trouverais ça dommage.

Le problème c'est que la balise <area> accepte parfaitement l'attribut "style", mais avec quelques tests, je me rends compte qu'aucun style ne peut y être appliqué... Dommage, ça me plairait de pouvoir appliquer un autre fond coloré, et un contour sur mes Area, ça serait parfait.

Mais ça ne marche pas..

Pour la génération des images, je risque de les créer en GD, de les garder en cache, et de regénérer uniquement si l'image doit être différente.. En effet le fond de la zone doit changer suivant quelques données en base de données, et peut changer au cours du temps. D'où mon idée de générer en GD.

Enfin, la recherche n'est pas terminée...

[TheRec]

Il n'utilise pas vraiment l'imagemap mais une liste avec des divs imbriqués... Enfin, ça fait très trafiqué je trouve, quand je vois un code avec plein de hacks Internet Explorer :

<li id="moon"><a href="#nogo" class="tl">MOON<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="xsnazzy">

Concernant le reste du code qui n'est pas très propre il peut être épuré si la compatibilité avec IE5.5 est négligée.

C'est de cela dont je parlais... Ce ne sont pas des "hacks" se sont des commentaires conditionnels (la nuance est importante), enfin là n'est pas le sujet (le code produit pour Internet Explorer n'est plus sémantique).

Le système de cache est une bonne idée et c'est facile à mettre en place, une autre idée serait de positionner le texte qui change (je suppose que c'est du texte, sinon la suite n'est pas réalisable, ou du moins ne sera pas aussi profitable que le système de cache) au dessus de l'image grâce au positionnement absolu, mais cela va s'avérer fastidieux si tu ne trouves pas un moyen de générer tes zones dans une boucle

Par contre, le fait que tu aies besoin de zones "irrégulières" (qui ne sont pas carrées ou rectangulaires) sans recourir à un vrai "imagemap" (balise (x)HTML : <map>, <area>, <shape>, etc.), au vu des limitations de mise en forme, pose un problème... la seule solution que je connaisse n'est absolument pas sémantique et fastidieuse (pour une zone déjà) donc elle ne te conviendra pas.

Bref, je ne vois pas réellement de solution en (x)HTML/CSS qui convienne à toutes tes exigences, désolé de ne pas pouvoir plus t'aider.