View Full Version : Miscellaneous Hacks - [Monkey's Works] - Ghost Images

27 Dec 2007, 10:47
[Monkey's Works] - Ghost Images
by Triky - Web City (http://www.web-city.it/)

Hi there, guys and gals! I've foud this script: Gradual HighLight Image Script (http://www.dynamicdrive.com/dynamicindex4/highlightgrad.htm). I've asked myself: "How do I use it all over my forum?". I've used a Replacement Variables!


https://www.vbulletin.org/forum/external/2008/01/12.gif LightImagesScript[Preview].jpg (http://www.vbulletin.org/forum/attachment.php?attachmentid=73847&stc=1&d=1198751637) (37.2 KB)
https://www.vbulletin.org/forum/external/2008/01/12.gif LightImagesScript[Preview](home).jpg (http://www.vbulletin.org/forum/attachment.php?attachmentid=73848&stc=1&d=1198751637) (41.0 KB)

Preview (with ImageShack):

LightImagesScript[Preview].gif (http://img265.imageshack.us/img265/3229/lightimagesscriptprevievs9.gif)
LightImagesScript[Preview](home).gif (http://img265.imageshack.us/img265/3103/lightimagesscriptpreviezc5.gif)


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){
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""

function slowlow(which2){

function instantset(degree){
if (browserdetect=="mozilla")
else if (browserdetect=="ie")

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)
else if (window.highlighting)


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{

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


You're done! I hope you like it.

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

Thread simple Navbar below QuickReply (http://www.vbulletin.org/forum/showthread.php?t=142589) | Text Editor Toolbar Background (http://www.vbulletin.org/forum/showthread.php?t=142641) | User Profile Web Page (http://www.vbulletin.org/forum/showthread.php?t=143207) | Announcements new Table (http://www.vbulletin.org/forum/showthread.php?t=142057) | Registration Button (http://www.vbulletin.org/forum/showthread.php?t=143407) | enCoded Navbar v1 (http://www.vbulletin.org/forum/showthread.php?t=146914) | Play your Game when in Mainteinance (http://www.vbulletin.org/forum/showthread.php?t=147244) | Hey, guest! You should be a registered member! (http://www.vbulletin.org/forum/showthread.php?t=163264) | Navbar enCoded Navigator / Personal Member Navigator in ForumHome (http://www.vbulletin.org/forum/showthread.php?t=164198) | vPro Navigation Header: Professional Header (http://www.vbulletin.org/forum/showthread.php?t=164379) | White Blank Beautiful Postbit_Legacy Style (http://www.vbulletin.org/forum/showthread.php?t=165767)

Black Web City Style (http://www.vbulletin.org/forum/showthread.php?t=134703)

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

27 Dec 2007, 11:14
not sure i would want every image to be faded until mouse over.It sort of defeats the object.

27 Dec 2007, 11:16
Yes, but maybe someone would like it. I don't know, so I've posted. :)

27 Dec 2007, 19:12
Would be nice on buttons. But not the entire forum.
Good job for the work however.

27 Dec 2007, 20:21
Interesting ...

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

27 Dec 2007, 21:21
Would be nice on buttons.

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

28 Dec 2007, 09:43
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..

28 Dec 2007, 16:19
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:

12 Dec 2008, 08:35


28 May 2012, 18:49
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" />

Now the CSS code is the same as above but tweaking the top lines to reflect the class added:
img {
img.img_op {
img.img_op:hover {
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)