Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript Les couches ou layer

Les couches ou layer

9 réponses
Avatar
l'atelier Ho
Bonjour à tous,

Je dois résoudre le problème suivant:
L'utilisateur doit pouvoir choisir des images dans des
groupes différents. Les images ont exactement les mêmes
dimensions.
Chaque groupes appartient à une couche ou layer. Lorsque
l'on clique sur une image réduite, celle-ci doit s'afficher
immédiatement dans le niveau de la couche a laquelle elle
appartient.

Je sais qu'en javascript, qu'il existe les layers
(makelayer()) et en html les couches du genre:

<div style="position: absolute; width: 300; height: 300;
z-index: 3; left: 150; top: 20; right: 150; visibility:
hidden" id="aiguilles">
<img border="0" src="labase.gif"></div>

Avant que je lance à fond dans la réalisation de ce module,
y a t'il quelqu'un qui aurait déjà un peu d'expérience à
partager pour ce genre de réalisation?

Vu que le catalogue des images provient d'un base MySQL,
serait-il plus simple de tout faire en PHP!

Meilleures salutations

Otto
Signaler un problème avec ce contenu

9 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
Julien Plée
Je n'ai pas bien compris votre problème.

Les couches se situe les unes en dessous des autres (z-index différents) ?
Les images réduites se situent-elles sur chaque couche ?
Comment l'utilisateur clique sur l'image réduite ? Fait-elle partie d'une
liste à part (hors chouches de destination) ?

Pour ce genre de problématique, je conseillerais la génération HTML à la
volée.
C'est à dire que vous disposez d'une liste d'image situées dans un conteneur
à part entière. Vous disposez d'un conteneur qui servira de support de
destination.
Par la suite, nul besoin de créer plusieurs conteneurs, il vous suffit de
changer l'image dans le conteneur de destination.
Pouvez vous mettre à disposition une mise en page simple de votre idée ?
(sans javascript inclus si possible)


Julien
Avatar
Pierre Goiffon
"l'atelier Ho" a écrit dans le message de
news:
Je dois résoudre le problème suivant:
L'utilisateur doit pouvoir choisir des images dans des
groupes différents. Les images ont exactement les mêmes
dimensions.
Chaque groupes appartient à une couche ou layer. Lorsque
l'on clique sur une image réduite, celle-ci doit s'afficher
immédiatement dans le niveau de la couche a laquelle elle
appartient.


Pourquoi ne pas simplement travailler avec la propriété src d'une image ? Il
faudra par contre bien veiller à précharger toutes les images, mais c'est
tout à fait faisable, très supporté et simple !

Avatar
Julien Plée
"l'atelier Ho" a écrit dans le message de
news:
Je dois résoudre le problème suivant:
L'utilisateur doit pouvoir choisir des images dans des
groupes différents. Les images ont exactement les mêmes
dimensions.
Chaque groupes appartient à une couche ou layer. Lorsque
l'on clique sur une image réduite, celle-ci doit s'afficher
immédiatement dans le niveau de la couche a laquelle elle
appartient.


Pourquoi ne pas simplement travailler avec la propriété src d'une image ?
Il

faudra par contre bien veiller à précharger toutes les images, mais c'est
tout à fait faisable, très supporté et simple !



