Partage
  • Partager sur Facebook
  • Partager sur Twitter

Effet css

comment faire cette beauté?

Sujet résolu
    14 janvier 2006 à 12:31:08

    Voila je suis tombé sur un site, et l'effet qu'on on passe sur un lien qui est sur le site m'a frappé, pourriez vous m'expliqué comment le webmaster a fait, j'ai essayé de regarder son css, mais je n'est pas tout compri :(

    Voici le site en question: http://www.rebel-heart.net/brushes/

    En éspérant que vous pourrez m'en dire plus sur la technique a appliquer(cela pourrait m'être très utile)
    Merci d'avance

    Arthur
    • Partager sur Facebook
    • Partager sur Twitter
      14 janvier 2006 à 12:38:19

      En tout cas ca ne marche que sous Internet Explorer ... :colere:
      Peu etre une fonction inventée ? o_O

      Moi jdis ca jdis rien ! :-°
      • Partager sur Facebook
      • Partager sur Twitter
        14 janvier 2006 à 12:38:58

        C'est normal que tu n'aies pas trouver dans le CSS puisque c'est du Javascript.

        Mais comme je n'y connais rien je ne pourrais pas te dire lequel donne cet effet. :(
        • Partager sur Facebook
        • Partager sur Twitter
          14 janvier 2006 à 12:43:01

          je doute que tu puisse faire çà en CSS, c'est simplement une frame avec une image.
          voila : http://www.rebel-heart.net/brushes/images/00_00.jpg

          Citation : dinoplasmma

          En tout cas ca ne marche que sous Internet Explorer ... :colere:
          Peu etre une fonction inventée ? o_O

          Moi jdis ca jdis rien ! :-°


          dit rien plutôt. Et puis çà marche aussi sous FireFox
          • Partager sur Facebook
          • Partager sur Twitter
            14 janvier 2006 à 12:45:11

            non je parle des liens, essaye de chercher une page avec un lein tu aurai vu.

            Arf du javascript j'aurai pu chercher lol ^^
            Faut peut etre deplacé dans un autre forum au cas ou quelqu'un connai
            • Partager sur Facebook
            • Partager sur Twitter
              14 janvier 2006 à 12:47:08

              ==>minirop

              Je crois qu'il veut parler de la transition de couleur lors du survol d'un lien.
              • Partager sur Facebook
              • Partager sur Twitter
                14 janvier 2006 à 12:48:38

                Effectivement si tu laisse la page bien charger apres quand tu pointe sur un lien il passe en blanc mais avant ya un ptit effet
                • Partager sur Facebook
                • Partager sur Twitter
                  14 janvier 2006 à 12:58:53

                  Dans ton <head> marque ça :

                  <script src="linkfade.js"></script>

                  Ensuite ouvre Bloc-Notes ou Note-Pad++, copie ce code et enregistre le en linkfade.js (il doit se trouver dans le même dossier que tes pages)

                  /******************************************************************
                  *       Script name: Link fader (http://design64.net/js/linkfader.html)
                  *       Version: 1.0
                  *       Date: 12.05.02
                  *       Usage: Freeware - You may modify this script as you wish,
                  *              as long as you don't remove this header comment.
                  *
                  *       Script by: Fayez Zaheer (viol8r on #webdesign [irc.zanet.org.za])
                  *       Email: fayez@design64.net
                  *       Web site: http://design64.net
                  *       Original idea: http://anarchos.xs.mw/fade.phtml
                  ******************************************************************/


                  // DELETE COMMENTS THAT START WITH // TO MAKE THE FILE SIZE SMALLER.

                  // This script will no longer overwrite your current onmouseover and
                  // onmouseout attributes - it will instead skip those links. If you would
                  // still like to fade them, add findLink(this.id) to your onmouseover
                  // and clearFade() to your onmouseout, like so -
                  // <a href="#" onmouseover="findLink(this.id); yourFunction()"
                  // onmouseout="clearFade(); yourSecondFunction()">
                  // Make sure to put it BEFORE any "return" statements otherwise
                  // the fade will not execute.

                  // Fade-to colour without the # (6 character value only!)
                  var fadeTo = "ffffff";

                  // Fade in colour increment/decrement by
                  var fiBy = 16;

                  // Fade out colour increment/decrement by
                  var foBy = 25;

                  // Speed - milliseconds between each colour change in the fade
                  // Less than 10ms doesn't really make all that much difference, so
                  // 10 is the minimum effective value.
                  var speed = 18;

                  // Class name of links to NOT fade (i.e. ignore)
                  // var ignoreClass = "somebogusvalue" if you don't want to
                  // use this feature. Alternatively, add onmouseover="clearFade()"
                  // to the link you do not wish to fade.
                  var ignoreClass = "ignore";

                  // No more changes required (unless you know what you are doing)
                  // Enjoy... and email me and let me know what site(s) you are using it on :)
                  var opera, ie, dom, x = 0, oc, fader, ocs = new Array();

                  if (navigator.userAgent.indexOf("Opera") != -1) opera = true
                  else if (document.all && !opera) ie = true
                  else if (!document.all && document.getElementById) dom = true;

                  function convertRGB(z)
                          {
                                  var newfcS = "", splitter = "";
                                  splitter = z.split(",");
                                  splitter[0] = parseInt(splitter[0].substring(4, splitter[0].length));
                                  splitter[1] = parseInt(splitter[1]);
                                  splitter[2] = parseInt(splitter[2].substring(0, splitter[2].length-1));
                                  for (var q = 0; q < 3; q++)
                                          {
                                                  splitter[q] = splitter[q].toString(16);
                                                  if (splitter[q].length == 1) splitter[q] = "0" + splitter[q];
                                                  newfcS += splitter[q];
                                          }
                                  return newfcS;
                          }

                  function currentColour(index)
                          {
                                  var temp, cc;
                                  if (opera) cc = document.links[index].style.color
                                  else if (ie) cc = document.links[index].currentStyle.color
                                  else if (dom) cc = document.defaultView.getComputedStyle(document.links[index], '').getPropertyValue("color");
                                  if (cc.length == 4 && cc.substring(0, 1) == "#")
                                          {
                                                  temp = "";
                                                  for (var a = 0; a < 3; a++)
                                                          temp += cc.substring(a+1, a+2) + cc.substring(a+1, a+2);
                                                  cc = temp;
                                          }
                                  else if (cc.indexOf("rgb") != -1) cc = convertRGB(cc)
                                  else if (cc.length == 7) cc = cc.substring(1, 7)
                                  else cc = fadeTo;
                                  return cc;
                          }


                  function convert2Dec(hex)
                          {       
                                  var rgb = new Array();
                                  for (var u = 0; u < 3; u++)
                                          rgb[u] = parseInt(hex.substring(u*2, u*2+2), 16);
                                  return rgb;
                          }

                  function newRGB(f, n, d)
                          {
                                  var change;
                                  if (d == 1) change = fiBy
                                  else change = foBy;
                                  for (var g = 0; g < 3; g++)
                                          {
                                                  if (n[g] > f[g] && n[g] - change >= 0) n[g] -= change;
                                                  if (n[g] < f[g] && n[g] + change <= 255) n[g] += change;
                                          }
                                  return n;
                          }

                  function fade(index, d)
                          {
                                  var fc, nc, temp = new Array(), finished = false;
                                  nc = convert2Dec(currentColour(index));
                                  if (d == 1) fc = convert2Dec(fadeTo)
                                  else fc = convert2Dec(ocs[x]);
                                  temp = convert2Dec(currentColour(index));
                                  nc = newRGB(fc, nc, d);
                                  if ((nc[0] == temp[0]) && (nc[1] == temp[1]) && (nc[2] == temp[2]))
                                          finished = true;
                                  if (!finished) document.links[x].style.color = "rgb(" + nc[0] + "," + nc[1] + "," + nc[2] + ")"
                                  else clearInterval(fader);
                          }

                  function findLink(over)
                          {
                                  if (document.layers) return;
                                  if (fader)
                                          {
                                                  clearInterval(fader);
                                                  document.links[x].style.color = "#" + ocs[x];
                                          }
                                  if (over && !this.id) this.id = over;
                                  x = 0;
                                  while (!(this.id == document.links[x].id) && (x < document.links.length))
                                          x++;
                                  if (this.id == document.links[x].id)
                                          {
                                                  oc = currentColour(x);
                                                  fader = setInterval("fade(" + x  + ", 1)", speed);
                                          }
                          }

                  function clearFade()
                          {
                                  if (document.layers) return;
                                  if (fader) clearInterval(fader);
                                  fader = setInterval("fade(" + x + ", 0)", speed);
                          }

                  function init()
                          {
                                  for (var i = 0; i < document.links.length; i++)
                                          {
                                                  ocs[i] = currentColour(i);
                                                  var currentOver = document.links[i].onmouseover;
                                                  var currentOut = document.links[i].onmouseout;
                                                  var ignoreIt = document.links[i].className == ignoreClass;
                                                  if (!ignoreIt) document.links[i].id = "link" + i;
                                                  if (!currentOver && !currentOut && !ignoreIt)
                                                          {
                                                                  document.links[i].onmouseover = findLink;
                                                                  document.links[i].onmouseout = clearFade;
                                                          }
                                          }              
                  }

                  if (opera || ie || dom) window.onload = init;
                  • Partager sur Facebook
                  • Partager sur Twitter
                    14 janvier 2006 à 13:25:45

                    ok merci et je n'ai pas besoin de rajouter une balise spécial devant le lien pur que sa fasse cette effet ou encore que je prevoi ce qui s'afichera pour une personne n'ayant pas le javascript d'activer ?

                    edit: Merci sa marche nikel ;)
                    • Partager sur Facebook
                    • Partager sur Twitter
                      14 janvier 2006 à 13:31:26

                      C'est bien compliqué pour pas grand chose au final non ? ^^
                      • Partager sur Facebook
                      • Partager sur Twitter
                        14 janvier 2006 à 13:34:46

                        Citation : Arthur

                        J'ai essayé de regarder son css, mais je n'est pas tout compri :(


                        On peut regarder le CSS d'une page web?!
                        Je connaissai que le code source de la page mais pas le CSS. On fait comment pour voir?
                        • Partager sur Facebook
                        • Partager sur Twitter
                          14 janvier 2006 à 13:37:22

                          Pas grand chose c'est vite dit, je trouve que sa jette un max moi ^^

                          Sinon quand tu afcihe le code source de la page, tu voi dans le head des trucs comme:
                          <link href="Templates/css/1/forum.css" rel="stylesheet" type="text/css" media="screen, print, handheld" />

                          et donc apres tu va voir le lien et la tu a la page de css qui apparait
                          • Partager sur Facebook
                          • Partager sur Twitter
                            14 janvier 2006 à 13:54:13

                            Si jamais : http://www.e-t172.net/2005/03/24/79-decouverte-de-ecmascript. Un script qui fait le même genre d'effet, et est bien plus facile à comprendre à mon goût (mais ça, c'est pour ceux qui veulent comprendre).
                            • Partager sur Facebook
                            • Partager sur Twitter
                              14 janvier 2006 à 13:55:49

                              Un logiciel très pratique qui permet de modifier le CSS et de voir en temps réel les effets sur la page : Web Developer.

                              Il contient également beaucoup d'autres fonctionnalités.

                              PS : En fait, c'est pas vraiment un logiciel, c'est une barre d'outils ajouté au navigateur. Il te suffit de faire 2 clics, et tu peux modifier le CSS ;)
                              • Partager sur Facebook
                              • Partager sur Twitter
                                14 janvier 2006 à 15:51:58

                                Lol je ne tiens pas sécialement a comprendre, un jour peut-etre ^^

                                Sinon webdevelopper je connai pour m'en servir mais il ne pouvais pas me dégoter le code javascript aussi proprement que exelo
                                • Partager sur Facebook
                                • Partager sur Twitter
                                  27 janvier 2006 à 12:48:42

                                  Le script ne fonctionne pas sous internet explorer :(

                                  Quelqu'un a une solution ?
                                  sachant que http://www.e-t172.net/2005/03/24/79-decouverte-de-ecmascript ne fonctionne pas :euh:
                                  pruve: http://infonetjv.free.fr
                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    27 janvier 2006 à 13:01:34

                                    Je crois qu'il te faut l'adapter. Mais ouvre un nouveau topic, et poste y le code.
                                    • Partager sur Facebook
                                    • Partager sur Twitter

                                    Effet css

                                    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                    • Editeur
                                    • Markdown