Superposer des images

Le premier forum francophone sur l'éditeur de pages Web multiplateforme (Linux, Mac OS X, Windows) qui monte… KompoZer, héritier de Nvu, permet de créer vos pages Web graphiquement (wysiwyg) sans aucune connaissance du langage HTML.

Modérateur : chinon37

voldi
Arias
Messages : 2
Inscription : 12 avr. 2012, 15:50

Superposer des images

Message par voldi »

Bonjour,

J'essaye de superposer des petites images (1x1cm) sur une grande (21x29.7cm), et je souhaiterais que les petites images et un lien vers une autre page...
ma grande "image" est un plan sur lequelle je veux mettre des repères qui enverrons l'utilisateur vers d'autre liens...

je n'arrive pas à superposer 2 images?

Merci de vos conseils
cordialement
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Re: Superposer des images

Message par Ymai »

Bonjour
L'idée de travailler avec des cm doit sans doute être oubliée au profit des px.

Une solution simple pour résoudre le problème pourrait être de définir un bloc <div> avec la grande image (dont on connaîtrait les dimensions en px) en image de fond. La taille dudit conteneur doit être ajustée à la taille de l'image de fond.
Rester attentif au fait que la résolution maximale en largeur est 1024px pour de nombreux utilisateurs (y compris sur les ultraportables et des tablettes).

Ensuite, chaque imagette peut être introduite *dans* ce conteneur <div> en précisant que sa position est "Relative" et en fixant cette position par rapport au bord gauche et au bord supérieur du conteneur.

Plus de précision est-il nécessaire?
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
voldi
Arias
Messages : 2
Inscription : 12 avr. 2012, 15:50

Re: Superposer des images

Message par voldi »

bonjour,

merci pour la eponse, en effet plus de precision est nécessaire car je n'ai pas une grande maitrise du sujet :shock:

Cordialement
atheo
Lézard vert
Messages : 181
Inscription : 03 févr. 2010, 15:45

Re: Superposer des images

Message par atheo »

Je vais peut être répondre à coté... Ça servira peut être à d'autres.

Mais si tu veux utiliser des zones de ton image principale (21x29.7 comme tu dis) il existe un logiciel (sans doute d'autres aussi) qui permet de "mapper" ton image et te renvoyer à des adresses que tu définis.

Exemple : sur une carte postale , tu définis la mairie, l'église, le café, ta maison ou celle de ta copine etc. et en cliquant sur cette partie tu te retrouves chez toi ou à l'église ou mieux au café du coin...

Il faut juste recopier un peu de lignes HTML dans ta propre page...

Ça se trouve là :

http://mhm.fr.nf/
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Re: Superposer des images

Message par Ymai »

C'est parti... Je propose un petit entraînement sur la base d'une page vierge, pour commencer.

L'image de fond
- Cliquer dans la page à l'endroit où doit venir la grande image couverte d'imagettes
- Dans la liste déroulante des structures, à gauche de la barre d'outils, sélectionner "Conteneur générique (div)"
À ce moment, dans la page, apparaît un bloc <div> que l'on reconnaît à son encadrement formé d'un fin liseré rouge (qui n'apparaît pas sur le document final.
- Dans la barre d'état, au bas de la fenêtre, apparaît aussi la balise correspondant à ce bloc que l'on vient d'introduire.
- clic du bouton droit sur cette balise <div>
- Dans le menu qui apparaît, choisir "Styles internes"
La boîte de dialogue des styles apparaît
- Dans l'onglet "Fond", cliquer sur "Parcourir" pour trouver la grande image... de fond. Il sera aussi nécessaire de connaître précisément la taille de l'image exprimée en pixels (largeur x hauteur)
- Dans l'onglet "Boîte", indiquer la largeur (Ex: 1024px) de l'image dans le champ "Largeur" et la hauteur dans le champ... "Hauteur" (ne pas oublier d'indiquer les unités, des px).
- OK
On se retrouve maintenant avec une page contenant un bloc dont l'image de fond est définie.
Dans ce bloc, on peut écrire du texte, par exemple. Ici, on va insérer des images et les positionner.
En principe, le curseur se trouve maintenant dans le bloc <div>. Si ce n'est pas le cas, cliquer sur l'image et vérifier que la balise <div> (en italiques, maintenant) apparaît bien en dernier dans la barre d'état, en bas de la fenêtre.

Une première imagette
- Dans le menu "Insertion" > "Image..."
- Sélectionner une petite image (1cmx1cm) et indiquer un texte alternatif
- OK
L'imagette doit se trouver en haut et à gauche du bloc <div>
- cliquer sur l'imagette
- Dans la barre d'état, la balise <img> (en italiques) devient visible derrière la balise <div>
- Clic droit sur cette balise <img> > Styles internes
- Dans la boîte de dialogue, remarquer que les dimensions (en px) sont indiquées dans l'onglet "Général"
- Dans l'onglet "Boîte" > Position > "Relative"
- Toujours dans cet onglet > Décalage > "Haut" > [indiquer la position en px où doit se trouver l'imagette par rapport au bord gauche de la grande image: Ex: 150px
- Idem pour la position par rapport au bord supérieur de l'image dans la zone "Gauche"
- Remarquer que l'imagette se positionne immédiatement à la position que l'on indique dès que l'on frappe une valeur suivie des unités (px). En bougeant la boîte de dialogue, on peut assez aisément positionner l'imagette au px près.
- OK

Imagette suivante
- Recliquer dans la grande image et vérifier que la dernière balise mentionnée dans la barre d'état est bien à nouveau <div>
- Recommencer la manœuvre précédente

Il existe des raccourcis possibles, mais ceci me semble être la description de la manœuvre complète en utilisant exclusivement l'interface graphique de KpZ. On pourra envisager les raccourcis après.
Merci d'indiquer où l'explication ci-dessus coince (le cas échéant).
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Invité

Re: Superposer des images

Message par Invité »

Merci pour toutes vos reponses, ce soir j'essaye la solution de ymai

Merci
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Re: Superposer des images

Message par chinon37 »

Bonjour,

La réponse de Atheo n'est point mauvaise non plus: il s'agit de définir des zones réactives (permettant de mettre un lien) sur ton image principale. En plus du logiciel proposé par Atheo, c'est faisable avec Gimp ou Libreoffice.
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
JPL30
Arias
Messages : 4
Inscription : 21 nov. 2018, 06:45

Re: Superposer des images

Message par JPL30 »

Bonjour, je suis parfaitement, tout au mois je pense, mais lorsque je fais - OK , il est noté que l'on se retrouve maintenant avec une page contenant un bloc dont l'image de fond est définie. Hors moi, aprés mainte tantatives je ne vois pas ma grande image (j'ai bien entré les Px), . Par contre à ce stade, j'ai poursuivi, la phase imagettes à l'air de bien se dérouler ! Je dois oublier quelque chose à quelque part ! mais quoi ?
Si vous aviez une idée ?
Merci d'avance
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 4 invités