11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour

J'ai découvert ce très beau code javascript, qui permet d'inversé la couleur du lien quand l'on pointe dessus, mais le probleme est que je voudrai que ce code ne s'aplique pas pour mon menu !!
Voici le code js: http://nuts.freezee.org/lien.js
et le site ou l'effet est desactivé en attendant: http://nuts.freezee.org/index.php

Donc si vous savez comment ne pas apliquer ce code sur mon header ou apliquer le code que sur le corps je vous serait tres reconnaissant.

Arthur Smiley confus
Modifié par Nuts (18 Feb 2006 - 20:52)
Le script est illisible dans le notepad : tous les sauts de ligne ont disparu ! Ce qui rend le code très difficile à suivre...
Il suffit de définir une class qui sera ignoré par le script... La variable à modifier se trouve au début du fichier...
// 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";

if (!currentOver && !currentOut && !ignoreIt)
{
    document.links[ i ].onmouseover = findLink;
    document.links[ i ].onmouseout = clearFade;
}

Modifié par Spack (15 Feb 2006 - 03:34)
Bonjour,
Je n'ai pas été voir le Js mais
Nuts a écrit :

inversé la couleur du lien quand l'on pointe dessus, mais le probleme est que je voudrai que ce code ne s'aplique pas pour mon menu !!


Arthur Smiley confus

Cela se résouds en CSS:
/*général*/
a:link{color:blue;background-color:white}
a:link:hover{color:white;background-color:blue}
/*liens du menu*/
#menu a:link{color:red;background-color:yellow}
#menu a:link:hover{color:yellow;background-color:red}

edit > le script n'est pas en action dans ta page test ?
Modifié par chmel (15 Feb 2006 - 10:31)
Pour la lisibilité;
/******************************************************************
*       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 [smile]
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;


Sinon le script n'est pas en ligne justement a cause de ce pb :x, et si je msert sert du javascript c'est que cela donne un petit plus Smiley cligne

Pour Spack, je ne comprend pas ou il faut que j'inser chacun des codes Smiley confused Smiley rolleyes [/i][/i][/i][/i][/i][/i][/i]
Dans ton script à la ligne var ignoreClass = "ignore"; tu remplace ce qui est entre les " " par la classe de ton choix menu par exemple tu peux aussi laisser comme tel...
Ensuite, dans ton code html tu fais :
<a href="#" class="menu">

ou si laissé comme tel :
<a href="#" class="ignore">


Ou encore, tu peux aussi mettre :
<a href="#" onmouseover="clearFade();>

Sans avoir à toucher la variable cité plus haut...
Modifié par Spack (17 Feb 2006 - 02:58)
Merci beaucoup sa marche nikel j'ai juste rajouté
 onmouseover="clearFade()"

sur chaque lien Smiley cligne