Ah oui c'est juste, j'avais omis ce petit détail...
Bon eh bien sachant que la propriété :hover ne fonctionne que sur la balise <a> sur Internet Explorer - et en considérant que tu ne veuilles pas "exclure" ses utilisateurs - il va falloir se tourner vers le JavaScript, je pense...
Donc le principe sera le même, mais au lieu de mettre un <a>, on mettra un <span class="cache">, par exemple. Et un <span> à l'intérieur de celui-ci qui contiendra les éléments cachés :
<span class="cache">Texte par défaut<span>texte caché</span></span>
Après, une touche de CSS pour avoir un certain effet :
.cache
{
color: blue;
border-bottom: 1px dotted black;
}
.cache span
{
display: none;
border: 0 none;
background-color: blue;
color: white;
}
Et puis le JS qui va avec :
var span;
window.onload = function()
{
span = document.getElementsByTagName('span');
for(j=0;j<span.length;j++)
{
if (span[j].className == 'cache')
{
span[j].j = j;
span[j].onmouseover = afficherCalque;
span[j].onmouseout = masqueCalque;
}
}
}
function afficherCalque()
{
span[this.j].getElementsByTagName('span')[0].style.display = 'inline';
}
function masqueCalque()
{
span[this.j].getElementsByTagName('span')[0].style.display = 'none';
}
Pas testé, mais ça devrait fonctionner... Par contre, avec ça, il me semble que le texte caché s'affichera juste après le texte non-caché, mais je ne me souviens même pas comment le tuto d'Alsacréation avait "réglé" ce problème avec le <a>.
[Edit] Petit problème avec le [ i ], désolé... Modifié par Nyro Xeo (15 Oct 2005 - 18:22)
