Subcribe to our RSS feeds Join Us on Facebook Join Us on Facebook Join Us on Facebook Follow us on Twitter Add to Circles

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

كينج نت ملك النت | 1/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. شكرا اخي علي الاضافه الجميله دي
    ولكن كيف اجعلها تعمل في جميع الصفحات والمواضيع ليس في الرئسيه فقط واكون شاكر ليك
    انتظر ردك

    ردحذف

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

الأرشيف