[CSS] cet effet possible en css ???

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS] cet effet possible en css ???

tellier

Voila sur les site de roxorgamers (ex: http://teammpm.roxorgamers.com/)

le lien change de couleur avec la le passage de la souris. Le faire changer de couleur po de probleme je sais faire. Mais comment faire pr ke la couleur change progressivement comme sur le site?

merci

Publicité

souk

Tourist

avec du javascript specifique a IE qui ne marche pas sous mozilla/firebird ?

---------------
L'inventeur de la cédille est un certain monsieur Groçon .

Jubijub

Parce que je le VD bien

c ce que j'allais dire...y doit surement y avoir une boucle qui fait changer de couleur au lien très vite en lui faisant prendre plusieurs couleurs : le rendu doit donner ca, avec un bon timming

---------------
Jubi Photos : Flickr - 500px

tellier

dc po possible en css ?

Jubijub

Parce que je le VD bien

je pense pas...avec un mouseover tu peux lancer un effet, mais ce serait un changement immédiat de couleur : je vois pas de moiyen de le faire progressivement

---------------
Jubi Photos : Flickr - 500px

tellier

oki
tampis

tellier

bon jvien de voir ds la source; c'est bien du JS

merde jaime po js

gizmo

euh... ce sont quelles liens qui changent de couleur? Parce que sous firebird, ils sont simplement noir.

KrisCool

Verbeux

Code :

/*************
**** <config>
**/
startColor = "#000000"; // initial link color
endColor = "#FFFFFF"; // final link color
stepIn = 20; // delay when fading in
stepOut = 20; // delay when fading out
/*
** set to true or false; true will
** cause all links to fade automatically
***/
autoFade = true;
/*
** set to true or false; true will cause all CSS
** classes with "fade" in them to fade onmouseover
***/
sloppyClass = false;
/**
**** </config>
**************/
/*************
**** <install>
**
Now, once you have customized your fading colors,
you need to include your customized .js file on
every page that you want to use it in. You can
include javascript files using this syntax (in
the head of a document):
<script src="fade.js" language="Javascript"></script>
Now that you have the file included, you need to
setup your links a small bit. Each link that you
want to fade needs to use the fade class.
Example:
<a href="blah.html" class="fade">click here</a>
Also, the link must be plain text. This means
that you can't have <b>'s, <i>'s, <font>'s, etc.
inside of the link.
Example of what not to do:
<a href="blah.html" class="fade"><b>click</b> here</a>
**
**** </install>
**************/
hexa = new makearray(16);
for(var i = 0; i < 10; i++)
hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";
document.onmouseover = domouseover;
document.onmouseout = domouseout;
startColor = dehexize(startColor.toLowerCase());
endColor = dehexize(endColor.toLowerCase());
var fadeId = new Array();
function dehexize(Color){
var colorArr = new makearray(3);
for (i=1; i<7; i++){
for (j=0; j<16; j++){
if (Color.charAt(i) == hexa[j]){
if (i%2 !=0)
colorArr[Math.floor((i-1)/2)]=eval(j)*16;
else
colorArr[Math.floor((i-1)/2)]+=eval(j);
}
}
}
return colorArr;
}
function domouseover() {
if(document.all){
var srcElement = event.srcElement;
if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade" ) != -1))
fade(startColor,endColor,srcElement.uniqueID,stepIn);
}
}
function domouseout() {
if (document.all){
var srcElement = event.srcElement;
if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade" ) != -1))
fade(endColor,startColor,srcElement.uniqueID,stepOut);
}
}
function makearray(n) {
this.length = n;
for(var i = 1; i <= n; i++)
this[i] = 0;
return this;
}
function hex(i) {
if (i < 0)
return "00";
else if (i > 255)
return "ff";
else
return "" + hexa[Math.floor(i/16)] + hexa[i%16];}
function setColor(r, g, b, element) {
var hr = hex(r); var hg = hex(g); var hb = hex(b);
element.style.color = "#"+hr+hg+hb;
}
function fade(s,e, element,step){
var sr = s[0]; var sg = s[1]; var sb = s[2];
var er = e[0]; var eg = e[1]; var eb = e[2];
if (fadeId[0] != null && fade[0] != element){
setColor(sr,sg,sb,eval(fadeId[0]));
var i = 1;
while(i < fadeId.length){
clearTimeout(fadeId[i]);
i++;
}
}
for(var i = 0; i <= step; i++) {
fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +
step+ " )),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+
" )),Math.floor(" +sb+ " * ((" +step+ "-" +i+ " )/" +step+ " ) + " +eb+ " * (" +i+ "/" +step+ " )),"+element+" );",i*step);
}
fadeId[0] = element;
}
function imgfade(e,mode)
{
if( mode == 0 )
{
e.filters.alpha.opacity = 80
}
else
{
e.filters.alpha.opacity = 15
}
}

