Bienvenue sur le forum d'entraide d'OverBlog.
Nous vous conseillons de chercher une réponse sur notre base de connaissances avant de poster une demande sur le forum.
[RÉSOLU] Texte sur photos au survol de la souris dans une section "texte"
  • Pour une meilleure lecture pour les personnes déficientes visuelles, je souhaiterai intégrer un commentaire aux photos que j'insère dans mes articles, un peu comme le commentaire qui apparait sur mon avatar quand on le survole avec le pointeur...
    j'ai trouvé ça : </div><IMG height=200 title="Commentaires" alt="titre" src="http://image"width=200 height=600>
    </div>

    mais ça ne marche pas pour les images intégrés dans le texte ("ob-link-img", par exemple)...

    peut-être quelqu'un à la solution ?
  • Bonjour, 
    Avec le bloc image tu peux déposer un commentaire qui apparaîtra en dessous, ce sera encore plus lisible. 
    Tu dépose autant de blocs que d'images voulues. 
  • c'est dans un blog texte où je souhaite pouvoir ajouter un commentaire passant sur une image insérée ! en ce qui concerne le bloc image - no problemo - j'ai vu comme ça marche...

    je reviens donc à ma question : y a-t-il moyen d'inséré une description d'image dans le cas d'une image insérée dans un bloc texte ? 

    merci d'avance

  • Bonjour,
    après avoir écrit ton texte, il faut convertir en html et à l'endroit où tu veux placer ta photo,
    tu mets ceci
    <p><img src="adresse de ta photo" alt="texte que tu veux" title="texte de ton choix" class=" CtreTexte" style="border: 0px solid #000; margin: 0px auto;" height="375" width="500" /></p>

    alt : c'est le texte qui apparaîtra si la photo est momentanément absente
    title : c'est le texte au survol de la souris
    height : hauteur de ta photo
    width : largeur 

    border : si tu veux encadrer ta photo, tu remplaces 0 par un chiffre supérieur
    class"ctre texte"   : photo centrée - si tu veux à gauche, c'est left, à droite, right.

     
  • c'est presque ça mais pas encore : je n'ai pas compris ta phrase : "border : si tu veux encadrer ta photo, tu remplaces 0 par un chiffre supérieur"....

    Quel 0 faut-il que je remplace dans toute les 0 (le premier ? la série #000 ?)  et par quel chiffre supérieur ?
    j'ai essayé de manipuler ça mais pas de résultat le texte apparaît toujours dessous l'image et pas à côté... c'est à dire sur la gauche de la photo...

    pouvez-vous m'indiquer la bonne formule directement ? merci
  • Bonjour,
    <p><img
    src="adresse de ta photo" alt="texte que tu veux" title="texte de ton
    choix" class=" CtreTexte" style="border: 0px solid #000; margin: 0px
    auto;" height="375" width="500" /></p>


    border = bordure
    Avec 0, pas de bordure. Avec 1, c'est une fine bordure. Et plus le nombre augmente, plus la bordure sera épaisse.

    #000 : c'est la couleur de la bordure.
  • c'est pas une 'bordure' que je cherche à faire c'est de pouvoir intégrer l'image à gauche à COTE du texte . J'ai inscrit 'Left texte' Quand j'essaie, le texte apparaît à gauche seulement tout en bas, sur une seule ligne : voir en bas de ma page essai : http://brunodesbaumettes.overblog.com/page-essai

    merci d'avance.
  • Alors si tu veux une image avec texte à gauche c'est un bloc texte qu'il faut utiliser. 
    Autant de blocs que d'images. 
  • bizarre votre réponse : je suis dans un bloc texte, (je crois)
    - je passe en mode html. 
    - je copie la référence url de l'image. dans la formule donnée ci-dessus pour :
    - avoir toujours l'image à gauche et du texte à droite ;
    - avoir en plus un commentaire qui apparaît su la photo lorsque je passe dessus avec le curseur 

    - je valide : sur ma page - pour le commentaire passant OK - pour le texte à gauche s'est pas ça : il n'apparaît que sur la dernière ligne en bas à droite de l'image et non pas dès le haut...

    bon, tout ça ne me règle en rien mon affaire... avez-vous un conseil pour que ça marche ?
  • En html, il faut placer ton image à l'endroit exact où tu veux la voir apparaître.
  • L'ima ge est à la bonne place ! (en haut à gauche), c'est le texte qui ne suit pas : je le voudrais voir qui commence en haut à droite, et, le paresseux il refuse de monter aussi haut !!! (voir ce que ça donne : http://brunodesbaumettes.overblog.com/page-essai) - PS bon 1er mai à toi et à tous les OBnautes
  • Bonjour,

    En html :

    <p><img src="ici l'url de ton image" alt="Ici le texte alternatif" align="left" />
    Ici ton texte</p>

    ;)


    P.S.: Bon 1er mai à toi aussi et à tous les Obiens :)

  • OUI Ca marche... en rajoutant quelque chose quand même (c'était le but de la manoeuvre) : title ! - pour avoir le commentaire passant avec le curseur...

    Ca me donne : 
    <p><img src="ici l'url de ton image" title="Ici texte alternatif" alt="Ici le texte alternatif" align="left" />
    Ici ton texte</p>

    Il me reste plus qu'à ajuster les marges je pense pour obtenir un résultat convenable... je vais m'y essayer. Merci Vger !


  • Ben non, désolé mais décidément ça va pas :
    - ça décale totalement le bandeau de droite qui apparaît alors dessous
    - ça ne me laisse pas de marge pour le texte...

    dommage, je crois que je renonce... si prêt du but pourtant !

  • Baisse pas les bras ! ;)
    (faut juste qu'on arrive à bien cerner ta demande)

    Et ceci, 

    <p><img style="margin-right: 5px; float: left;" img src="ici l'url de ton image" alt="Ici le texte alternatif" title="Ici le texte explicatif" />Ici ton texte</p>

    c'est mieux ?

    Et si c'est bien ça, et que tu dois souvent faire ça, ajoute ces lignes au CSS
    (Rem.: je ne sais pas si c'est vraiment un mieux... "C'est toi qui vois") :

    si il y a l'entré "img" ajoute 
    margin: 5px; et float: left;
    comme ici :

    img { 
    ce_qu'il_a_déjà_dedans; 
    margin: 5px;
    float: left;
    } /*image*/

    Si elle n'y est pas, ajoute

    img {
    margin: 5px; 
    float: left; 
    } /*image*/


    ("Jouer" avec les 5px pour affiner et arriver au réglage désiré)

    De la sorte il ne faudra plus placer/ajouter au html "img style="margin-right: 5px; float: left;", puisque l'info serra dans le css



  • Bonjour, j'y suis revenu ! ça marche impeccable - voici à quoi j'aboutis :

    <img style="margin-right: 10px; float: left;" img src="ICI COPIE URL IMAGE" alt="Ici Commentaire image" title="Ici Commentaire imageheight="200"width="250"  />
    <p><span style="font-family: arial, helvetica, sans-serif;">TEXTE ICI</span></p>

    Je crois que c'est à présent résolu - merci encore pour l'aide !