Je crois que tous les navigateurs ne prennent pas en compte le change de
src... aussi il faut peut-etre créer une nouvelle image (new Image() ou
document.createElement('img')) et attribuer le src.
Sinon, si les images réduite sont les originales, il n'est pas forcément
utiles de les précharger.
Autrement, ce qu'il est possible de faire, c'est un Array d'images à
chargement séquencé (chargement de l'image suivante quand Onload survient).


Avatar
Pierre Goiffon
"Julien Plée" a écrit dans le message de
news:cb8poa$6f4$
Pourquoi ne pas simplement travailler avec la propriété src d'une
image ?


Je crois que tous les navigateurs ne prennent pas en compte le change
de src...


Euh, j'ai fais marcher cela sur Netscape 3 si mes souvenirs sont bons, alors
je serai étonné que ça ne fonctionne pas sur certains navigateurs. Avez vous
des exemples ?

Sinon, si les images réduite sont les originales, il n'est pas
forcément utiles de les précharger.


C'est la taille en octets des images qui va déterminer cela. C'est étrange
de cliquer et de ne rien voir se passer pendant plusieurs secondes...


Avatar
Julien Plée
Je crois que tous les navigateurs ne prennent pas en compte le change
de src...


Euh, j'ai fais marcher cela sur Netscape 3 si mes souvenirs sont bons,
alors

je serai étonné que ça ne fonctionne pas sur certains navigateurs. Avez
vous

des exemples ?


Je ne m'en souviens plus... de toute facon, soit c'est une version d'IE,
soit de Netscape (inclus Moz)... l'un d'eux ne prennait soit pas en charge
les changements de "src" soit la taille des images peut-être... bref, ayant
voulu faire une visionneuse, je m'étais trouvé bien ambarassé et dans
l'obligation de trouver des subterfuges détournés pour parvenir à mes fins
;)

Sinon, si les images réduite sont les originales, il n'est pas
forcément utiles de les précharger.


C'est la taille en octets des images qui va déterminer cela. C'est étrange
de cliquer et de ne rien voir se passer pendant plusieurs secondes...


C'est pour ça que j'ai précisé 'sont les originales' ;o)
Ceci dit, il ne se passerait pas vraiment rien... puisque la petite icone du
navigateur batifole joyeusement :D


Avatar
Pierre Goiffon
"Julien Plée" a écrit dans le message de
news:cb91r1$hlr$
Je crois que tous les navigateurs ne prennent pas en compte le
change de src...


Euh, j'ai fais marcher cela sur Netscape 3 si mes souvenirs sont
bons


Je ne m'en souviens plus... de toute facon, soit c'est une version
d'IE, soit de Netscape (inclus Moz)... l'un d'eux ne prennait soit
pas en charge les changements de "src" soit la taille des images
peut-être...


Les tailles en pixels étaient indiquées comme toutes identiques, d'où ma
réponse. Les propriétés width et height sont en effet read-only.



Avatar
Julien Plée
Les tailles en pixels étaient indiquées comme toutes identiques, d'où ma
réponse. Les propriétés width et height sont en effet read-only.


Ormis à la création d'une nouvelle image semble-t-il. D'ailleurs, je crois
qu'en fait, elles ne sont pas particulièrement en lecture seule, mais un des
navigateurs n'adapte simplement pas la taile de la nouvelle image.
Pis tant qu'à concevoir un projet, autant y inclure les possibles évolutions
:) (surtout que suivant l'objet des images en question, il est fort possible
de tomber un jour ou l'autre sur une image qui ne soit pas de la même
taille)


Julien

Avatar
l'atelier Ho
Bonjour Julien

Les couches se situe les unes en dessous des autres (z-index différents) ?

Oui


Voici un lien:
http://www.jossmontres.ch/atelier/
J'ai vite basardé un mini exemples sur le web...
Attention j'affiche juste les couches comme teste. Voir source (IE click
droite). La sélection ne fonctionne pas. J'attends les images.
Les images seront du type GIF transparents.

Les images réduites se situent-elles sur chaque couche ?

Non elle seront dans une "frame" séparée pour le choix resp. sélection.


Pour ce genre de problématique, je conseillerais la génération HTML à la
volée.
C'est à dire que vous disposez d'une liste d'image situées dans un conteneur
à part entière. Vous disposez d'un conteneur qui servira de support de
destination.
Par la suite, nul besoin de créer plusieurs conteneurs, il vous suffit de
changer l'image dans le conteneur de destination.

Je vais suivre cette idée


Pouvez vous mettre à disposition une mise en page simple de votre idée ?
(sans javascript inclus si possible)

Voir le lien ci-dessus!


Merci aussi aux autres qui ont lu cette branche pour leur aide.

Meilleures salutations

Otto

Avatar
Pierre Goiffon
"Julien Plée" a écrit dans le message de
news:cb92s6$id$
Les propriétés width et height sont en effet
read-only.


je crois qu'en fait, elles ne sont pas particulièrement en lecture
seule


Lire la ref Netscape :
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/image.html#1193681