FlatPress.info

リンクの文字を虹色にきらきら表示させるプラグイン

このプラグインは下のようにリンク文字の上にマウスカーソルを乗せると虹色に文字色を変化させるためのものです。ちょっと面白い印象を受けますね。オリジナル(raimbowlink)の考案では、色の変化が常に連続して止まらないものでしたが、これでは少し煩わしいと感じまして、１秒程度で自動停止するように改造しています。リンク文字からマウスが離れると元の色に戻りますが、この自動停止でも元々の文字色に戻るようにしています。

例によって、インストール後にこのプラグインの有効化をしておきます。

プラグインプログラムのソースはこのような感じです。このプラグイン配下には jquery のスクリプトが収容されています。

<?php
/*
Plugin Name: RainbowLink
Plugin URI: http://flatpress.info                                                                                                       
Description: Change Color Link
Author: flatpress.info
Version: 0.5
Author URI: http://flatpress.info                                                                                                       
*/


function plugin_rainbowlink() {
?>
<!-- Rainbow Loaded by eggoez http://eg.goez.tk -->                                                                                     
<script>
var rate = 20; // Increase amount(The degree of the transmutation)
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 = 255; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID
var cnt = 0;
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;
}
// doRainbow
// This function begins to change a color.
function doRainbow(obj)
{
if (act == 0) {
act = 1;
cnt = 0;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
// stopRainbow
// This function stops to change a color.
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
// doRainbowAnchor
// This function begins to change a color. (of a anchor, automatically)
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;
cnt = 0;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
// stopRainbowAnchor
// This function stops to change a color. (of a anchor, automatically)
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
// Mozilla_doRainbowAnchor(for Netscape6 and Mozilla browser)
// This function begins to change a color. (of a anchor, automatically)
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;
cnt = 0;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
// Mozilla_stopRainbowAnchor(for Netscape6 and Mozilla browser)
// This function stops to change a color. (of a anchor, automatically)
function Mozilla_stopRainbowAnchor(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()
{
if(cnt++ < 20) {
objActive.style.color = makeColor();
} else {
cnt = 21;
objActive.style.color = clrOrg;
}
}
// makeColor
// This function makes rainbow colors.
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;
}
<!-- End Of Rainbow links. Thanks for Use :) -->
</script>
<?php
}
add_action('wp_footer', 'plugin_rainbowlink');
?> 

 補足として二つあります。

1. このプラグインを有効にすると Widget 設定がマウスでできない症状がありました。Widget の表示場所を変更する際には、一旦、本プラグインを無効にして操作をすることにしています。
2. このプラグインは rainbowlink というものを下地にしています。リンク部分にマウスカーソルが乗っている場合に、連続して文字色が変化する方がお好みであれば、そちらをインストールしてください。