Info bulle reprenant le contenu du lien
bg62
Messages postés
26245
Date d'inscription
Statut
Modérateur
Dernière intervention
-
bg62 Messages postés 26245 Date d'inscription Statut Modérateur Dernière intervention -
bg62 Messages postés 26245 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
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
- Créer un lien pour partager des photos - Guide
- Info pc - Guide
- Crystal disk info - Télécharger - Informations & Diagnostic
- Info bulle excel ✓ - Forum Excel
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 :
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" :
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.
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.
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
.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>@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
j'espère que je vais y arriver !