11548 sujets

JavaScript, DOM et API Web HTML5

[résolu] Onmouseover et javascript non intrusif

Bonjour,

Je cherche à utiliser dans mes pages web du javascript non intrusif et donc de définir les évènements directement dans le fichier javascript en pointant les classes, ID et tag HTML

actuellement, j'ai la source html suivante :

<!DOCTYPE html public "-//w3c//dtd html 4.01 transitional//en">
<html>
  <head>
  <title></title>
  </head>
  <body>
<div id="ticker" style="overflow:hidden; width:520px"  >
  [b]<a href="#" onmouseover="ticker_paused=true" onmouseout="ticker_paused=false">[/b]my first ticker!</a>
</div>
<script src="webticker_lib.js" language="javascript"></script>
  </body>
</html>


Et le code javascript suivant :

ticker_content = document.getElementById("ticker").innerHTML;
 
ticker_righttoleft = false;
ticker_speed = 2;
ticker_style = "font-family:Arial; font-size:12px; color:#444444";
ticker_paused = false;

ticker_start();

function ticker_start() {
	var tickerSupported = false;
	ticker_width = document.getElementById("ticker").style.width;
	var img = "<img src=ticker_space.gif width="+ticker_width+" height=0>";

	// Firefox
	if (navigator.userAgent.indexOf("Firefox")!=-1 || navigator.userAgent.indexOf("Safari")!=-1) {
		document.getElementById("ticker").innerHTML = "<TABLE  cellspacing='0' cellpadding='0' width='100%'><TR><TD nowrap='nowrap'>"+img+"<SPAN style='"+ticker_style+"' ID='ticker_body' width='100%'>&nbsp;</SPAN>"+img+"</TD></TR></TABLE>";
		tickerSupported = true;
	}
	// IE
	if (navigator.userAgent.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Opera")==-1) {
		document.getElementById("ticker").innerHTML = "<DIV nowrap='nowrap' style='width:100%;'>"+img+"<SPAN style='"+ticker_style+"' ID='ticker_body' width='100%'></SPAN>"+img+"</DIV>";
		tickerSupported = true;
	}
	if(!tickerSupported) document.getElementById("ticker").outerHTML = ""; else {
		document.getElementById("ticker").scrollLeft = ticker_righttoleft ? document.getElementById("ticker").scrollWidth - document.getElementById("ticker").offsetWidth : 0;
		document.getElementById("ticker_body").innerHTML = ticker_content;
		document.getElementById("ticker").style.display="block";
		ticker_tick();
	}
}

function ticker_tick() {
	if(!ticker_paused) document.getElementById("ticker").scrollLeft += ticker_speed * (ticker_righttoleft ? -1 : 1);
	if(ticker_righttoleft && document.getElementById("ticker").scrollLeft <= 0) document.getElementById("ticker").scrollLeft = document.getElementById("ticker").scrollWidth - document.getElementById("ticker").offsetWidth;
	if(!ticker_righttoleft && document.getElementById("ticker").scrollLeft >= document.getElementById("ticker").scrollWidth - document.getElementById("ticker").offsetWidth) document.getElementById("ticker").scrollLeft = 0;
	window.setTimeout("ticker_tick()", 30);
}


Je voudrais obtenir le code html suivant :
<!DOCTYPE html public "-//w3c//dtd html 4.01 transitional//en">
<html>
  <head>
  <title></title>
  </head>
  <body>
<div id="ticker" style="overflow:hidden; width:520px"  >
  [b]<a href="#">my first ticker!</a>[/b]
</div>
<script src="webticker_lib.js" language="javascript"></script>
  </body>
</html>


Et déclencher les évènements onmouseover et onmouse out dans le JS.
Je pensais faire qqchose du style :


ticker_nomid = document.getElementById("ticker");
ticker_nomid.onmouseover="ticker_paused=true"
ticker_nomid.onmouseout="ticker_paused=false";


Mais, rien a faire ça ne fonctionne pas...

Quelle solution est possible pour le résultat attendu ?

Merci pour votre aide Smiley cligne
Modifié par EricLB (06 Jul 2006 - 18:23)
Bonjour,


ticker_nomid = document.getElementById("ticker");

ticker_nomid.onmouseover=function() {  ticker_paused=true }

ticker_nomid.onmouseout= function() { ticker_paused=false }


...devrait mieux fonctionner.

Tu essayes d'affecter une chaine de caractère à un évenement, alors qu'il attend un gestionnaire d'évènement, soit une fonction.
C'est nickel ! Merci Smiley biggrin

Oui c'est parce que j'avais transposé directement le code html :

 <a href="#" onmouseover="ticker_paused=true" onmouseout="ticker_paused=false">


au code js.

Pourquoi cette différence entre le code qui est dans le js et celui de la page html ?
Je croyais que c'était fini...

Le code javascript fonctionne très bien en HTML, mais plus du tout en XHTML que ce soit en transitional ou en strict avec FIREFOX.

Quand à Opéra, il est dans les choux depuis le début.

A moins qu'il exsite un script plus simple pour faire défiler du texte - je trouve ça pas génial, mais c'est ce qu'on me demande...
Sujet clos
Aller à