Info bulle reprenant le contenu du lien
bg62
Messages postés
23433
Date d'inscription
Statut
Modérateur
Dernière intervention
-
bg62 Messages postés 23433 Date d'inscription Statut Modérateur Dernière intervention -
bg62 Messages postés 23433 Date d'inscription Statut Modérateur Dernière intervention -
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
--
le 'www' est fait aussi pour communiquer, partager et échanger, non ?
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
--
le 'www' est fait aussi pour communiquer, partager et échanger, non ?
Configuration: Windows XP Internet Explorer 6.0
3 réponses
-
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.
-
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- 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> - 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 - 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 :)
-
-
-
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
