كيف تجعل الروابط تتغير إلى ألوان قوس قزح عند مرور مؤشر الفأرة عليها؟

03-18-2014, 01:37 PM

حسين

مدون جديد

تاريخ التسجيل: Mar 2013

المشاركات: 55

كيف تجعل الروابط تتغير إلى ألوان قوس قزح عند مرور مؤشر الفأرة عليها؟

أنا : حسين

سجل معنا لتتمتع بهذه الخاصية

بسم الله الرحمن الرحيم

درس جديد وحصري لمدونة بلوجر بالعربية.

http://bloggerinar.blogspot.com

كيف تجعل الروابط تتغير إلى ألوان قوس قزح عند مرور مؤشر الفأرة عليها؟

في هذا الدرس سأشرح طريقة تجعل الرابط يتغير بألوان قوس قزح (أحمر،أصفر،أزرق..) عند مرور مؤشر الفأرة عليه.

*ملاحظة: هذه الخاصية تعمل على بلوجر والمواقع العادية.
مثال مباشر:

اضغط هنا

قم بالتأشير على أحد عناوين التدوينات ولاحظ كيف سيتغير.
طريقة التركيب:

اذهب إلى صفحة تحكم مدونتك.
اضغط على قالب.
ثم اضغط على تحرير HTML.
ثم ابحث عن </head>
وضع الكود التالي قبله:

كود بلغة HTML:

 <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>

الآن اضغط على حفظ.

انتهى الشرح

إذا أعجبك الدرس.. ضع تعليق في المدونة ولا تنسى عمل مشاركة :)

الموضوع الأصلي: http://bloggerinar.blogspot.com/2014...hen-hover.html

يمنع النقل بدون ذكر المصدر

__________________

من مواضيع حسين

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)

بلوجر بالعربية, هوفر, قوس قزح

« الموضوع السابق | الموضوع التالي »

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة لا تستطيع الرد على المواضيع لا تستطيع إرفاق ملفات لا تستطيع تعديل مشاركاتك BB code is متاحة الابتسامات متاحة كود [IMG] متاحة كود HTML معطلة قوانين المنتدى

الانتقال السريع

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
كيف تتجاوز الروابط المختصرة (adfly, adfocus,and linkbucks) دون الضغط عليها.	Enishom O Melhor	إضافات وأدوات بلوجر	1	02-01-2014 05:48 AM
كيف تتجاوز الروابط المختصرة (adfly, adfocus,and linkbucks) دون الضغط عليها.	Enishom O Melhor	دليل المواقع المفيدة	0	01-10-2014 05:16 PM
كلمة مرور يدخل بها الفيسبوك على أي حساب !	مدونة Alamfour	مقتطفات تدوينية	0	07-22-2013 12:36 AM
كيف تقوم بمنع الضغط على يمين الفأرة في مدونتك No right-click	ism33ail	دروس بلوجر	3	08-30-2012 09:05 PM

كيف تجعل الروابط تتغير إلى ألوان قوس قزح عند مرور مؤشر الفأرة عليها؟

إضافات وأدوات بلوجر