Bonjour,
j'essaye de faire une présentation "graphique" des fonctionnalités d'une extension Nvu sur mon site web. Pour cela j'utilise :
* une image de fond : le screenshot d'une fenêtre Nvu
* des images "vides" (un affreux spacer.gif) dans un lien pour définir des zones de survol du pointeur de la souris
* pour chaque zone de survol, une image apparaît (genre popup-menu), et deux zones de texte sont affichées à droite (une pour les explications en anglais, un pour le français).
Pour avoir un aperçu : http://fabiwan.kenobi.free.fr/NsmConText/features/
Code CSS :
Ca marchouille... mais je ne parviens pas à mettre les zones de texte en positionnement "absolu", ce qui me contraint à recalculer les coordonnées des zones de texte en fonction de l'emplacement de la zone de survol... c'est lourd et pas pratique à éditer avec un éditeur WYSIWYG tel que Nvu.
Je saurais le faire en JavaScript mais j'ai pô envie (j'ai lu cet article mais je persiste à vouloir le faire en CSS).
J'ai parcouru la FAQ, lu cet article et celui-là mais n'ai rien trouvé qui me permette de définir des positions "absolute" qui fonctionnent correctement.
Quelqu'un a-t'il une idée ??
D'avance merci
Modifié par Kaze (01 Jul 2005 - 12:16)
j'essaye de faire une présentation "graphique" des fonctionnalités d'une extension Nvu sur mon site web. Pour cela j'utilise :
* une image de fond : le screenshot d'une fenêtre Nvu
* des images "vides" (un affreux spacer.gif) dans un lien pour définir des zones de survol du pointeur de la souris
* pour chaque zone de survol, une image apparaît (genre popup-menu), et deux zones de texte sont affichées à droite (une pour les explications en anglais, un pour le français).
Pour avoir un aperçu : http://fabiwan.kenobi.free.fr/NsmConText/features/
Code CSS :
a { text-decoration: none; }
a span { display: none; }
a:hover { background: none; }
a:hover span { display: block; }
span.info-fr, span.info-en { border: 2pt double ;
position: absolute;
z-index: 100;
width: 240px;
height: 240px;
color: black;
}
Code HTML d'une zone de survol : <span id="preview" style="position: absolute; top: 58px; left: 150px;">
<a href="#"><img src="spacer.gif" alt="preview" width="32px" height="32px" />
<span class="popup"><img src="preview.png" alt="preview" /></span>
<span class="info-en" style="top: 0; left: 556px;">HTML Preview:<br /><br />
view current page in external web browsers</span>
<span class="info-fr" style="top: 250px; left: 556px;">Aperçu HTML :<br /><br />
visualiser la page courante dans des navigateurs externes</span>
</a></span>
(HTML et CSS dans la même page)Ca marchouille... mais je ne parviens pas à mettre les zones de texte en positionnement "absolu", ce qui me contraint à recalculer les coordonnées des zones de texte en fonction de l'emplacement de la zone de survol... c'est lourd et pas pratique à éditer avec un éditeur WYSIWYG tel que Nvu.
Je saurais le faire en JavaScript mais j'ai pô envie (j'ai lu cet article mais je persiste à vouloir le faire en CSS).
J'ai parcouru la FAQ, lu cet article et celui-là mais n'ai rien trouvé qui me permette de définir des positions "absolute" qui fonctionnent correctement.
Quelqu'un a-t'il une idée ??
D'avance merci

Modifié par Kaze (01 Jul 2005 - 12:16)