Suivez les fils RSS
 
Rechercher dans le sujet :
Forum
» JavaScript, DOM et API Web HTML5
» [Résolu]Javascript : Passer d'un onmouseover en ligne à un script ext
Auteur
mlbcreation
# 05 Sep 2010 - 17:50:40
Citer
56 Posts
 Bonjour à tous !
Je ne m'y connais pas trop en JS pur, et pour ce que j'ai à faire une librairie serait inutilement lourde.
Voilà mon soucis :
J'ai une fonction sur un script JS externe: 


function menu(color) {document.getElementById("separator").className = color;}

et page HTML :


<li id="blog-item">

<a href="#" onmouseover="menu('gold'); return false;"  onmouseout="menu(''); return false;">

Blog

</a>

</li>

Etant donnée que j'ai cela sur plusieurs items avec des couleurs différentes, j'aimerais que vous m’éclairiez sur une méthode sur mon JS externe afin d'éviter le JS dans la page HTML.

smile
Merci de votre aide.
++
Modifié par mlbcreation (05 Sep 2010 - 19:58)
^
Heyoan
# 05 Sep 2010 - 18:35:19
Citer
Modérateur
8101 Posts
 Salut,

ce serait plus facile en voyant plus de code :
* est-ce que chaque LI dispose d'un id ?
* est-ce que chaque classe (par exemple gold) correspond uniquement à une couleur de fond ou pas ?
* par curiosité : à quoi correspond #separator ?

Sinon :
* le return false est inutile.
* pour la librairie c'est très discutable : par exemple la version de jQuey minifiée à l'adresse http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js fait effectivement 24ko (ce qui peut être considéré comme "beaucoup") mais comme elle est ciblée par de nombreux sites il y a de grandes chances qu'elle soit déjà dans le cache du visiteur. De toute façon, à moins d'empêcher la mise en cache, ce sera le cas dès la seconde visite de la page.
Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
^
mlbcreation
# 05 Sep 2010 - 18:39:52
Citer
56 Posts
 Chaque li dispose d'un ID,
les classes sont gold, blue, red, green, purple et grey.
#separator est une div qui change de couleur selon l'item survolé.
Et pour jQuery je sais bien mais 24Ko pour un script qui en ferait juste 1Ko sans, je ne vois pas l'utilité de prendre une sorte d'"usine à gaz" pour cela !
^
Borak
# 05 Sep 2010 - 18:47:55
Citer
100 Posts
 Surtout que les 24 ko sont plutôt proche des 74 ko smile (si on ne gzipe pas).

Par contre avec jQuery, ce serait tellement facile...
Modifié par Borak (05 Sep 2010 - 18:48)
http://mfay.free.fr/RealBasic/ 
^
Heyoan
# 05 Sep 2010 - 19:29:05
Citer
Modérateur
8101 Posts
Borak a écrit :
Surtout que les 24 ko sont plutôt proche des 74 ko
Pas la version minifiée.

mlbcreation a écrit :
Et pour jQuery je sais bien mais 24Ko pour un script qui en ferait juste 1Ko sans, je ne vois pas l'utilité de prendre une sorte d'"usine à gaz" pour cela !
Tu as bien lu mon argument sur la mise en cache ?

Sinon un exemple un peu verbeux pour dire que jQuery simplifie quand même bien le code lol :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Test</title>

<style type="text/css" media="screen">

.blog-item1 {	background-color: gold; }

.blog-item2 {	background-color: blue; }

.blog-item3 {	background-color: red; }

.blog-item4 {	background-color: green; }

.blog-item5 {	background-color: purple ; }

.blog-item6 {	background-color: grey; }

</style>

</head>

<body>

<ul id="menu">

	<li id="blog-item1"><a href="#">Plop</a></li>

	<li id="blog-item2"><a href="#">Plop</a></li>

	<li id="blog-item3"><a href="#">Plop</a></li>

	<li id="blog-item4"><a href="#">Plop</a></li>

	<li id="blog-item5"><a href="#">Plop</a></li>

	<li id="blog-item6"><a href="#">Plop</a></li>

</ul>

<div id="separator">

	<p>Lorem ipsum</p>

	<p>Lorem ipsum</p>

	<p>Lorem ipsum</p>

</div>

<script type="text/javascript">

// fonction addEvent (http://www.scottandrew.com/weblog/jsjunk)

function addEvent(oElem, sEvType, fn, bCapture)

{

   return oElem.addEventListener?

      oElem.addEventListener(sEvType, fn, bCapture):

      oElem.attachEvent?

         oElem.attachEvent('on' + sEvType, fn):

         oElem['on' + sEvType] = fn;

}

// fonction rollover

var oRollover =

{

	// Initialisation

	_Init: function()

	{

		// Récupération de tous les liens du menu

		var liensMenu = document.getElementById(oRollover.Id_Menu).getElementsByTagName('a');

		if(!liensMenu) return;

		for(var iI = 0; iI < liensMenu.length; ++iI){	// Pour chaque lien...

			var oLien = liensMenu[iI];

			// addEventListener

			addEvent(oLien, 'mouseover', oRollover._Change, false);

			addEvent(oLien, 'mouseout', oRollover._Reset, false);

		}

	},

	

	// Remplacer classe

	_Change: function(event)

	{

		var oLien = event.target || window.event.srcElement;

		document.getElementById(oRollover.Id_Cible).className = oLien.parentNode.id;

	},

	

	// Supprimer classe

	_Reset: function(event)

	{

		var oLien = event.target || window.event.srcElement;

		document.getElementById(oRollover.Id_Cible).className = '';

	},



	// Id du menu

	Id_Menu: 'menu',

	// Id de l'élément ciblé

	Id_Cible: 'separator'

};



addEvent(window, 'load', oRollover._Init, false);

</script>



</body>

</html>
Le principe est de reprendre l'id du LI et de reprendre son nom comme nom de classe pour #separator. A noter que c'est une mauvaise idée de nommer ses classes en fonction de leur couleur car quand on change d'avis le nom ne veut plus rien dire. cligne
Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
^
Heyoan
# 05 Sep 2010 - 19:37:03
Citer
Modérateur
8101 Posts
 PS: juste pour rire
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

$("#menu a").hover(

  function () {

	 document.getElementById('separator').className = (this).parentNode.id;

  }, 

  function () {

	 document.getElementById('separator').className = '';

  }

);

</script>

Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
^
mlbcreation
# 05 Sep 2010 - 19:46:35
Citer
56 Posts
 Merci beaucoup pour le code ! biggrin

Tu penses vraiment que jQuery vaudrait le coup pour cet usage ?
^
Heyoan
# 05 Sep 2010 - 19:55:51
Citer
Modérateur
8101 Posts
mlbcreation a écrit :
Tu penses vraiment que jQuery vaudrait le coup pour cet usage ?
Ben c'est vrai que dans ton cas ce n'est pas un très bon exemple et je pense aussi que c'est une bonne chose de comprendre le fonctionnement de JavaScript (je ne parle pas de devenir un expert) mais tu avoueras que dès qu'on utilise des addEventListener, ou que c'est un peu compliqué de cibler les éléments ou que l'on utilise Ajax, ou que... ça rend tout de suite le code plus clair non ? Et en plus cross-browser. Encore une fois le coup des 24ko ne me semble plus être un bon argument depuis que jQuery (entre autres) est vraiment très répandu et donc déjà en cache pour peu que l'on cible une version en ligne.

Si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre. cligne
Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
^
mlbcreation
# 05 Sep 2010 - 19:58:50
Citer
56 Posts
 En tous cas merci beaucoup cligne

^
Le sujet est clos.
Aller à