11550 sujets

JavaScript, DOM et API Web HTML5

Apparition/Disparition text

Bonjour,

J'ai une image et j'aimerais que lorsque j'ai ma sourie sur l'image un text apparaise et quand j'enleve ma sourie le texte disparaise.

J'ai commencer a faire un peut de code avec un de mes ancien script, mais j'ai un peut de problème, voici le code:

<body>
<script type="text/javascript">
<!--
function montre(id) {
  var d = document.getElementById(id);
  	for (var i = 1; i<=10; i++) {
  		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
  	}

  if (d) {
    d.style.opacity = "0";
    d.style.filter = "alpha(opacity=0)";
    d.style.display='block';    

    for(i=1; i< 100; i++){
       setTimeout("document.getElementById('"+id+"').style.opacity = '"+i/100+"'",i*8);
       setTimeout("document.getElementById('"+id+"').style.filter = 'alpha(opacity="+i+")'",i*8);
    } 
  }
}
//-->
</script>

   <dt onmouseover="montre('text');"><img src="image1.gif" width="464" height="83"></dt>
   
   <dd id="text"><p>Coming Soon</p></dd>
   </body>


Merci d'avance!
Ah OK...

ben tu peux essayer ça :
<body>
<script type="text/javascript">
<!--
function montre(id) {
  var d = document.getElementById(id);
  	for (var i = 1; i<=10; i++) {
  		if (document.getElementById('text'+i)) {document.getElementById('text'+i).style.display='none';}
  	}
  if (d) {
    d.style.opacity = "0";
    d.style.filter = "alpha(opacity=0)";
    d.style.display='block';
    
    for(i=1; i< 100; i++){
       setTimeout("document.getElementById('"+id+"').style.opacity = '"+i/100+"'",i*2);
       setTimeout("document.getElementById('"+id+"').style.filter = 'alpha(opacity="+i+")'",i*2);
    } 
  }
}

window.onload=montre;
//-->
</script>
<dt onmouseover="montre('text1');" onmouseout="montre();"><img src="image1.gif" width="464" height="83"></dt>
<dd id="text1"><p>Coming Soon</p></dd>
</body>
Merci beaucoup! Sa marche mais j'aimerais savoir si ses possible d'avoir une disparition en dégradé?

Merci beaucoup d'avance!

++
Bonjour
S'il vous plait, pour la pérrénité de la programmation, factorisez votre code.
Et on ne passe pas de string à SetTimeout, on lui passe une référence à une fonction ou au pire une fonction anonyme.
Et déclarez vos variables, en javascript elle ne sont pas block-scoped, ce qui veut dire Heyoan que tu laisse une variable i avec la valeur 101 dans le scope global.

De plus tu crées une variable d (avec un nom très évocateur d'ailleurs) qui faire réference à l'élement dont tu veux changer l'opacité, et ensuite tu utilises deux fois la méthode getElementById() pour effectuer une action sur ce même élement... Smiley fache
Modifié par Shinuza (27 Jul 2007 - 07:32)
<body>

<script type="text/javascript">

<!--

function montre(id) {

	var i,
		d = document.getElementById(id);
		
	function setOpacity(element,newOp) {
		element.style.opacity = newOp/100;
		element.style.filter = "alpha(opacity="+newOp+")";
	}
	
	function delayed(i) {
		return 	setTimeout(function() {setOpacity(d,i)},i*2);
	}

  	for (i = 0; i<10; i++) {
		var textElement = document.getElementById('text'+i);
  		if (textElement) {textElement.style.display='none';}
  	}

  if (d) {
    setOpacity(d,0);
    d.style.display='block';

    for(i = 1;i<100; i++){
		delayed(i);
    }

  }

}

window.onload=montre;

//-->

</script>
<dt onmouseover="montre('text1');" onmouseout="montre();"><img src="image1.gif" width="464" height="83"></dt>
<dd id="text1"><p>Coming Soon</p></dd>
</body>
Sujet clos
Aller à