11-05-2016, 09:13 PM
(11-05-2016, 08:55 PM)LOmniscient a écrit : Bonjour,
Je suis actuellement en train de travailler sur ma carte interactive.
Pour l'instant j'en suis au découpage des régions. En gros la carte sera divisée en 6 et au survol des différentes régions la partie en question s'illuminera.
J'ai déjà réalisé quelque chose de ce genre, mais pour le faire j'ai copié 6 fois mon image de carte initiale, et lorsqu'on passe au survol d'une zone définie par un <map></map> et des <area/> avec coordonnées, ça remplace l'image inititiale par une autre image de la carte dans laquelle j'ai illuminé la zone survolée.
Le problème de cette méthode, c'est que je duplique l'image 6 fois, alors que je pourrai me contenter de récupérer que certaines parties de l'images à illuminer, en les affichant à l'endroit exact de l'élément dans l'image (via la position indiquée dans area).
Y-a-t-il un moyen du coup d'optimiser en ne rechargeant que les parties en surbrillance plutôt que de remplacer l'image de base par la même image en illuminant la partie survolée ? Voire même, avec le area et je JS, de directement modifier la luminosité d'un seule partie de l'image. (A la façon d'une sélection dans un logiciel de graphisme qui permet de n'illuminer que l'intérieure de la sélection).
Ou tout autre méthode qui soit la moins loudre possible.
Merci d'avance aux graphismes(oh grand @alucard, viens m'éclairer de ton savoir)
Hello !
J'avais ce système sur les premières "maquettes" de mon projet (j'ai retiré cette option suite à la révision générale de mon design)
Je ne sait pas si c'est la meilleure option mais voila comment j'ai procédé :
l'image que j'affichais à chaque survol faisait la même taille que l'original, mais elle ne comportais que la partie survolé en clignotement (gif), le reste étais un fond transparent, ce qui fait que l'image étais moins lourde que charger à chaque fois l'original.