Sujets similaires

Oy' les gens !!
En fait je voudrais utiliser le code à C/C ici :
http://www.css-actif.com/t13855-plugin-effet-rollover-sur-une-image
...mais je suis tellement noob que je n'arrive même pas à le faire marcher.
Mon but est d'afficher une image descriptive de l'image de rang quand on clique sur l'image originelle.
Le délire c'est que si jamais je mets le premier effet (quand on passe la souris sur l'image elle change) et que j'en mets un autre (celui qui change au clic) en dessous dans mon java', bah ça marche pas.
Donc j'ai abdiquée l'idée et ait cherchée à faire que des codes qui font changer les images au clic... Mais marche pas non plus. Le code que je voudrais opérationnel est ci-dessous.
La première image concerne ma signature, et les autres sont donc celles du rang.

Code:: $(function() {
// Première image
$('#ruko-signature').rollover({
imgClick: 'http://img15.hostingpics.net/pics/121421Snowflakes.png'
trigger: 'click'
});

// Deuxième image
$('#NE').rollover({
imgClick: 'http://img15.hostingpics.net/pics/46496334NE.png'
trigger: 'click'
});

// Troisième image
$('#LE').rollover({
imgClick: 'http://img15.hostingpics.net/pics/70845587LE.png'
trigger: 'click'
});

// Quatrième image
$('#CN').rollover({
imgClick: 'http://img15.hostingpics.net/pics/87916174CN.png'
trigger: 'click'
});

// Cinquième image
$('#NG').rollover({
imgClick: 'http://img15.hostingpics.net/pics/72854570NG.png'
trigger: 'click'
});

// Sixième image
$('#CG').rollover({
imgClick: 'http://img15.hostingpics.net/pics/36615537CG.png'
trigger: 'click'
});

// Septième image
$('#LG').rollover({
imgClick: 'http://img15.hostingpics.net/pics/95019054LG.png'
trigger: 'click'
});

// Huitième image
$('#TN').rollover({
imgClick: 'http://img15.hostingpics.net/pics/87775189TN.png'
trigger: 'click'
});

// Neuvième image
$('#LN').rollover({
imgClick: 'http://img15.hostingpics.net/pics/87571173LN.png'
trigger: 'click'
});

// Dixième image
$('#CE').rollover({
imgClick: 'http://img15.hostingpics.net/pics/25853455CE.png'
trigger: 'click'
});
});

...Donc pour l'instant, je survie avec celui-ci qui marche. .O. (Celui quand on passe la souris dessus marche donc si on le met tout seul, mais c'est vraiment pas celui que je veux)

Code:: $(function() {
// Première image
$('#ruko-signature').rollover({
imgSurvol: 'http://img15.hostingpics.net/pics/121421Snowflakes.png'
});

// Deuxième image
$('#NE').rollover({
imgSurvol: 'http://img15.hostingpics.net/pics/46496334NE.png'
});

// Troisième image
$('#LE').rollover({
imgSurvol: 'http://img15.hostingpics.net/pics/70845587LE.png'
});

// Quatrième image
$('#CN').rollover({
imgSurvol: 'http://img15.hostingpics.net/pics/87916174CN.png'
});

// Cinquième image
$('#NG').rollover({
imgSurvol: 'http://img15.hostingpics.net/pics/72854570NG.png'
});

// Sixième image
$('#CG').rollover({
imgSurvol: 'http://img15.hostingpics.net/pics/36615537CG.png'
});

// Septième image
$('#LG').rollover({
imgSurvol: 'http://img15.hostingpics.net/pics/95019054LG.png'
});

// Huitième image
$('#TN').rollover({
imgSurvol: 'http://img15.hostingpics.net/pics/87775189TN.png'
});

// Neuvième image
$('#LN').rollover({
imgSurvol: 'http://img15.hostingpics.net/pics/87571173LN.png'
});

// Dixième image
$('#CE').rollover({
imgSurvol: 'http://img15.hostingpics.net/pics/25853455CE.png'
});
});

Voilà, si une jolie âme pure & charitable voulait bien aider la kikoolol que je suis, car elle s'est prise la tête en vain toute l'aprem. >< Bonne soirée !

Si je comprends bien, l'image doit être différente au survol et au clic c'est bien ça ?

En fait non. (désoléeduretardj'étaisenweekend><)
Je voudrais qu'il n'y ait pas de changement d'image au survol mais qu'elle change au clic.

Le problème c'est que le code pour qu'elle change au clic ne marche pas. ><" Quand je clic, bah... Il ne se passe rien.
J'aimerais que quelqu'un m'aide à débeugger ce code. C'est pas possible, j'ai dû faire une erreur dedans, y'a forcément une raison pour qu'il plante. >< (Surtout qu'il a marché un moment et dès que j'ai rajoutée une troisième image, il n'a plus jamais marché...)

Est ce que tu peux me donner le HTML qui va avec, comme ça je pourrai faire mes test plus vites s'il te plait ^^ ?

Sinon, en regardant ton code, je me demande... Normal qu'il y ai pas de virgules entre les lignes du imgClick et celle trigger ? Par ce que dans le tuto il en met une... C'est peut être pas ça hein, je compare juste ^^'

Code:: // DANS LE TUTO
$('#mon-image').rollover({
imgClick: 'URL DE VOTRE IMAGE AU CLIC',
trigger: 'click'
});

// DANS TON CODE
$('#ruko-signature').rollover({
imgClick: 'http://img15.hostingpics.net/pics/121421Snowflakes.png'
trigger: 'click'
});

OH MON DIEU C'ETAIT BEL ET BIEN CETTE VIRGULE !! VIENS QUE JE T'EMBRASSE !! *Roule un palot*

