Se connecter / S'enregistrer
Votre question

Comment affecter plusieurs actions à un même événement?

Tags :
  • Script
  • Programmation
Dernière réponse : dans Programmation
3 Juin 2008 16:02:36

Bonjour,

j'ai un script en java dans ma page html et, à un endroit, j'utilise la balise "marquee" et , j'aimerais lors de l'événement "onmouseover" en plus de "this.stop();" appeler une 2ème fonction de mon script en java.

La fonction que je veux appeler se nomme "changer()"

voici le conde de la balise "marquee":

<marquee align="center" onmouseover="this.stop();" onmouseout="this.start();" direction="left" scrollamount="2" scrolldelay="1">

<img src="mon image"/>

</marquee>

J'ai essayé des choses du genre:

<marquee align="center" onmouseover="this.stop(); changer();" onmouseout="this.start();" direction="left" scrollamount="2" scrolldelay="1">


Mais sans effet ! est ce que quelqu'un pourrait m'aider?

Merci!

Autres pages sur : affecter plusieurs actions evenement

3 Juin 2008 19:27:25

bonjour
déjà, ce n'est pas java, mais javascript...
ensuite, pour ton problème, si tu veux que ta fonction changer() soit appelée à chaque utilisation de stop(), tu peux appeler changer() à partir de stop() :

function changer(){
stop();
...
}

et donc ton code
<marquee align="center" onmouseover="this.stop();" onmouseout="this.start();" direction="left" scrollamount="2" scrolldelay="1">

suffit.
5 Juin 2008 17:28:32

sleepless2101 a dit :
bonjour
déjà, ce n'est pas java, mais javascript...
ensuite, pour ton problème, si tu veux que ta fonction changer() soit appelée à chaque utilisation de stop(), tu peux appeler changer() à partir de stop() :

function changer(){
stop();
...
}

et donc ton code
<marquee align="center" onmouseover="this.stop();" onmouseout="this.start();" direction="left" scrollamount="2" scrolldelay="1">

suffit.


Hello,

Merci pour ta réponse! Mais ça ne fonctionne pas!

Mon script est censé zoomer une image quand on passe la souris dessus.

Sans la balise "marquee" et avec une seule image elle fonctionne mais dès que je met la balise et/ou plusieurs images et bien les images sont à la taille réelle et le script ne fonctionne plus!

Voici le code complet:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

<!-- #BeginTemplate "master.dwt" -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- #BeginEditable "doctitle" -->
<title>Accueil</title>
<!-- #EndEditable -->
<link href="styles/style2.css" rel="stylesheet" type="text/css" />
<script language="javascript">
<!--
//PLF-http://www.jejavascript.net/
var coeff=4;//Coefficient de reduction
var larg=200;//largeur maxi de l'image
var haut=200;//hauteur maxi de l'image
var coeffinit=coeff;
function changer() {
stop();
if (document.image.width < larg) {
coeff = coeff-0.2;
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);
chang=window.setTimeout('changer();',1);//vitesse de l'effet
}
else {window.clearTimeout(chang);}
}
function initial() {
start();
if (document.image.width > larg/coeffinit) {
window.clearTimeout(chang);
coeff = coeff+0.2;
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);

initi=window.setTimeout('initial();',1);//vitesse de l'effet
}
else {window.clearTimeout(initi);}
}
//-->
</script>

</head>
<body>
<!-- Begin Container -->
<div id="container">
<!-- Begin Masthead -->
<div id="masthead">
<h1>Organisation</h1>
<h3>Description de l'organisation</h3>
</div>
<!-- End Masthead -->
<!-- Begin Navigation -->
<div id="navigation">
<ul>
<li><a href="../default.htm">Présentation</a></li>
<li><a href="../news/news.htm">Nouveautés</a></li>
<li><a href="../créations/creations.htm">Créations</a></li>
<li><a href="contact/contact.htm">Contact</a></li>

</ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<!-- End Navigation -->
<!-- Begin Content -->
<div id="content">
<!-- #BeginEditable "content" -->
<marquee align="center" onmouseover="this.stop();" onmouseout="this.start();" direction="left" scrollamount="2" scrolldelay="1">
<a href="une redirection"><img src="images/image.jpg" alt=""/></a>
<a href="une redirection "><img src="mon image1" alt="" /></a>
<a href="une redirection "><img src="mon image2" alt="" /></a>
<a href=" une redirection"><img src="mon image3" alt="" /></a>
<a href=" une redirection"><img src="mon image4" alt="" /></a>
<a href=" une redirection"><img src="mon image5" alt="" /></a>
<a href=" une redirection"><img src="mon image6" alt="" /></a>
<a href="une redirection "><img src="mon image7" alt="" /></a>
</marquee>
<script language="javascript">
<!--
//PLF-http://www.jejavascript.net/
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);
//-->
</script>

<p>Description</p>


<!-- #EndEditable "content" --></div>
<!-- End Content -->
<!-- Begin Footer -->
<div id="footer">
<p>Copyright 2008</p>
</div>
<!-- End Footer --></div>
<!-- End Container -->

</body>
<!-- #EndTemplate -->

</html>



