11548 sujets

JavaScript, DOM et API Web HTML5

Changer "au vol" le paramètre d'opacité CSS d'une balise

Hello, j'avais commencé à expliquer mon problème dans une autre rubrique :

J'ai une sorte de bannière constituée de miniatures; dont l'opacité augmente jusqu'à la moitié (arrondie) de la bannière puis régresse ensuite grace à un script php.

par exemple si j'ai 17 images;
J'ai l'opacité (en css) qui a comme valeur; pour l'image :
1,2,3,4 -> 0
5 -> 0.25
6 -> 0.5
7 -> 0.75
8 -> 1
9 -> 0.75
10 -> 0.5
11 -> 0.25
12, 13, 14, 15,16,17 -> 0.

Maintenant, voilà le truc :

Cette bannière sera dans un div, et, de part et d'autre de celui-ci;
je voudrais deux flèche (précédent-suivant) qui ferait avancer ou reculer la bannière d'une image.

Je suppose que je dois faire ça en javascript...
Et puis pour corser la chose; il faudrait que le "focus" de l'opacité se déplace pour que ce soit tjs l'image du milieu qui soit la plus visible.

Pourriez vous me donner des pistes ? Je connais vraiment rien en javascript Smiley decu

Merci !
Modifié par gordie (28 May 2007 - 23:46)
Juste une précision en CSS (au moins jusqu'à la version 2.1) il n'existe pas à proprement parler de "propriété d'opacité".

Seul IE et la famille Mozilla avec respectivement :
filter:Alpha(opacity=xx) et -moz-opacity: xx;
peuvent donner cette impression non W3Cènne


Enfin à ma connaissance. Smiley cligne
Opacity est supporté nativement par Firefox, Safari et Opera.

Pour être x-browser :

opacity = (opacity / 100);
MozOpacity = (opacity / 100);
KhtmlOpacity = (opacity / 100);
filter = "alpha(opacity=" + opacity + ")";


Opacity va de 0 a 1 sauf sous IE
Modifié par Shinuza (30 May 2007 - 19:10)
Si tu fais ça en javascript (ce que je te conseille vu que ça a l'air un poil compliqué), penche toi sur prototype.js (une super librairie)

=> Element.setStyle(tonElement, {opacity: xxx});
Se chargera de modifier l'opacité sur tout les navigateurs (ie, mozilla, opera, safari,...)

http://www.prototypejs.org/api/element#method-setstyle

Ps: Tu as aussi la méthode Element.setOpacity(element, opacite), même si elle n'est pas marqué dans la doc Smiley cligne
Je suis absolument pas sur que 70ko de js soient necessaires pour faire un pauvre effet comme celui ci Smiley sweatdrop
Modifié par Shinuza (31 May 2007 - 16:53)
C'est sur.... Alors : 

//opacity entre 0 et 1
function setOpacity(element, opacity) {
    element.style.opacity = opacity;
    element.style.MozOpacity = opacity;
    element.style.KHTMLopacity = opacity;
    element.style.filter.alpha = {'opacity':opacity*100};
}

Non testé mais un truc dans le genre fera l'affaire.

PS: La dernière de prototype fait 90Ko Smiley langue
Modifié par MoOx (31 May 2007 - 17:20)
J'ai jamais dis qu'il était vrai...
a écrit :
Non testémais un truc dans le genre fera l'affaire.
Voilà un code qui marche (testé celui-ci) :

function setOpacity(obj,xOpacity){
  obj.style.opacity = xOpacity;
  obj.style.MozOpacity = xOpacity;
  obj.style.KHTMLOpacity = xOpacity;
  obj.style.filter = 'alpha(opacity=' + (xOpacity*100) + ')';
}


Sinon pour ton script avec ou sans librairie ça vat être un peu compliqué, tu veux pas le commencer un peu et poster au moins un bout de code?
Modifié par matmat (01 Jun 2007 - 18:40)
Sujet clos
Aller à