[SPIP Zone] Survol automatique des logos N&B <> couleur

Bonjour, je vois pas bien ou je peux déposer ce petit script en svn
Je me permets de mettre ma contrib ici pour que cela serve
et qu'elle soit amélioré au besoin :wink:
++
touti
Evidemment que cela n'empêche pas de penser au survol de logo en css qui ne necessite pas js

[(#REM)
<!--
EXPLICATIONS
Nécessite jquery
A renommer swapjs.html et à mettre dans le dossier squelettes

    Ce script crée le survol générique rollover des logos à 2 arguments: logo N&B et logo en couleur,
    Il s'appelle dans le head <script src="#URL_PAGE{swapjs}" type="text/javascript"></script>
    Et s'utilise sur la balise image du logo
    via class="overart#ID_RUBRIQUE#EXPOSE"
    ou class="overrub#ID_ARTICLE#EXPOSE"
   ********************************
exemple pour survol inverse et bloqué dans la boucle si article ou la rubrique est expose
    <img src="[(#EXPOSE|=={on}|?{[(#LOGO_RUBRIQUE||image_reduire{180,180}|extraire_attribut{src})],[(#LOGO_RUBRIQUE||image_reduire{180,180}|image_nb{330,330,330}|image_gamma{-30}|extraire_attribut{src})]})] " alt="logo" width="180px" class="overrub#EXPOSE#ID_RUBRIQUE" />

Voir d'autres filtres images
http://www.spip.net/fr_article3327.html

Le script swapit provient de
http://rip747.wordpress.com/2006/12/15/jquery-my-new-plugin-swapit/
$(function(){
$("#test").swapit("b-aboutus-over.jpg", "b-aboutus.jpg");
$(".over").swapit("b-contactus-over.jpg", "b-contactus.jpg")
});
<div id="test"></div>
<img src="b-contactus.jpg" class="over">

-->]#CACHE{7*24*3600}
#HTTP_HEADER{'Content-Type: text/javascript'}

$.fn.swapit = function(a,b){
return this.each(function(){
var i = (new Image).src = a;
var i2 = (new Image).src = b;
// bind the mouseover and mouseout event to swap the images
if($(this).get(0).tagName.toUpperCase() == "IMG"){
$(this).mouseover(function(){
$(this).attr("src", a);
}).mouseout(function(){
$(this).attr("src", b);
});
}else{
$(this).mouseover(function(){
$(this).background("url(" + a + ")");
}).mouseout(function(){
$(this).background("url(" + b + ")");
});
}
});
}

$(function(){
<BOUCLE_logoarticles(ARTICLES){logo}>
[$(".overart#ID_ARTICLE").swapit("(#LOGO_ARTICLE||image_reduire{180,180}|extraire_attribut{src})", "[(#LOGO_ARTICLE||image_reduire{180,180}|image_nb{330,330,330}|image_gamma{-30}|extraire_attribut{src})]");]
</BOUCLE_logoarticles>

<BOUCLE_logorubriques(RUBRIQUES){logo}>
[$(".overrub#ID_RUBRIQUE").swapit("(#LOGO_RUBRIQUE||image_reduire{180,180}|extraire_attribut{src})", "[(#LOGO_RUBRIQUE||image_reduire{180,180}|image_nb{330,330,330}|image_gamma{-30}|extraire_attribut{src})]");]
</BOUCLE_logorubriques>
});

genial .

faut que je teste ça

on peut peut etre creer un dossier jquery sur la zone ?

Le 30 janv. 07 à 09:48, toutati a écrit :

Bonjour, je vois pas bien ou je peux déposer ce petit script en svn
Je me permets de mettre ma contrib ici pour que cela serve
et qu'elle soit amélioré au besoin :wink:
++
touti
Evidemment que cela n'empêche pas de penser au survol de logo en css qui
ne necessite pas js

[(#REM)
<!--
EXPLICATIONS
Nécessite jquery
A renommer swapjs.html et à mettre dans le dossier squelettes

     Ce script crée le survol générique rollover des logos à 2 arguments:
logo N&B et logo en couleur,
     Il s'appelle dans le head <script src="#URL_PAGE{swapjs}"
type="text/javascript"></script>
     Et s'utilise sur la balise image du logo
     via class="overart#ID_RUBRIQUE#EXPOSE"
     ou class="overrub#ID_ARTICLE#EXPOSE"

********************************
exemple pour survol inverse et bloqué dans la boucle si article ou la
rubrique est expose
     <img
src="[(#EXPOSE|=={on}|?{[(#LOGO_RUBRIQUE||image_reduire{180,180}|extraire_attribut{src})],[(#LOGO_RUBRIQUE||image_reduire{180,180}|image_nb{330,330,330}|image_gamma{-30}|extraire_attribut{src})]})]
" alt="logo" width="180px" class="overrub#EXPOSE#ID_RUBRIQUE" />

Voir d'autres filtres images
http://www.spip.net/fr_article3327.html

Le script swapit provient de
http://rip747.wordpress.com/2006/12/15/jquery-my-new-plugin-swapit/
$(function(){
$("#test").swapit("b-aboutus-over.jpg", "b-aboutus.jpg");
$(".over").swapit("b-contactus-over.jpg", "b-contactus.jpg")
});
<div id="test"></div>
<img src="b-contactus.jpg" class="over">

-->]#CACHE{7*24*3600}
#HTTP_HEADER{'Content-Type: text/javascript'}

$.fn.swapit = function(a,b){
return this.each(function(){
var i = (new Image).src = a;
var i2 = (new Image).src = b;
// bind the mouseover and mouseout event to swap the images
if($(this).get(0).tagName.toUpperCase() == "IMG"){
$(this).mouseover(function(){
$(this).attr("src", a);
}).mouseout(function(){
$(this).attr("src", b);
});
}else{
$(this).mouseover(function(){
$(this).background("url(" + a + ")");
}).mouseout(function(){
$(this).background("url(" + b + ")");
});
}
});
}

$(function(){
<BOUCLE_logoarticles(ARTICLES){logo}>
[$(".overart#ID_ARTICLE").swapit("(#LOGO_ARTICLE||image_reduire{180,180}|extraire_attribut{src})",
"[(#LOGO_ARTICLE||image_reduire{180,180}|image_nb{330,330,330}|image_gamma{-30}|extraire_attribut{src})]");]
</BOUCLE_logoarticles>

<BOUCLE_logorubriques(RUBRIQUES){logo}>
[$(".overrub#ID_RUBRIQUE").swapit("(#LOGO_RUBRIQUE||image_reduire{180,180}|extraire_attribut{src})",
"[(#LOGO_RUBRIQUE||image_reduire{180,180}|image_nb{330,330,330}|image_gamma{-30}|extraire_attribut{src})]");]
</BOUCLE_logorubriques>
});

_______________________________________________
spip-zone@rezo.net - http://listes.rezo.net/mailman/listinfo/spip-zone

Si c'est juste un bout de code qui marche et ne va plus trop evoluer,
prq pas le mettre directement sur spip-contrib.
Apres tout la zone, c'est pour le developpement et contrib pour la
distrivution/explication...

Pierre

--
Pierre Andrews
Ph.D. Student, The University of York
Ing.info.dipl. EPFL
pierre.andrews@a3.epfl.ch
http://www.cs.york.ac.uk/~pandrews