IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Une infobulle sans javascript (si possible) et sans lien


Sujet :

HTML

  1. #1
    Membre expérimenté
    Avatar de Rakken
    Homme Profil pro
    Inscrit en
    Août 2006
    Messages
    1 257
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Août 2006
    Messages : 1 257
    Points : 1 341
    Points
    1 341
    Par défaut Une infobulle sans javascript (si possible) et sans lien
    Bonjour,

    Comme indiqué dans ce post j'ai quelques soucis avec la balise title. Je me suis donc décidé à faire mes propres infobulles. Une recherche sur le net m'a permis de découvrir un tas de code simple en css pour en faire, fonctionnant tous sur le même principe, à savoir afficher une zone de texte caché grace au le survol d'un lien (en jouant avec les attributs "a hover span" et "hidden").

    Et c'est là que ce situe mon problème. En effet, dans le site que je développe, de nombreux mots vont avoir besoin d'une définition. Mais certains seront cliquable parce que possédant une page dédié (dont en plus de la définition succinte, on pourra aller sur leurs pages pour en savoir plus) et d'autres n'auront qu'une simple définition.

    Le problème, c'est que si les mots qui n'ont qu'une simple définition doivent se transformer en faux liens (genre en pointant vers #) pour avoir leurs infobulles, on perd completement la notion de "simple définition" et "lien vers une autre page". Ca oblige l'utilisateur a cliquer pour savoir s'il peux en savoir plus sur le mot en question ou pas, lui faisant perdre au passage sa position dans la page et, dans la mesure ou les mots sans liens seront les plus nombreux, en lui fesant probablement renoncer assez rapidement à cliquer sur les mots ou il est pertinent de cliquer.

    Bref, si quelqu'un a un petit bout de code qui me permetrait d'afficher une infobulle sans être obligé de creer un lien, ca m'interesse !

    Merci d'avance !

  2. #2
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 905
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 905
    Points : 14 822
    Points
    14 822
    Par défaut
    Tu peux faire deux classes de liens. Une pour les liens qui pointent vers une URL et une autre pour les liens qui ne pointent pas vers une URL.

    Dans le deuxième cas, tu t'arranges pour que la couleur du texte soit la même que du texte simple.

    Et pour garder la position dans la page si l'utilisateur clqique dessus quand même, il ne faut pas mettre # dans le href mais :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <a href="javascript:;">

  3. #3
    Membre expérimenté
    Avatar de Rakken
    Homme Profil pro
    Inscrit en
    Août 2006
    Messages
    1 257
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Août 2006
    Messages : 1 257
    Points : 1 341
    Points
    1 341
    Par défaut
    Exelent l'astuce du "javascript:;" a la place de #, je ne connaissais pas et ca résoud effectivement mon problème !

    Merci ;-)

  4. #4
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 654
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 654
    Points : 11 149
    Points
    11 149
    Par défaut
    Citation Envoyé par Rakken
    Exelent l'astuce du "javascript:;" a la place de #
    Cette syntaxe peut réserver quelques surprises, si l'utilisateur clique dessus.


    La balise title n'est pas réservée à la balise de liens <a> :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    bla bla
    <span style="color:#FF5555; font-weight: bold" title="ceci est une information" onmouseover="this.style.cursor='help'">
    bla bla </span>
    bla bla

  5. #5
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 905
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 905
    Points : 14 822
    Points
    14 822
    Par défaut
    Citation Envoyé par Auteur
    Cette syntaxe peut réserver quelques surprises, si l'utilisateur clique dessus.
    Seulement parce que tu n'avais pas fermé la chaîne par un point-virgule.

    Citation Envoyé par Auteur
    La balise title n'est pas réservée à la balise de liens <a>
    Sauf que justement, dans son précédent topic il disait que l'attribut title ne convenait pas, le texte long étant tronqué.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 3
    Dernier message: 30/04/2015, 22h06
  2. Comment faire une infobulle en javascript
    Par patricklinden dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 05/11/2007, 10h09
  3. Faire apparaitre/disparaitre une div sans javascript
    Par TocTocKiéLà? dans le forum Balisage (X)HTML et validation W3C
    Réponses: 9
    Dernier message: 25/09/2006, 13h02
  4. Réponses: 1
    Dernier message: 26/06/2006, 12h33
  5. Rafraichir une page sans javascript et <meta>
    Par enguerran dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 01/06/2006, 09h46

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo