Sujet : pré chargement image map

Bonjour

j'ai un site avec une carte, et 20 quartiers, en index de ma page.
Le principe est classique, quand on passe sur un quartier, la couleur change, c'est à dire qu'une autre image s'affiche.
Le problème c'est que ces images sont assez lourdes et donc quand on passe la souris, il se passe un certain temps ( de l'ordre de la milliseconde ) mais assez visible avant que l'image ne se charge.
Je cherche donc un plug in qui précharge ces images en amont, comme cela, dés que l'on passe sur un quartier, il change de couleur trés rapidement.

Je précise qu'il n'es pas possible de faire une image en sprite, car elle bugge sur les navigateurs de certains téléphones mobiles ou tablettes, car elle est trés grande ( + 10 000 pixels de large ).
J'ai donc été obligé de couper cette image et d'en faire 20 qui s'affichent uniquement au passage de la souris.

Merci de vos idées !

Re : pré chargement image map

Le plus simple , sans pluggin, ni autre technique bizzares ...

C'est de creer un div de 1px sur 1px , tu place tes 20 images dans ce div , et passe ce div (via css) en overflow hidden, opacity :0 .
Pas de display none cela ne chargera pas les images !

Tu place ce div en haut ou en bas de page ou là ou ca te convient de façon a ne pas rompre l'alignement de tes div car le opacity 0 contrairement au display non va occuper le 1px de large et pourrais decaler d'autre div .

avec cette technique tes images sont réellement chargée mais simplement invisible , tu peut ensuite les utiliser sur ta map sans soucis.

Re : pré chargement image map

Merci pour ta réponse hyper rapide ;-)
Il me semble comprendre ton idée...mais je t'avoue que je suis pas expert dés qu'on commence à rentrer dans trop de technique.
Je vais essayer de faire ce que tu dis et je reviens vers toi

Re : pré chargement image map

bon je suis en train de tester
j'ai créé une div

<div class="img_index">
          <img src="img/map/base0.png" width="459" height="477" />
        </div>


j'ai mis ca dans le css

.img_index{
    width:1px;
    height:1px;
    overflow:hidden
    opacity:0;
}


mais le problème c'est que l'image s'affiche...d'ou vient la boulette ?

Re : pré chargement image map

Modifie le css par :

.img_index, .img_index img{
    width:1px;
    height:1px;
    overflow:hidden
    opacity:0;
}

Ca devrait marcher

Re : pré chargement image map

Re : pré chargement image map

Quand je regarde dans tes css , tu n'a pas mis sur le FT¨P le code du css , c'est pour cela que les images s'affichent ...

Re : pré chargement image map

et si malheureusement, il est bien uploadé...mais sur les navigateurs, il n'y est pas, c'est ce que je t'expliquais, je ne comprends pas comment ça se fait.
Car sur le serveur FTP il y est bien
Ca me fait ca depuis quelques jours, il faut attendre ...je ne sais pas de quoi ca peut venir...

Re : pré chargement image map

Ca y est le navigateur le prend en compte, le CSS est actualisé.
Ca parait marcher...
Je te remercie! smile

10

Re : pré chargement image map

Avec plaisir !