Spotlight Side bar

[Wormopolis]

try this


<script type="text/javascript">
<!--
//  OTM boxes
//  by Wormopolis - www.wormocodes.com
//  keep heder intact - do not repost

var OTMboxWidth="200";
var OTMboxHeight="134";   //these 2 dimensions must match your cover image.  make all cover images the same dimensions

var OTMarray=[
["Member of the Month","http://i197.photobucket.com/albums/aa250/WORMOPOLIS/OTMcupcake.jpg","this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. "],

["Thread of the Month","http://i197.photobucket.com/albums/aa250/WORMOPOLIS/OTMcupcake.jpg","this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. "],

["Male of the Month","http://i197.photobucket.com/albums/aa250/WORMOPOLIS/OTMcupcake.jpg","this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. "],

["Female of the Month","http://i197.photobucket.com/albums/aa250/WORMOPOLIS/OTMcupcake.jpg","this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. "]  //no comma last one

];  //[title, cover image url, text for the hidden scrollbox]

//no need to edit below

document.write('<div id="OTMcontainer"></div>');
var temphold="<center>";

function handleReshow(e) {
 if (!e) var e = window.event;
 var tg = (window.event) ? e.srcElement : e.target;
 var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
 if (reltg.id.match(/scroll/) ||  (tg.nodeName.match(/img/i) && tg.parentNode.style.letterSpacing!='')) return;
 if (tg.nodeName.match(/img/i)) tg=tg.parentNode.previousSibling;
 tg.nextSibling.style.letterSpacing='';
 tg.nextSibling.style.visibility='visible';
 tg.nextSibling.style.opacity='100';
 var tm2=setTimeout("document.getElementById('" + tg.nextSibling.id + "').style.letterSpacing='';",2000);
}

for (od=0; od<OTMarray.length; od++) {
 temphold+='<div id="OTMlabel' + od + '" class="OTMlabel">' + OTMarray[od][0]+ '</div><div id="OTMinner'+od+'" style="padding: 2px; width:' + OTMboxWidth+ '; height:' + OTMboxHeight+ '; "   onmouseout="handleReshow(event);"><div id="OTMscroll'+od+'" style="width:' + OTMboxWidth+ '; height:' + OTMboxHeight+ ';overflow-y:auto; position:absolute;" >' + OTMarray[od][2] + '</div><div class="OTMdiv" id="OTMcover'+od+'" width="' + OTMboxWidth+ '" height="' + OTMboxHeight+ '" style="position: absolute;" onmouseover="this.style.visibility=\'hidden\'; this.style.opacity=\'0\'; var tm=setTimeout(function() {document.getElementById(\'OTMcover' + od + '\').style.letterSpacing=\'1\';},2000);"><img src="' + OTMarray[od][1]+ '" ></div></div><br>';
}
document.getElementById('OTMcontainer').innerHTML=temphold+"</center>";



// -->
</script>


[Wormopolis]

I forgot to say, that entire script goes INSIDE whatever container you want the spotlight boxes to appear. so if its a cell in a side table, it goes inside the TD tag

[aquarius]

OMG! Thank you so much~ It's exactly what I was looking for~ It works perfectly as well! xD

[Wormopolis]

IE users mnight get a different experience, but that is because IE doesnt support transitions too well

[Wormopolis]

WAIT.. I didnt post the CSS

<style type="text/css">
.OTMdiv
{
transition:visibility 2s, opacity 2s;
-moz-transition: visibility 2s, opacity 2s; /* Firefox 4 */
-webkit-transition:visibility 2s, opacity 2s; /* Safari and Chrome */
-o-transition:visibility 2s, opacity 2s; /* Opera */
}
.OTMlabel
{
font-size:18;
font-weight: bold;
}
</style>

[aquarius]

Ah! Mkay, no wonder it wasn't fading I was going to reply about that when I got back from school~ Thanks again! Is there a way for me to change the font of "Member of the month" and color?

[NetMaster]

It's possible to do both in CSS however if you want to be sure that it looks the same for everyone it's best to make the text into an image. (Not everyone has the same fonts.)

[Wormopolis]

that CSS for OTMlabel allows you to change both font-face and color.

[Wormopolis]

you can use different images as well, BUT they all have to be the same dimensions to make the code work right. I realize it could probably be modded to allow multiple image sizes, but I didnt want to spend a lot of extra time on something small.

[aquarius]

Okay thanks~ I'll keep that in mind ^^