16/09/2011

efeito arco-íris nos links

Oi pessoal, espero que estejam bem e, por falar em bem esse bolo ai d´uma água na boca né?Tem uma cara boa, mais o que interessa é o tutorial eu vi ele no blog mundoblogger.Como colocar um efeito arco-íris nos links ( por isso o bolo colorido ) quando você colocar o mouse em qualquer link as cores das letras vão mudando nas cores do arco-íris. Bom então vamos ao tutorial, mãos a obra.Cliquem em continue lendo para ver o tutorial.

outra imagem de bolo né:/

Vão para editar HTML/expandir modelos de widgets/apertem CTRL+F e na caixa de pesquisa procurem por </head> Feito isso copiem o código abaixo e colem antes de </head>. Feito isso visualizem para ver se está tudo certo e salvem. Caso queiram mudar a velocidade das transformações das cores é só você mudar onde tem var rate = 20. É só isso beijos.

<script type='text/javascript'>

//<![CDATA[

var rate = 20;

if undefineddocument.getElementById)
window.onerror=new Functionundefined"return true")

var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID

if undefineddocument.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if undefineddocument.getElementById) {
document.captureEventsundefinedEvent.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}

function doRainbowundefinedobj)
{
if undefinedact == 0) {
act = 1;
if undefinedobj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setIntervalundefined"ChangeColorundefined)",100);
}
}


function stopRainbowundefined)
{
if undefinedact) {
objActive.style.color = clrOrg;
clearIntervalundefinedTimerID);
act = 0;
}
}


function doRainbowAnchorundefined)
{
if undefinedact == 0) {
var obj = event.srcElement;
while undefinedobj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if undefinedobj.tagName == 'A' || obj.tagName == 'BODY')
break;
}

if undefinedobj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setIntervalundefined"ChangeColorundefined)",100);
}
}
}


function stopRainbowAnchorundefined)
{
if undefinedact) {
if undefinedobjActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearIntervalundefinedTimerID);
act = 0;
}
}
}


function Mozilla_doRainbowAnchorundefinede)
{
if undefinedact == 0) {
obj = e.target;
while undefinedobj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if undefinedobj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}

if undefinedobj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setIntervalundefined"ChangeColorundefined)",100);
}
}
}


function Mozilla_stopRainbowAnchorundefinede)
{
if undefinedact) {
if undefinedobjActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearIntervalundefinedTimerID);
act = 0;
}
}
}


function ChangeColorundefined)
{
objActive.style.color = makeColorundefined);
}


function makeColorundefined)
{
// Don't you think Color Gamut to look like Rainbow?

// HSVtoRGB
if undefinedelmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = undefined255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = undefinedt1 - t2) * t3 / 60;

if undefinedelmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if undefinedelmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if undefinedelmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if undefinedelmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if undefinedelmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if undefinedelmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}

elmR = Math.floorundefinedelmR).toStringundefined16);
elmG = Math.floorundefinedelmG).toStringundefined16);
elmB = Math.floorundefinedelmB).toStringundefined16);
if undefinedelmR.length == 1) elmR = "0" + elmR;
if undefinedelmG.length == 1) elmG = "0" + elmG;
if undefinedelmB.length == 1) elmB = "0" + elmB;

elmH = elmH + rate;
if undefinedelmH >= 360)
elmH = 0;

return '#' + elmR + elmG + elmB;
}

//]]>

</script>



10 comentários:

  1. Ótima dica !
    Segue?
    http://sweetdreamssah.blogspot.com/

    ResponderExcluir
  2. Oi! Já coloquei o seu link lá!

    E só mais uma coisinha! Apesar da nossa imagem estar ali na elite, não tem o link, apenas a imagem.

    Beijos!

    curiosanews.blogspot.com

    ResponderExcluir
  3. Olá!

    Adorei seu blog, ele é uma fofura!
    Ahhh já estou te seguindo, quero ficar seeeeeempre ligadinha aqui ;)
    Ficaria muito feliz, se você me visitasse e virasse minha seguidora também!
    Para assim, trocarmos mais idéias!


    Te espero no Beleza em Foco
    www.belezaaemfoco.blogspot.com

    ResponderExcluir
  4. Fica muito bonito, mas no meu nao dá.

    Vc anda meio sumida no seu e no meu blog.
    Aparece la mais vezes.

    Http://isatkmvskarku.blogspot.com

    Bjs.....

    ResponderExcluir
  5. Amei, fica um efeito lindooo,Obrigado por sua vista lá no meu cantinho Rosa Chock: Tem post novo: http://tudorosachok.blogspot.com/2011/09/corte-que-fiz-nas-madeixas-de-aline.html
    Ótima terça-feira!!
    Bjim

    ResponderExcluir
  6. Oiiii Rose que fofo que fica menina adorei :D
    Beijãooooo

    ResponderExcluir
  7. Oie
    Bem bacana o tutorial, bastante útil e fica super lindo *--*

    Bjs

    http://blogdemeninasparameninasoficial.blogspot.com/

    ResponderExcluir
  8. Oi, vim informar que tem selinho para você lá no blog,
    Beijooos,
    Anne KS (http://futrikomix.blogspot.com)

    ResponderExcluir
  9. Gostei da dica!! Vamos seguir uma a outra? Te convido a conhecer meu blog!!
    http://corinamvieira.blogspot.com/

    ResponderExcluir

Vai comentar, que bom mais tem algumas regrinhas
-Tem que falar pelo menos um pouco sobre o post
-Os comentários são todos moderados para que eu possa retribuir todos.
-Não esqueçam de deixar o link do blog de vocês para que eu possa retribuir.
-não se esqueçam de seguir.
-PODEM COMENTAR com o link do blogs de vocês sem medo pois eu ativei o captha a confirmação de palavras entã vocês podem comentar sem medo de ter os blogs de vocês excuidos, eu sei que é chato mais é necessário, sugiro que façam isso no blogs de vocês também.
bjs