Voila donc si t arrive à me dire pourquoi ça serait sympa! :-)

Merci.

A++
Contenus similaires
6 Juin 2008 20:32:46

re!
désolé, je ne connaissais pas cette balise marquee.. que d'ailleurs je n'aime pas.
mais bon voilà ton code; pour chaque image tu dois mettre un id propre à cette image, si il appartient à plusieurs images ça ne marchera pas. ensuite, chez moi petit bug: les images ne reprennent pas leur hauteur initiale, je regarderai un peu mieux plus tard..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

<!-- #BeginTemplate "master.dwt" -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- #BeginEditable "doctitle" -->
<title>Accueil</title>
<!-- #EndEditable -->
<link href="styles/style2.css" rel="stylesheet" type="text/css" />
<script language="javascript">
<!--
//PLF-http://www.jejavascript.net/
var coeff=4;//Coefficient de reduction
var larg=200;//largeur maxi de l'image
var haut=200;//hauteur maxi de l'image
var coeffinit=coeff;
var idvar="";
var chang = "";
var initi = "";
var larginit = 100;
var ouinon = "non"

function changer() {
if(initi){
window.clearInterval(initi);
initi = "";
}
obj = document.getElementById(idvar);
if (obj.width < larg) {
coeff = coeff-0.2;
obj.width = Math.round(larg/coeff);
obj.height = Math.round(haut/coeff);
}
else {
window.clearInterval(chang);
chang = "";
}
}

function initial() {
if(chang){
window.clearInterval(chang);
chang = "";
}
obj = document.getElementById(idvar);
if (obj.width > larginit) {
coeff = coeff+0.2;
obj.width = Math.round(larg/coeff);
obj.height = Math.round(haut/coeff);
ouinon = "oui";
}
else {
window.clearInterval(initi);
initi = "";
ouinon = "non";
}
}

function go(id){
if(chang){
window.clearInterval(chang);
chang = "";
}
if(ouinon == "non"){
if(initi){
window.clearInterval(initi);
initi = "";
}
idvar = id;
obj = document.getElementById(idvar);
if (obj.width < larg) {
changer();
chang = window.setInterval('changer();',1);//vitesse de l'effet
}
else {
initial();
initi = window.setInterval('initial();',1);//vitesse de l'effet
}}
}
//-->
</script>

</head>
<body>
<!-- Begin Container -->
<div id="container">
<!-- Begin Masthead -->
<div id="masthead">
<h1>Organisation</h1>
<h3>Description de l'organisation</h3>
</div>
<!-- End Masthead -->
<!-- Begin Navigation -->
<div id="navigation">
<ul>
<li><a href="../default.htm">Présentation</a></li>
<li><a href="../news/news.htm">Nouveautés</a></li>
<li><a href="../créations/creations.htm">Créations</a></li>
<li><a href="contact/contact.htm">Contact</a></li>

</ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<!-- End Navigation -->
<!-- Begin Content -->
<div id="content">
<!-- #BeginEditable "content" -->
<div style="height:220px;">
<marquee align="center" onmouseover="this.stop();" onmouseout="this.start();" direction="left" scrollamount="2" scrolldelay="1">
<a href="une redirection"><img id="img1" align="top" onmouseover="go(this.id)" onmouseout="go(this.id)" border="0" width="100px" src="image.jpg" alt=""/></a>
<a href="une redirection"><img id="img2" align="top" onmouseover="go(this.id)" onmouseout="go(this.id)" border="0" width="100px" src="image.jpg" alt=""/></a>
<a href="une redirection"><img id="img3" align="top" onmouseover="go(this.id)" onmouseout="go(this.id)" border="0" width="100px" src="image.jpg" alt=""/></a>
<a href="une redirection"><img id="img4" align="top" onmouseover="go(this.id)" onmouseout="go(this.id)" border="0" width="100px" src="image.jpg" alt=""/></a>
<a href="une redirection"><img id="img5" align="top" onmouseover="go(this.id)" onmouseout="go(this.id)" border="0" width="100px" src="image.jpg" alt=""/></a>
<a href="une redirection"><img id="img6" align="top" onmouseover="go(this.id)" onmouseout="go(this.id)" border="0" width="100px" src="image.jpg" alt=""/></a>
<a href="une redirection"><img id="img7" align="top" onmouseover="go(this.id)" onmouseout="go(this.id)" border="0" width="100px" src="image.jpg" alt=""/></a>
<a href="une redirection"><img id="img8" align="top" onmouseover="go(this.id)" onmouseout="go(this.id)" border="0" width="100px" src="image.jpg" alt=""/></a>
</marquee>
</div>


<p>Description</p>


<!-- #EndEditable "content" --></div>
<!-- End Content -->
<!-- Begin Footer -->
<div id="footer">
<p>Copyright 2008</p>
</div>
<!-- End Footer --></div>
<!-- End Container -->

</body>
<!-- #EndTemplate -->

</html>
9 Juin 2008 17:29:57

Merci beaucoup!

C'est vraiment sympa de ta part!

Maintenant que j'ai déjà le principale qui fonctionne, je vais me pencher sur le resize! :-)

Si tu trouves tiens moi au courant! :-)

a++
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS