insérer une image dans bloc de texte
Imprimé depuis: Forum openElement
Categorie:
openElement
Nom du Forum: Tutoriaux utilisateurs
Description du Forum: Ecrivez ou consultez des tutoriaux OpenElement
Pas de questions dans cette rubrique merci.
URL: https://forums.openelement.uk/fr/forum_posts.asp?TID=19346
Date: 19 Avr 2024 à 02:12
Version logiciel: Web Wiz Forums 12.04 - http://www.webwizforums.com
Sujet: insérer une image dans bloc de texte
Posté par: brolysan
Sujet: insérer une image dans bloc de texte
Posté le: 10 Mar 2014 à 11:23
|
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. http://www.hostingpics.net/viewer.php?id=620592tuto01.jpg" rel="nofollow">  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.  |
Réponses:
Posté par: brolysan
Posté le: 10 Mar 2014 à 16:46
|
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
|
Posté par: Dmit OE
Posté le: 10 Mar 2014 à 16:59
|
>>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. |
Posté par: brolysan
Posté le: 10 Mar 2014 à 17:02
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  Tu me diras, si l'on veut aussi "contourner le premier problème", il suffit de mettre le lien sur l'image par dessus.
|
Dmit OE a écrit:Posté par: Dmit OE
Posté le: 10 Mar 2014 à 17:10
| Chez moi, je clique sur l'image et ca suffit pour afficher le menu avec l'ajout de liens. |
Posté par: brolysan
Posté le: 10 Mar 2014 à 17:13
pas chez moi....  http://www.hostingpics.net/viewer.php?id=127122paschezmoi.jpg" rel="nofollow">
 |
Posté par: Dmit OE
Posté le: 10 Mar 2014 à 17:17
| 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. |
Posté par: brolysan
Posté le: 10 Mar 2014 à 17:18
ok, je vais tester ca de suite.
 |
Posté par: brolysan
Posté le: 10 Mar 2014 à 17:25
|
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?
|
Posté par: Dmit OE
Posté le: 10 Mar 2014 à 17:36
| 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. |
Posté par: brolysan
Posté le: 10 Mar 2014 à 17:40
ok, je vais tester ca alors, peut être effectivement un "bug".
|
Posté par: brolysan
Posté le: 10 Mar 2014 à 17:53
|
alors, après plusieurs tests, voila un bug : si je crée mon bloc de texte, et que je mets directement mon image avec les paramètres suivants : alignement : en haut du texte flottement : à gauche (ou à droite) css libre : margin-right: 25px; margin-bottom: 15px; je n'ai pas la possibilité de mettre un link sur l'image.
|
Posté par: Dmit OE
Posté le: 10 Mar 2014 à 18:03
|
Oui c'est vrai - quand il y a du flottement, le lien ne marche pas, meme avec du texte autour. En plus c'est logique, parce que une image qui est dans un tag-lien ne peut pas profiter du flottement. Le contournement: ne mettez pas du flottement, mais l'appliquez plus tard sur le lien avec le bloc de code: $(function(){ $('#WE1414b60a8e').find('a').first().css("float", "left"); }); WE1414b60a8e etant l'ID du texte multi-ligne. (On suppose que le lien entourant l'image est le premier lien (d'ou first()). Je viens de tester, ca marche. |
Posté par: brolysan
Posté le: 10 Mar 2014 à 18:06
ok, super ca. Une nouvelle fonction ajoutée et approuvée. Il ne me reste plus qu'à la reproduire.....
|