Antivirus offre spéciale - jusqu'à 60 % de réduction avec openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - insérer une image dans bloc de texte
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

insérer une image dans bloc de texte

 Répondre Répondre Page  12>
Auteur
Message
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Aug 14 2009
Pays: France
Status: Inactif
Points: 9364
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Sujet: insérer une image dans bloc de texte
    Envoyé : Mar 10 2014 à 10:23am
Bonjour à tous.

Il arrive souvent que l'on souhaite mettre du texte autour d'une image (à coté généralement).

Avant, on mettait l'image sur sa page, puis un bloc de texte simple ou multiligne. Mais parfois, le texte descend plus bas que l'image, et obligé dans ce cas la de recréer un autre bloc de texte placé en dessous de l'image de du premier bloc, et souvent, selon les navigateurs, un décalage pouvait survenir.

Alors les dernières versions d'OE, il s'avère qu'il est devenu possible de mettre directement l'image dans un bloc de texte.

Mon tuto en images donc.

Voila pour commencer, ce que cela donnait avec l'ancienne méthode.


Maintenant, cela va se simplifier.

Créer un bloc de texte multilignes.
Tapez (ou non votre texte) mais faites en sorte que le curseur soit dans le cadre.



Regardez ensuite votre menu du haut.
Si vous avez ce menu ci dessous, c'est que vous n'avez pas le curseur dans le bloc de texte.




Le menu doit changer comme ci dessous avec l'ajout d'un bouton insertion nommé "image" :




Cliquez donc sur le bouton "image", un pop up va s'ouvrir :



A partir de la, rien de bien compliqué.

pour insérer une image, cliquez sur "sélectionner une image"

Pour choisir le type d'alignement, faites défiler le menu déroulant de Alignement.
Les choix sont au haut du texte, au milieu du texte et en bas du texte.
Voila les positions selon les choix :

en haut du texte : 



Au milieu du texte :


en bas du texte (pour que cela marche, il faut IMPERATIVEMENT placer le curseur autrement qu'au début sinon, l'image sera au dessus et non en dessous):


Pour les autres options, vous pouvez spécifier différents types de flottement (par défaut, aucun, à gauche, à droite). Ces choix doivent être testés pour que vous puissiez voir une différence, mais rien de notable encore (vu le peu de tests réalisé dessus).

la partie la plus intéressante est plutôt la section "css ligne".
Cliquez dessus et vous aurez une nouvelle fenêtre qui apparaîtra :





Il apparaît donc que l'on peut choisir en pixels à quelle distance l'on souhaite mettre l'image par rapport au texte et au cadre du bloc de texte multilignes.

Donc, si comme mon exemple initial, je veux que mon image soit à gauche de mon texte, voila les paramètres que je dois rentrer dans la case "css libre".

margin-right: 25px; margin-bottom: 25px;

Ce qui veut dire que je veux que la marge de droite soit à 25 pixels du texte et que la marge du bas soit aussi à 25 pixels du texte.


Voila les codes margins CSS :
margin-top: 25px;
margin-bottom: 25px;
margin-right: 25px;
margin-left:25px;

Je vous laisse tester donc pour plus de choix.

Pour modifier par contre une fois le bloc de texte multilignes créé, avec l'image insérer, j'attends le retour de Dmit pour savoir si c'est possible ou bien s'il faut recréer entièrement le bloc de texte.

Edit : pour supprimer l'image, il faut bien se remettre au même endroit où était le curseur et revenir en arrière avec la touche "retour en arrière" du clavier (touche au dessus d'Entrée".

En espérant que cela servira à certains.

Voila mon résultat en tout cas.




Edité par brolysan - Mar 10 2014 à 1:47pm
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Aug 14 2009
Pays: France
Status: Inactif
Points: 9364
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Mar 10 2014 à 3:46pm
Proposition aux devs :

- pouvoir mettre un lien sur l'image
- pouvoir retoucher l'image
- pouvoir modifier le code css attribué à l'image
- pouvoir activer la fonction zoom sur l'image
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: May 31 2012
Status: Inactif
Points: 14004
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Mar 10 2014 à 3:59pm
>>pouvoir mettre un lien sur l'image

Ca doit deja etre possible, il faut selectinner l'image comme si c'etait un mot, puis Lien-Ajouter (encore une fois, comme pour un mot).

>> pouvoir activer la fonction zoom sur l'image
Parfois on peut mettre un element Image transparent (sans image) au-dessus de l'element-texte, pour creer une zone de Zoom.
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Aug 14 2009
Pays: France
Status: Inactif
Points: 9364
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Mar 10 2014 à 4:02pm
Message posté par Dmit OE Dmit OE a écrit:

>>pouvoir mettre un lien sur l'image

Ca doit deja etre possible, il faut selectinner l'image comme si c'etait un mot, puis Lien-Ajouter (encore une fois, comme pour un mot).

>> pouvoir activer la fonction zoom sur l'image
Parfois on peut mettre un element Image transparent (sans image) au-dessus de l'element-texte, pour creer une zone de Zoom.

J'ai essayé pour le lien, ca n'apparait pas pour ajouter un lien (comme pour le texte.

Pour l'idée du calque transparent dessus, effectivement, une solution alternative Clap

Tu me diras, si l'on veut aussi "contourner le premier problème", il suffit de mettre le lien sur l'image par dessus.


Edité par brolysan - Mar 10 2014 à 4:05pm
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: May 31 2012
Status: Inactif
Points: 14004
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Mar 10 2014 à 4:10pm
Chez moi, je clique sur l'image et ca suffit pour afficher le menu avec l'ajout de liens.
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Aug 14 2009
Pays: France
Status: Inactif
Points: 9364
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Mar 10 2014 à 4:13pm
Message posté par Dmit OE Dmit OE a écrit:

Chez moi, je clique sur l'image et ca suffit pour afficher le menu avec l'ajout de liens.

pas chez moi....Ouch

Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: May 31 2012
Status: Inactif
Points: 14004
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Mar 10 2014 à 4:17pm
Hm vous avez de soucis avec cette fonctionnalite.. Etrange.Essayez de taper un peu de texte avant et apres, genre xxIMAGExx, puis selectionner ce texte, ajoutez le lien, puis supprimez le texte, pour que l'image reste seule dans le lien.
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Aug 14 2009
Pays: France
Status: Inactif
Points: 9364
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Mar 10 2014 à 4:18pm
Message posté par Dmit OE Dmit OE a écrit:

Hm vous avez de soucis avec cette fonctionnalite.. Etrange.Essayez de taper un peu de texte avant et apres, genre xxIMAGExx, puis selectionner ce texte, ajoutez le lien, puis supprimez le texte, pour que l'image reste seule dans le lien.

ok, je vais tester ca de suite. Wink
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Aug 14 2009
Pays: France
Status: Inactif
Points: 9364
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Mar 10 2014 à 4:25pm
Alors, je viens de tester.

Si je ne mets pas mon curseur au tout début du texte, mais même une lettre après, j'ai accès a la fonction "créer lien". C'est déjà une bonne chose.
J'en ai mis un et malheureusement, il ne semble pas vouloir le garder en mémoire.

As tu réussi à ce qu'il le garde par contre?
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: May 31 2012
Status: Inactif
Points: 14004
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Mar 10 2014 à 4:36pm
Chez moi le lien reste en place (fermeture-reouverture de la page). Essayez peut-etre creer un autre element-texte, et inserer d'abord l'image + lien, au cas si c'est le contenu suivant qui casse le comportement.
Haut de la page
 Répondre Répondre Page  12>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,063 secondes.
Acheter votre vélo en ligne