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
:
<!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.
