Bonjour bouffandt,
cela tient peut-être plus qu'à un détail : si ton script est placé dans le html avant l'appel css de l'élément à animer, il n'aura pas lu son css : cela explique l'inertie au premier passage, en fait de découverte !
Il y a deux possibilités nécessaires à ton problème :
1. placer le script en bas de html
2. attribuer de préférence à ton id (ou à tes id) une classe distincte que ton script va faire basculer vers une autre au onmouseover et ensuite au onmouseout. Ou sans rien changer de ton script, ton html peut/doit rependre l'état css de ton id.
Ainsi, dans le html :
<a id="truc_1" class="cacher">truc1</a>
[#green]//ou[/#]
<a id="truc_1" style="height:0">truc1</a>
Autre petite chose, mais que je ne comprends pas. Pourquoi :
<body onload:"afficher(elem);">
On aurait pu penser que tu initie ton id="truc_1" ...
<body onload:"afficher('truc_1');">
et c'aurait été une autre solution, mais alors pour le faire disparaître, et donc l'initier au javascript :
<body onload:"cacher('truc_1');">
Mais parce que ton script sera placé en fin de html, c'est plutôt là que devras initier ton élément :
<script
//Ici ta/tes fonction(s)
...
//et enfin :
afficher("truc_1");
</script>
Enfin tu pourrais compiler en une seule fonction (toute simple) tes 2 fonctions afficher(id) cacher(id) par 2 conditions :
if, else if
s'il était possible d'attribuer un id="x" à ton rectangle svg.
Dans l'exemple que je donne, ceci fonctionne bien (sans svg) :
<?xml version="1.0"?>
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>essai</title>
<style>
.cacher{display:inline-block;max-width:0;background:#fff;color:#fff;transition:all ease .5s;overflow:hidden}
.afficher{display:inline-block;max-width:60px;background:#ece;color:#000;transition:all ease .5s;overflow:hidden}
</style>
</head>
<body>
<div>
<a id="rectangle1" onmouseover="alterner('rectangle1','texte1')">Rectangle1</a> <a id="rectangle2" onmouseover="alterner('rectangle2','texte2')">Rectangle2</a>
<br />
<a id="texte1" class="cacher"><i>Coucou !</i><br />Texte1</a><a id="texte2" class="cacher"><i>Coucou !</i><br />Texte2</a>
</div>
<script>
function alterner(elem1,elem2)
{
elem1=document.getElementById(elem1);
elem2=document.getElementById(elem2);
elem1.onmouseover=function(){elem2.className="afficher"};
elem1.onmouseout=function(){elem2.className="cacher"};
}
alterner('rectangle1','texte1');//Initier les 2 éléments au chargement de la page.
alterner('rectangle2','texte2');//Initier les 2 éléments au chargement de la page.
</script>
</body>
</html>
Modifié par pictural (12 Jul 2015 - 15:21)
Quelle serait la solution?
...