Info bulle reprenant le contenu du lien

Fermé

bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 - 24 janv. 2007 à 15:58
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 - 27 janv. 2007 à 16:11

bonjour
j'ai eu un peu de mal à 'formuler' le titre, mais ,pour certains 'pro' ici, je pense que cela va être beaucoup plus clair si je vous mets le lien de l'exemple : http://www.dotnet-news.com/
lorsque l'on passe sur un lien, il y a une 'info-bulle' qui s'ouvre et qui reprend le début du texte contenu dans la page liée ... super ! (enfin pour moi)... comment faire ? (en restant le plus simple possible)
@mitiés
b g

A voir également:

Info bulle reprenant le contenu du lien
Lien url - Guide
Verifier un lien - Guide
Word a trouvé du contenu illisible - Guide
Créer un lien pour partager des photos - Guide
Lien copié - Forum Téléphones & tablettes Android

3 réponses

Réponse 1 / 3

kij_82 Messages postés 4088 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013 857
24 janv. 2007 à 17:11

C'est quoi que tu ne sais pas faire, le système d'info bulle ?

Si oui, dans l'exemple que tu donne, il ne s'agit pas d'un truc bien compliqué en soit.
L'auteur a créer une DIV dans la page, dont la propriété 'z-index' est supérieur a celle des autres éléments de la page de manière à ce qu'elle soit toujours au dessus des autres éléments.
Ensuite, la propriété 'visible' de la DIV est mise par défaut (dans un css certainement) à la valeur "hidden" pour qu'elle ne soit pas visible.

Ensuite, l'auteur a construit sa page via une requête dans sa base de donnée pour extraire les différents liens, et les articles qui y correspondent.
Chaque lien se présente donc ainsi :

<a href="..." onMouseOver="javascript:Over('...')" onMouseOut="javascrip:Out('...')">BLABLA</a>

Les fonctions Over() et Out() sont des fonctions javascript dont la première prend en paramètre un texte, celui du lien en question.
Leur but, est :
- dans un premier temps, attribuer le texte à la DIV
- dans un deuxieme temps, afficher ou rendre invisible la DIV

Pour cela, il suffit de faire comme suit, en admettant que l'élément DIV en question ait pour identifiant le nom "ma_div" :

<script language="javascript">
function Over( texte ){
   var oDiv = document.getElementById("ma_div");
   // remplacement du texte :
   oDiv.innerHTML = texte;
   // apparition de la div :
   oDiv.style.visibility =  "visible";
}

function Out(){
   var oDiv = document.getElementById("ma_div");
   // Annule le texte 
   oDiv.innerHTML = "";
   // disparition de la div :
  oDiv.style.visibility = "hidden";
}
</script>

Et voilà, ce n'est pas plus compliqué que cela. Lorsque tu passera sur un lien, tu aura la DIV qui apparaitra à l'endroit où elle est, avec le texte du lien.

bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
24 janv. 2007 à 20:03

merci ... apparemment tu as tout compris ! ... moi pas tout à fait (je suis le genre 'boulet' quand il s'agit de quelque chose que je ne connais pas! )
tu me dis:
"L'auteur a créer une DIV dans la page, dont la propriété 'z-index' est supérieur a celle des autres éléments de la page de manière à ce qu'elle soit toujours au dessus des autres éléments.
Ensuite, la propriété 'visible' de la DIV est mise par défaut (dans un css certainement) à la valeur "hidden" pour qu'elle ne soit pas visible."
-elle a une place bien définie dans la page cette 'div' ?
- et cette histoire de css ça donnerait quoi exactement comme 'code' dans le fichier css ?
@mitiés
b g

kij_82 Messages postés 4088 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013 857 > bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024
25 janv. 2007 à 10:37

Regarde le tuto donné plus bas, pour le fichier css :

.ma_div {
   position: absolute;
   top: 50;     // tes valeurs
   left: 400;  // tes valeurs

   z-index: 500;
   visibility: hidden;
}

.autreElement {
   ...
   
   z-index = 10;
}

Voilà ce que ca donne, tout cas dans un fichier "style.css" que tu importe dans ta page php via ce code entre tes balises STYLE de ton entete de page :

<HTML>
  <HEAD>
    <STYLE>
       @import url(style.css);
    </STYLE>
   </HEAD>
   <BODY>
   ...
   </BODY>
</HTML>

bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362 > kij_82 Messages postés 4088 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013
25 janv. 2007 à 15:37

Quelle est la différence entre
@import url(style.css);
et
<link href="styles.css" rel="stylesheet" type="text/css" />
php et html ??? c'est cela , mais pouquoi pas au même emplacement , là je ne comprends pas
@mitiés
b g

kij_82 Messages postés 4088 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013 857 > kij_82 Messages postés 4088 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013
25 janv. 2007 à 15:47

Aucune différence (enfin certainement que si mais infime), ca fait la même chose donc fais ce que bon te semble si tu es habitué à ta solution :)

ok merci
j'espère que je vais y arriver !

Réponse 2 / 3

k1mpeR Messages postés 7 Date d'inscription samedi 6 janvier 2007 Statut Membre Dernière intervention 14 mars 2009
24 janv. 2007 à 21:26

Regarde ce tuto:
https://openclassrooms.com/fr/courses

bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
25 janv. 2007 à 15:32

merci
j'ai regardé ce tuto, il est très bien fait !
mais ce n'est pas ce que je cherche (voir explications et lien dans mon premier post)
@mitiés
b g

Réponse 3 / 3

bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
25 janv. 2007 à 16:07

Je ne sais pas ce qui se passe aujourd'hui ... mais cela fait la troisième fois que je dois me ré-identifier pour répondre à un 'post' du forum .... si quelqu'un sait ?
@+
b g

Discussions similaires

"Aucune application permettant d'ouvrir cette URL"

Savoir de quel ville à été envoyé le message

lien copié

Rajout de lien sur plusieurs pages

ne pas utiliser la souris mais le clavier

Discussions similaires

Newsletters