fade.js, le script utilisé.
Etant donné qu'il fait appel aux filtres, il ne fonctionne qu'avec IE.

Message édité par KrisCool le 05-02-2004 à 14:32:30

---------------
Loose Change Lies | Bars | Last.fm

MagicBuzz

C'est du 100% M$ mais sans script (enfin, très peu)

http://msdn.microsoft.com/workshop [...] ilt_08.htm

Presque aucun script, c'est le filtre DX qui s'occupe de la temporisation...
http://msdn.microsoft.com/workshop [...] uttons.htm

Mais là bah c'est du IE sur Win32 only

Publicité

Hermes le Messager

Breton Quiétiste

MagicBuzz a écrit :

C'est vraiment pas sorcier de faire un fade compatible IE, Moz et Opera pourtant. Il y en a vraiment (je ne parle pas de toi) qui aiment se compliquer la vie bêtement. Jouer sur une couleur CSS avec du JS, c'est enfantin.

MagicBuzz

Vi mais dans mon second exemple, ça fait plus que ça

Le truc avec des bordures ombragées, etc. c'est pas des images, juste des divs.

Les filtres "DX" de IE sont vraiment très bien. Seul problème, c'est qu'ils n'ont pas leur équivalents chez les autres, du coup, inutilisable

Kristoph

MagicBuzz a écrit :

A quand les sites Webs "Optimised for Radeon 9700 with DirectX 9" avec les liens qui changent de couleur en 3D temps réel avec support des pixel shader ?

MagicBuzz

Tu rigoles, mais mine de rien, regarde cette page tout bête (avec IE 5.5 ou plus évidement) :

http://msdn.microsoft.com/library/ [...] banner.asp

Bah y'a pas une ligne de script, juste des balises HTML.

jagstang

Pa Capona ಠ_ಠ

MagicBuzz a écrit :

Oui, quelle page ?

MagicBuzz

de quoi ?

Kristoph

MagicBuzz a écrit :

Quelle horreur ! :ouch: :ouch:

Hicks

Ya man!

ben alors ont fait comment... il est ou le script java ( voir le fade du 1er link en haut du topik )

tx

---------------
Il me reste un pays à connaître. Il me reste un pays à donner. Et le jour où ce pays naîtra, nul doute, je me souviendrai ---Gilles Vigneault---

j-'-r

Sans horraires fixe

non mais c possible avec un mouse over et background url qui change vers un gif annimé qui fait el fade...

Jubijub

Parce que je le VD bien

donc c plus du texte...

---------------
Jubi Photos : Flickr - 500px

kfman

Credo quia absurdum

Kristoph a écrit :

A quand les sites Webs "Optimised for Radeon 9700 with DirectX 9" avec les liens qui changent de couleur en 3D temps réel avec support des pixel shader ?

Dis le pour rire... [:meganne]

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

[CSS] cet effet possible en css ???

Sujets relatifs
[HTML, CSS JS] Probleme menu	[ HTML / CSS ] Mise en page et retour à la ligne.
[CSS] Problème de positionnement	[XHTML/CSS] Balise <pre> s'étire en longeur jusqu'à crlf
Pb de centrage vertical avec CSS	[CSS] Problème d'impression tableau
[CSS] Spécifier une taille minimum à un div	[CSS] Bug affichage cadre aux coins arrondis
[CSS] Centrer du texte uniquement dans la troisième colonne du tableau	[CSS] Afficher sa bannière/logo sans qu'elle soit Bloqué
Plus de sujets relatifs à : [CSS] cet effet possible en css ???

Page générée en 0.104 secondes