الأحد، 13 يناير، 2013

اضافة تغير لون روابط المدونة الى الوان قوس قزح عند مرور مؤشر الماوس

كيفية تغير لون روابط المدونة الى عدة الوان قد تشبة الى الوان قوس قزح فالتغير يتم عند وقوف او مرور مؤشر الماوس على الروابط بالمدونة فيتغير لون الرابط الى عدة الوان فهذه الطريقة لن تفيد بألارشفة ولكنها تعطى جمال للمدونة فهذه الطريقة رايتها بالمنتديات واحببت ان اضع لكم هذا الكود ليتم تركيبها على المدونات وبالاخص منتج بلوجر الأكثر من رائع والاول عالميا من وجهة نظرى فاذا احببت هذه الطريقة قم بوضع هذا الكود فقط دون ان نقوم بتغير اى شيى او التعديل على قالب المدونة فالكود يضاف من خاصية اضافة اداء HTML/JavaScript فقط لا غير وقبل ان اضع هذه الطريقة لقد قمت بتجربتها على مدونة تجربية وبالفعل تعمل بشكل سليم دون ان خطاء نأتى الأن الى طريقة التركيب فى البداية توجهة الى لوحة تحكم المدونة ومنها اذهب الى التخطيط وقم بضافة اداء جديدة ومنها اختار اداء HTML/JavaScript وقم بالصق الكود التالى :


<!-- kingnt.com -->
<script type='text/javascript'>
//<![CDATA[
var rate = 20;
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 = 128; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID
if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}

function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}

function doRainbowAnchor()
{
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()",100);
}
}
}

function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}

function Mozilla_doRainbowAnchor(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()",100);
}
}
}

function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}

function ChangeColor()
{
objActive.style.color = makeColor();
}

function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?
// 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;
}
//]]>
</script>
<!-- kingnt.com -->
ملاحظة :لا تضع اى اسم فى خانة العنوان بالأداء اتركها فارغه

هذه صورة توضيحية لمفهوم كلامى بعد التركيب فالرابط يتغير الى عدة الوان عند وقوف مؤشر الماوس






قم بالحفظ وتوجهة الى صفحة مدونتك وعندما تقف مؤشر الماوس على اى رابط بمدونتك ستلاحظ بتغير الرابط الى عدة الوان قد تشبة الوان قوس قزح انتهى الشرح وانتظرونى بتدوينة جديدة (( لا خير فى كاتم العلم ))

هناك تعليق واحد :

  1. شكرا اخي علي الاضافه الجميله دي
    ولكن كيف اجعلها تعمل في جميع الصفحات والمواضيع ليس في الرئسيه فقط واكون شاكر ليك
    انتظر ردك

    ردحذف

قال تعالى ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )