Miscellaneous Hacks - [Monkey's Works] - Ghost Images

[Monkey's Works] - Ghost Images
by Triky - Web City

Hi there, guys and gals! I've foud this script: Gradual HighLight Image Script. I've asked myself: "How do I use it all over my forum?". I've used a Replacement Variables!

Preview:

• LightImagesScript[Preview].jpg (37.2 KB)
• LightImagesScript[Preview](home).jpg (41.0 KB)

Preview (with ImageShack):

• 
• 

Modification:

Go to your headinclude template
(AdminCp -> Styles & Templates -> Edit Templates -> headinclude)

Seacrh for:

<!-- / CSS Stylesheet -->

Below, add:

<script type="text/javascript">

/***********************************************
* Gradual Highlight image script- ? Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var baseopacity=30

function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",50)
}

function slowlow(which2){
cleartimer()
instantset(baseopacity)
}

function instantset(degree){
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}

</script>

Save & Close.

Now go to your style options:
(vBAdminCp -> Styles & Templates -> Styles Manager -> Your style Name --> All style Options -> Go!)
In Additional CSS Definitions (second box), add:

.gradualshine{
filter:alpha(opacity=30);
-moz-opacity:0.3;
}

Save & Close.
Now, go to add a new Replacement Variable:
(vBAdminCp -> Styles & Templates -> Styles Manager -> Your style Name --> Replacement Variables -> Add -> Go!):

Search for text: <img
Replace with text: <img class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"


Save!

You're done! I hope you like it.

<!-- ------------------------------[Monkey's Works] - vBulletin.org Releases Archive---------------------------- -->

Modifications

Thread simple Navbar below QuickReply | Text Editor Toolbar Background | User Profile Web Page | Announcements new Table | Registration Button | enCoded Navbar v1 | Play your Game when in Mainteinance | Hey, guest! You should be a registered member! | Navbar enCoded Navigator / Personal Member Navigator in ForumHome | vPro Navigation Header: Professional Header | White Blank Beautiful Postbit_Legacy Style

Styles
Black Web City Style

<!-- / ----------------------------[Monkey's Works] - vBulletin.org Releases Archive---------------------------- -->

[lasto]

not sure i would want every image to be faded until mouse over.It sort of defeats the object.

[Triky]

Yes, but maybe someone would like it. I don't know, so I've posted.

[Magnumutz]

Would be nice on buttons. But not the entire forum.
Good job for the work however.

[SwollenCranium]

Interesting ...

Have you tried it or seen it used on a very dark background yet ?

[Triky]

Originally Posted by Magnumutz

Would be nice on buttons.

It's simple to do it, I will work on it tomorrow.

[Triky]

Originally Posted by SwollenCranium

Interesting ...

Have you tried it or seen it used on a very dark background yet ?

It works, and it has no problem. The main problem, if you're using the vB default style, the buttons borders have a lot of white points around..

[SwollenCranium]

Originally Posted by Triky

It works, and it has no problem. The main problem, if you're using the vB default style, the buttons borders have a lot of white points around..

OK, Thanks. :up:

[mesdar]

Thanks

installed

[PinkMilk]

No JS needed this can be done with CSS only:

This would go in the "Additional CSS Definitions" section near the bottom of style manager

/* faded 50% by default */
img {
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
 -moz-opacity: 0.5;
 -khtml-opacity: 0.5;
 opacity: 0.5;
}
/* on hover 100% */
img:hover {
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 filter: alpha(opacity=100);
 -moz-opacity: 1;
 -khtml-opacity: 1;
 opacity: 1;
}

To be more specific you could work out localized image ids/classes (if they have any) or add your own, such as Reply and Closed buttons in SHOWTHREAD template I add the class highlighted in red:

<td class="smallfont"><a href="newreply.php?$session[sessionurl]do=newreply&amp;noquote=1&amp;p=$FIRSTPOSTID" rel="nofollow">
<if condition="$show['closethread']"><img class="img_op" src="$stylevar[imgdir_button]/reply.gif" alt="$vbphrase[reply]" border="0" />
<else />
<img class="img_op" src="$stylevar[imgdir_button]/threadclosed.gif" alt="$vbphrase[closed_thread]" border="0" />
</if></a>
</td>

Now the CSS code is the same as above but tweaking the top lines to reflect the class added:

img {

to:

img.img_op {

and:

img.img_op:hover {

to:

img.img_op:hover {

Obviously this would be a very time consuming task if you wanted it to effect many images but I just wanted to show you how it could be achieved on a per image basis with no JS.

(sorry for bumping old thread)