18073 sujets

Questions générales et questions de débutants

Image mouvante

Bonjour,


voici un problème qui ne me semble pas simple à résoudre. Smiley cligne

De la même manière que pour les rollovers à image unique, je souhaite précharger l'image d'une carte de de 2000px sur 2000px et ne faire apparaitre qu'une portion de 500px sur 500px centré sur ma page. L'intéractivité, par des boutons sur les quatre côtés du cadre, permettrait de modifier la portion visible par un slide progressif tant que la souris reste sur le bouton et de stabiliser la nouvelle portion de carte visible en retirant la souris du bouton. Comment faire ? Est-ce possible en CSS ? en PHP ?


Merci d'avance.
Je vais peut-être dire une énormité, mais... dans ce cas, pourquoi n'utilises-tu pas tout simplement un iframe dont tu spécifies la largeur et la hauteur? Comme ça, tu n'as même pas besoin de mettre des boutons et de charger avec du JavaScript, puisque tu as d'office des barres de défilement...

... À moins que tu ne veuilles une interface bien léchée Smiley cligne
Gilles a écrit :
... À moins que tu ne veuilles une interface bien léchée Smiley cligne


Oui Smiley cligne , en fait je souhaiterai éviter les scrollbar et visualiser la portion de carte dans un <div>.
Bonjour.
En javascript, c'est faisable.
En CSS, je ne sais pas.
En php, oublie(à moins que le glissement ne soit pas progressif).
Essaie le flash.
Bon courage...
Modifié par Ralfman68 (31 Mar 2006 - 19:27)
Pour le flash, je ne connais pas, et je ne souhaite pas développer cette partie en flash. Je connais un peu javascript, un peu PHP et très peu CSS.
Sinon, au pire le glissement ne sera pas progressif, si je dois le développer en php. Smiley ohwell
Bonsoir,
En php, ça va carrément recharger la page à chaque fois, puisque PHP est éxécuté par le serveur. L'avantage est que tu pourrais découper l'image pour ne télécharger que la partie visible à chaque fois. Celà dit, le traitement d'image en PHP n'est pas ce qu'il y a de plus simple.

Avec flash tu aurais l'avantage d'avoir une possibilité de format vectoriel, donc potentiellement plus léger qu'une image bitmap. Par contre ça ne sera pas accessible aux personnes n'ayant pas le plugin flash.

Avec javascript et CSS, ça peut marcher, par contre le temps de chargement d'une image de 2000px de côté n'est pas négligeable.

Personnellement je mettrais l'image dans un bloc avec "overflow: auto" ce qui permet d'avoir les scrollbars même sans javascript, puis avec javascript je redéfinirai la propriété overflow pour lui donner la valeur hidden ( ce qui supprimera la scrollbar pour les gens ayant javascript ), et changerais les valeurs de scroll au clic sur un bouton. En prenant soint d'avertir le visiteur que le chagement rique d'être long.

Ensuite tu peux aller encore plus loin en utilisant javascript et éventuellement AJAX pour découper ton image en tranches et n'afficher que celles qui sont visibles, comme fait google maps. Masi c'est plus difficile à rendre accessible Smiley cligne
Ok, compris pour le problème que pourrait poser l'utilisation de php.
En fait, je ne peux pas découper l'image en morceaux pour faciliter le chargement. Le programme suivant, la demande, charge une image de 2000*2000px parmi plus de 100 autres de même taille, alors je ne peux pas les traiter individuellement en amont pour les diviser en morceaux. Smiley decu
Pour flash, voilà le problème et le plugin et je dois faire le programme sans ajout de plugin, donc pas de flash. De plus, je dois développer pour mac et pc.
Pour le temps de chargement, c'est pas un problème, vu que la taille de l'image est imposée.
Je vais voir pour overflow

Jamais entendu parler d'AJAX Smiley rolleyes
Merci pour le lien, très intéressant . Smiley biggrin
Sinon, pour "overflow", j'ai testé mais je perd la posibilité de projeter des points en <div> sur la carte. Si j'utilise "overflow", comment faire suivre en parallèle les <div> d'après le mouvement de la scrollbar ?
"...changerais les valeurs de scroll au clic sur un bouton", comment fait-on ? Smiley lol
Sujet clos
Aller à