• Résolu Infobulle sur une image dans le header


    Mercredi 26 Juin 2019 à 10:40
    Meyleen

    Bonjour, bonjour !

     

    Je suis plus ou moins nouvelle ici et j'essaye de faire un thème qu me plaît bien mais je bloque sur quelques petits points...

     

    Cela fait maintenant  quelques jours que je cherche divers tutos pour mettre une info bulle, j'ai trouvé ce que je cherchais et ça marche mais je ne parviens pas à mettre mon infobulle dans mon header.

    Précisément, je voulais mettre mes infos bulles au survol de mes images (dans le header toujours) qui conduisent vers une rubrique spécifique.

    Est ce que c'est possible de le faire ? Je galère un peu avec tous ces codes ccs et javascript ^.^

     

    Merci d'avance pour vos réponses et bonne journée ! :)

    Vendredi 28 Juin 2019 à 20:19
    Colette95

    Bonsoir Meyleen,

    On peut faire beaucoup de choses avec du css et du javascript mais à condition de prendre son temps et surtout comprendre ce que l'on fait.

    Apparemment, j'ai l'impression que tu brûles les étapes en copiant/collant des codes trouvés ici et là avec les erreurs qui vont avec.

    Par exemple, premières lignes de codes ajoutés dans ta feuille de style pour ton header :

    #header {
    height:650px;
    background:https://image.noelshack.com/fichiers/2019/24/7/1560642259-07-04-2019-17-45-00.png)center top no-repeat;
    }

    alors que ces codes devraient se présenter ainsi :

    #header {
    height650px;
    backgroundurl("https://image.noelshack.com/fichiers/2019/24/7/1560642259-07-04-2019-17-45-00.png") center top no-repeat;
    }

    Pas besoin d'aller plus loin, je passe sur la suite... Il serait souhaitable, à mon avis, que tu reprennes tranquillement les paramétrages de ton blog dans lesquels tu peux faire beaucoup de choses, notamment inclure l'image et la hauteur du header et une fois que tu auras bien cerné tout cela, t'intéresser au css qui est un véritable langage et en respecter les règles qui sont strictes car on ne peut pas faire n'importe quoi, sinon c'est un plantage de blog assuré que tu auras au final.  cry

    Donc chaque chose en son temps et essaie de le prendre...sarcastic

    Bonne soirée.

    PS C'est idem pour le javascript qui est à utiliser avec beaucoup de précautions. 

    Dimanche 7 Juillet 2019 à 17:16
    Meyleen

    Bonjour

     

    Alors pour le premier code, il est vrai que c'est le tout premier que j'ai copié à mon arrivée sur le site mais depuis j'ai quand même un peu plus compris le javascript, et je ne l'ai pas modifié, mais bon il marche donc ce n'est pas un problème pour moi s'il n'y a que la mise en page qui bloque ^^

    Je prends mon temps, cela fait environ un mois que je bosse sur ce thème, je ne suis pas une pro en javascript et ccs, il est vrai mais j'ai quand même énormément appris et j'essaye de comprendre tous les codes que je trouve (puisqu'il faut bien que je les modifient pour avoir vraiment ce que je veux)

     

    J'ai essayé de faire les codes en ccs pour les infos bulles dans mon header mais justement, en respectant la mise en page avec sélecteur { proprieté : valeur ; } ça ne marche pas, je dois merder quelque part mais je ne sais pas où

     

    Lundi 8 Juillet 2019 à 07:54
    Pipiou

    Bonjour,

    pour l'infobulle/css  je m'y connais pas assez, mais attention à "ce n'est pas un problème pour moi s'il n'y a que la mise en page qui bloque ^^" justement si : il faut y faire attention ! parce que la mise en page c'est la première chose que voit l'internaute. Tout le monde ne navigue pas sur les mêmes ordis ni via les mêmes navigateurs...  

    Colette95 (coucou) a raison : il vaut mieux que les codes soient bien écrits dès le départ, ça évite -au fur et à mesure des ajouts de codes- des conflits et des blocages.

    je m'y connais donc pas assez en infobulle/css, une idée : pourquoi ne pas mettre une valeur alt aux liens ?  cela dit sur un écran tactile (tablette ou tel) j'ai jamais réussi à "survoler un lien" :(

     

    Vendredi 12 Juillet 2019 à 11:31
    Meyleen

    Après beaucoup de recherches, j'ai enfin trouvé quelque chose !

     

    <p><a title="ACCUEIL" href="http://unmondedesims.eklablog.com/"> <img src="http://ekladata.com/iUUuoyttGWTdXD6oSuWm7npXF7A/Sans-titre-3-02.gif" alt=" ? " /></a></p>

     

    Ce code marche parfaitement (et c'est le seul que j'ai trouvé à vrai dire), le seul problème c'est que je n'arrive pas à modifier le design de l'infobulle...

    Est ce que quelqu'un serait comment faire ? J'ai essayé de modifier le code pour pouvoir réussir à modifier la bulle via le ccs mais rien de ce que j'ai essayé ne marche...

    Vendredi 12 Juillet 2019 à 16:28
    Colette95

    Bonjour Meyleen,

    Je reprends un peu le cours de cette discussion.

    L'attribut "title" est universel et n'est pas modifiable, tout au moins pas sur nos blogs...

    Comme je vois que tu as bien galéré depuis et que tu ne baisses pas les bras, alors voici un petit coup de pouce yes pour l'utilisation de la "help_bubble" qui est tout à fait possible sur les images placées dans ton header.

    Pour cela présenter les codes de cette façon en modifiant ce qui est en rouge. Le lien de l'image correspond à celle que tu as positionnée en premier dans ton header.

    <p><a onmouseover="Help.bubble(this, &quot;Ton texte dans la bulle&quot;)" href="Lien vers ta rubrique" target="_parent"><img style="position: absolute; top: 50px; left: 500px;" src="http://ekladata.com/zvn7OsVSnI1rPSQ3fRCgrvvuL8M/Sans-titre-7.png" alt="" width="80" height="100" />&nbsp;</a></p>

    Bon courage et bonne continuation. glasses 

    Vendredi 12 Juillet 2019 à 18:59
    Meyleen

    Bonjour et merci de ta réponse ! :)

     

    Le code marche, j'ai fais un test et ça marche (et la bulle est du design de celle que j'ai déjà configurée) le seul problème c'est que quand je veux modifier le code, ça ne marche plus

     

    J'ai donc essayer en remettant le code d'origine, ça marche parfaitement mais je n'arrive pas à faire marcher le code pour l'intégralité de mes images. J'ai copié le code en modifiant à chaque fois les liens, les positions etc... Mais ça ne marche pas pour toutes les images du coup..

     

    Est-ce que c'est normal ?

    En tout cas merci beaucoup, je sais maintenant qu'il y a un code et que je peux le faire directement via le header en plus, il doit juste y avoir encore quelque chose qui m'échappe yes

     

     

    Vendredi 12 Juillet 2019 à 19:25
    Colette95

    Le code n'est pas modifiable, tu as juste à changer le texte et mettre le lien et ce qui fonctionne pour ta première image doit fonctionner également pour les autres.

    Sur ta première image je ne vois pas la bulle parce que les codes ne sont pas à l'identique de ceux que je t'ai mis précédemment. On ne peut pas mettre n'importe quoi, n'importe où, les règles étant très strictes. intello

     

     

    Vendredi 12 Juillet 2019 à 19:52
    Meyleen

    Pfiou je viens de ressayer et ça marche, je pense que j'avais juste pas bien copié le premier code que j'ai recoller pour toutes les images

     

    Et c'est normal que sur la première image il n'y avait pas d'infobulle car j'avais modifié le script et du coup il n'y avait rien ^^

     

    En tout cas merci beaucoup, tu me sauves :D J'ai quasiment fini mon thème maintenant *o*

     

    J'ai juste encore un petit soucis, est-ce que je pourrais te redemander de l'aide ? :p (je vais juste retester avant car j'ai tout enlevé vu que ça m'avais énervé :') )

    Samedi 13 Juillet 2019 à 09:57
    Colette95

    Bonjour Meyleen,

    J'ai vu que tu avais réussi à placer tes images avec les infobulles. smile

    Toutefois, en regardant le code source de ton blog, je me suis rendue compte que tu avais certainement fait du copier/coller à partir d'un logiciel comme Word ou autre (ce qu'il ne faut jamais faire) et tu as donc introduit une kyrielle de codes étrangers à la plateforme.

    Ils se trouvent tout à la fin de ton module "Bienvenue dans un monde de sims", après "Bonne visite" et ils ont probablement été introduits à partir de ce code :

    <p class="MsoNormal"><strong>&nbsp;</strong></p>

    qu'il faut supprimer car ils risquent de provoquer un bug.

    En faisant un clic droit sur ton blog puis "afficher le code source de la page" tu verras la longue liste de ces codes affichée en vert.

    Encore du boulot !...  glasses




    Ce sujet est verrouillé. Vous ne pouvez donc pas poster de nouvelles réponses.