...Oh pardon. Bref, merci, merci et merci encore ! Quelle gourde j'ai pas vue cette virgule alors que j'ai vérifié chaque caractère quinze fois ! *Va se pendre* Là ça marche tout correctement, les survolés et les cliqués se mélangent pour une symphonie de code presque parfaite !

Oui, il me reste un petit problème. Par exemple, si je fais le code pour l'image de ma signature... Ça s'affiche juste pour la première fois où l'image apparait dans la page et pas à chaque fois. Y'a un moyen de remédier à cela ?

Tu mers le code directement dans ta signature ou bien dans une page html (et dans ta signature tu mets une iframe vers cette page)?
dans les 2 cas, peut tu me copier coller tout le code ?

Code:: <img id="zune-signature" src="http://img15.hostingpics.net/pics/126317ZunySignature.png">

Code:: // Onzième image
$('#zune-signature').rollover({
imgSurvol: 'http://img15.hostingpics.net/pics/663472Zuny.png'
});

Code:: /*!
* Plugin Rollover par Espeon pour CSSActif
* (http://www.css-actif.com)
*/
(function ($) {
$.fn.rollover = function (options) {
var defaults = {
imgNormal: $(this).attr('src'), // Image par défaut
imgSurvol: $(this).attr('src'), // Image au survol
imgClick: $(this).attr('src'), // Image au click
imgClickSurvol: $(this).attr('src'), // Image au survol de imgClick (special)
duration: 0, // Transtion (0 = pas de transition
trigger: ''
};

options = $.extend(defaults, options);

// Effet de changement d'image
var chgImage = function (imgSrc, el) {
$(el).fadeOut(options.duration, function () {
$(el).attr('src', imgSrc).fadeIn(options.duration);
});
};

// Changement au clic
var rollClick = function (el) {
if ($(el).attr('src') == options.imgClick || (options.trigger=='special' && $(el).attr('src') == options.imgClickSurvol)) {
// Image de base
chgImage(options.imgNormal, el);

if (options.trigger == 'special') {
if (options.imgClickSurvol != options.imgNormal) {
// S'il y a une image au survol de imgClick, on désactive son binding
$(el).unbind('.superSpecial');
}

// Dans le cas hover+click on (ré)active le binding sur l'image de base
$(el).bind({
'mouseenter.special': function (e) {
chgImage(options.imgSurvol, this);
},
'mouseleave.special': function (e) {
chgImage(options.imgNormal, this);
}
});
}
} else {
// Image au clic
chgImage(options.imgClick, el);

if (options.trigger == 'special') {
// Dans le cas de hover+click on désactive le binding sur l'image de base
$(el).unbind('.special');

if (options.imgClickSurvol != options.imgNormal) {
// S'il y a une image au survol de imgClick, on (ré)active son binding
$(el).bind({
'mouseenter.superSpecial': function (e) {
chgImage(options.imgClickSurvol, this);
},
'mouseleave.superSpecial': function (e) {
chgImage(options.imgClick, this);
}
});
}
}
}
};

// Switch en fonction du trigger
switch (options.trigger) {
case 'click':
// Image au clic
return $(this).bind({
click: function (e) {
rollClick(this);
}
});

case 'special':
// Image au survol + au click
return $(this).bind({
'mouseenter.special': function (e) {
chgImage(options.imgSurvol, this);
},
'mouseleave.special': function (e) {
chgImage(options.imgNormal, this);
},
click: function (e) {
rollClick(this);
}
});

default:
// Image au survol
return $(this).bind({
mouseenter: function (e) {
chgImage(options.imgSurvol, this);
},
mouseleave: function (e) {
chgImage(options.imgNormal, this);
}
});
}
};
})(jQuery);

Ça, c'est celui juste pour ma signature mais vu que toutes les images ont le même problème... (le système ne s'actionne qu'à sa première apparition sur la page càd au premier poste en général) ...Si on résout celui-ci on doit pouvoir tout résoudre, je pense.
Et je mets le code directement dans ma signature. °°" J'avoue que le deuxième procédé m'apparait comme un ensemble de mot incompréhensible...

Ok ok, alors le problème vient de là Wink

Comme tu l'as vu, ton utilise de ID (#zune-signaure) pour la signature.. Or le principe d'un id est d'être unique, il n'est qu'une seule fois dans une page html ! (contrairement aux class... Je te laisse te renseigner sur la différence entre une id et une class ^^).

Je vois 2 solutions, je vais t'en proposer une première mais pas sûre qu'elle marche parfaitement... c'est remplacer tous tes id="machin" par class="machin". Ensuite dans le code JS, remplacer les $('#machin') par $('.machin')

Exemple avec ton code :

Code:: <img class="zune-signature" src="http://img15.hostingpics.net/pics/126317ZunySignature.png" />

Code:: // Onzième image
$('.zune-signature').rollover({
imgSurvol: 'http://img15.hostingpics.net/pics/663472Zuny.png'
});

Dis moi si cela marche Wink

Sinon on passera à l'autre solution, qui elle utilise l'ensemble de mots incompréhensibles XDDD

Et... Et... Et si, ça marche !
(En tout cas pour un exemplaire en clic et un en survol, donc pour tous... A moins qu'il y ait des problèmes d'incompatibilités mais je pense pas)

Bref, demain -ou dès que je peux- j'essaie d'appliquer l'exemple à tous et j'éditerais ce message pour dire si tout marche ou pas.

Merci encore :3

EDIT :: Ça marche !! On peux clore et merci !! *Huuug*

Problème Rollover Click ?

Problème Rollover Click ?

Sujets similaires

Sujets similaires

Partenaires Or