Geckozone

J'utilise NVU pour faire mon site internet. Je désire insérer un texte d'aide qui doit s'afficher lorsque le curseur de la souris passe à un endroit précis de la page (sur une image ou un autre texte, par exemple). Exemple : lorsque le curseur de la souris passe sur l'heure affichée en bas à droite de l'écran, la date du jour s'affiche alors dans un cadre de fond jaune.
Voilà ce que je cherche à faire avec NVU.
Merci de votre aide.

Pour un texte, je ne sais pas.
Pour une image : double-cliquer sur l'image > propriétés de l'image > Edition avancée > Attibut > title

En l'occurrence, il s'agit du texte mis dans une cellule d'un tableau. Et je voudrais faire un "hint" (conseil) apparaissant au moment où la souris s'attarde sur le texte de la cellule.

<a title="le texte que tu veux voir">Le texte à survoler</a>

Ca devrait marcher

Merci. Cela fonctionne.

J'ai aussi trouver un javascript (sur http://www.javascriptfr.com ) qui fonctionne, avec la possibilité de mettre des balises HTML dans le texte d'aide à afficher, chose qui n'est pas possible avec l'attribut title.

JujuLand a écrit :<a title="le texte que tu veux voir">Le texte à survoler</a>

Ca devrait marcher

ou alors
<span style="cursor:pointer" title="le texte d'aide">Bla bla bla </span>
ou encore
<span style="cursor:help" title="le texte d'aide">Bla bla bla </span>

Y. Mairesse

pascalh a écrit :Merci. Cela fonctionne.

J'ai aussi trouver un javascript (sur http://www.javascriptfr.com ) qui fonctionne, avec la possibilité de mettre des balises HTML dans le texte d'aide à afficher, chose qui n'est pas possible avec l'attribut title.

Mouais, moyen comme idée, tu excus les gens qui désactivent le javascript (environ 10% des visiteurs)

Il y a des possiblités pour faire de jolis titles en gardant l'accessibilité :
http://xpfashion.madpage.com/forum/viewtopic.php?pid=41

Et en particulier : http://neo.dzygn.com/demos/nicetitles

En fait, pour faire apparaître la légende d'une photo, cliquer bouton droit sur la photo, (propriété image) et dans l'espace situé en face "vignette", taper la légende voulue, OK et c'est tout ! Le texte n'apparaît que dans la simulation (navigateur) et met quelques secondes à apparaître mais c'est très efficace.
V3M

vincent3m a écrit :En fait, pour faire apparaître la légende d'une photo, cliquer bouton droit sur la photo, (propriété image) et dans l'espace situé en face "vignette", taper la légende voulue, OK et c'est tout ! Le texte n'apparaît que dans la simulation (navigateur) et met quelques secondes à apparaître mais c'est très efficace.
V3M

Et même pas besoin de mettre les mains dans le cambouis... Quand on regarde le code source, c'est bien un "title" qui s'est inscrit...
Quand on vous dit que N/vu,c'est super!

JujuLand a écrit :<a title="le texte que tu veux voir">Le texte à survoler</a>

Ca devrait marcher

Effectivment, cela fonctionne. Cependant, le texte ne peut contenir de balise HTML du genre (sup, b, ...). Dommage !
Lorsque je n'en ai pas besoin, c'est cela que j'utilise, mais en cas de besoin d'une balise HTML, j'utilise donc la solution javascript. Et la çà marche nickel.

Etape suivante : j'ai voulu créer un fichier css contenant le style associé au javascript. Je référence cette feuille de style dans mon header HTML (<link rel="Stylesheet" type="text/css" href="style.css">). Et là, patatra, cela ne fonctionne plus.
Merci de votre aide.

Voici le contenu du fichier style.css :

Il ne faut pas mettre de doctype dans un fichier CSS. Et encore moins de commentaires HTML. C'est un fichier CSS, tu ne dois y mettre absolument que du CSS

Pour le DOCTYPE dans le fichier css, je ne l'ai pas inventé. Je débute. Je l'ai trouvé ici

J'ai supprimé cette ligne du fichier css. Le résultat n'a pas changé : mon "hint" n'est pas visible.

J'ai finalement trouvé ce qui ne marchait pas. Le sous répertoire "styles" ne se trouvait pas au bon endroit sur le serveur. Donc la feuille de style était inaccessible. Je l'ai déplacé et tout fonctionne.
Merci pour vos conseils éclairés.

Bon, je continue dans la découverte de NVU.
Toujours en ce qui concerne ces "hints", avant j'avais (et qui fonctionne parfaitement) dans mon header HTML :

Code : Tout sélectionner

  <script language="JavaScript" type="text/JavaScript">
function affiche(action,contenu){
var voir;
var display;
if (action == "cache"){
voir = "hidden";
display = "none";
}
else {
voir = "visible";
display = "block";
} document.getElementById("bulle").innerHTML = contenu;
function init() {
document.onmousemove=mousemove;
}
function mousemove(e) {
if (navigator.appName.indexOf("Explorer") > -1) {
var mouseX=event.x; var mouseY=event.y;
}
else {var mouseX=e.pageX; var mouseY=e.pageY;}
document.getElementById("bulle").style.top = mouseY+20+"px";
document.getElementById("bulle").style.left = mouseX+20+"px";
document.getElementById("bulle").style.visibility = voir;
document.getElementById("bulle").style.display = display; }
init();
function cache(){
document.getElementById("bulle").style.visibility = "hidden";
}
}
  </script>

Maintenant, j'ai mis :

Code : Tout sélectionner

  <script language="JavaScript" type="text/JavaScript" src="scripts/bulle.js"></script>

et j'ai créé le fichier bulle.js dont voici le contenu (un beau copier/coller de ce que j'avais dans mon header HTML) :

Code : Tout sélectionner

function affiche(action,contenu){
var voir;
var display;
if (action == "cache"){
voir = "hidden";
display = "none";
}
else {
voir = "visible";
display = "block";
} document.getElementById("bulle").innerHTML = contenu;
function init() {
document.onmousemove=mousemove;
}
function mousemove(e) {
if (navigator.appName.indexOf("Explorer") > -1) {
var mouseX=event.x; var mouseY=event.y;
}
else {var mouseX=e.pageX; var mouseY=e.pageY;}
document.getElementById("bulle").style.top = mouseY+20+"px";
document.getElementById("bulle").style.left = mouseX+20+"px";
document.getElementById("bulle").style.visibility = voir;
document.getElementById("bulle").style.display = display; }
init();
function cache(){
document.getElementById("bulle").style.visibility = "hidden";
}
}

Résultat : cela ne fonctionne plus. Merci de votre aide.

pascalh a écrit :Pour le DOCTYPE dans le fichier css, je ne l'ai pas inventé. Je débute. Je l'ai trouvé ici

Eh bien je crois que tu peux le supprimer sans autre forme de procès de tes marque-pages, parce qu'il est littéralement bourré de fautes

À commencer par la première phrase

Les feuilles de style sont un sur-ensemble du langage HTML

Ça ne veut rien dire

Tout le reste est dans le même style...
Inspire-toi plutôt de ça : http://www.webmaster-hub.com/publication/article62.html

Geckozone

Affichage d'un texte d'aide

Affichage d'un texte d'aide

vignettes

Re: vignettes