Here's ,the way and short tutorial in making
link animations with
java script code to make beautiful your blog accessories. Make your visitors will become fascinated watching this link color combinations
Bring your mouse cursor to some links at my others blog here
seo blog-tips , which i mean like that's
That's onmouseover function of java script , so if the mouse cursor cross over a link then will be visibleing an efect.
Ok, if you interest to use this "DODOL COLOR" with the easily way , then:
1- Insert the script below into your CSS/HTML section of your web, under the
<body> tag,
Right after the tag itself, before anything else.
<script src="http://hastiantech.googlepages.com/dodol.js"></script>After you placing the script , everyting links or anchor will be having the efects like my blog here.
2- If you'd like to add effect to other texts or paragraph (not link texts), then add the script below to the target tags:
onmouseover="dodol(this);"onmouseout="stopdodol();"What's the
tags? :
"tag" is anything inside
<> character , example :<p> or <span> or <div> or or others........
Below an
example a text paragraph with dodol efect:
<p onmouseover="dodol(this);" onmouseout="stopdodol();" align="center">example the paragraph with dodol efecttexample the paragraph with dodol efect</p>Exampleing for this usage , like at the first paragraph of this post,..please bring your mouse cursor up at that.
3- If you'd like to modifying for variations of the script, so...below the source code of "dodol script" , thats contained some description about color efects modification needed. please copy-pasting the code into notepad , then Save As with js extension , example
color.js ,
dodol.js , mylink.js or ..others..
/************************************/
/* DODOL - COLOR SCRIPT */
/* (c) Iwan Rachmanto */
/* http://free-7.blogspot.com */
/********************************/
// begins to change variables
var rate = 27;
//====================================
// "rate" is if you change to lower this value
// will be soft progressively and if higher
// be sharply,standard of the rate
// among 0 - 255
//====================================
if (document.getElementById)
window.onerror=new Function("return true")
var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 112; // Saturation
//====================================
//var elmS is Saturation
// if you change to lower this value
// will be gloomy and if higher
// be more bright , standard of this value
// 0 to 255
//====================================
var elmV = 255; // Value
//================================================
//var elmV is the rate of RGB (red-green-blue)
// changing to lower this value will be blur
//and if higher be more contrast
//================================================
var clrOrg; // A color before the change
var TimerID; // Timer ID
//============================================
// Begins to change mouse command
//===========================================
if (document.all) {
document.onmouseover =dodollink;
document.onmouseout = stopdodollink;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_dodollink;
document.onmouseout = Mozilla_stopdodollink;
}
//===================================================
// This function begins to change a text color.
//===================================================
function dodol(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",150);
}
}
//===================================================
// This function stops to change a color.
//===================================================
function stopdodol()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
//===================================================
// doRainbowAnchor
// This function begins to change a link color
//====================================================
function dodollink()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY')
{
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",150);
}
}
}
//=======================================================
// This function stops to change a link color
//=======================================================
function stopdodollink()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
//=========================================================
// This function begins to change a link color
//for Netscape6 and Mozilla browser)
//=========================================================
function Mozilla_dodollink(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY')
{
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY'
)
break;
}
if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",150);
}
}
}
//=======================================================
// This function stops to change a link color
// (for Netscape6 and Mozilla browser)
//=======================================================
function Mozilla_stopdodollink(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
//====================================================
// Change Color
// This function changes a color actually.
//====================================================
function ChangeColor()
{
objActive.style.color = makeColor();
}
//====================================================
// This function makes dodol colors.
// With litle mathematics calculations
// if you've didn't enough understanding the java script
// so please do experimenting ...
//====================================================
function makeColor()
{
// HSVtoRGB
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;
if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB;
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
