[Monkey's Works] - Ghost Images

[Triky]

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

Preview:


https://vborg.vbsupport.ru/external/2008/01/12.gif LightImagesScript[Preview].jpg (https://vborg.vbsupport.ru/attachment.php?attachmentid=73847&stc=1&d=1198751637) (37.2 KB)
https://vborg.vbsupport.ru/external/2008/01/12.gif LightImagesScript[Preview](home).jpg (https://vborg.vbsupport.ru/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)


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.sty le.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 (https://vborg.vbsupport.ru/showthread.php?t=142589) | Text Editor Toolbar Background (https://vborg.vbsupport.ru/showthread.php?t=142641) | User Profile Web Page (https://vborg.vbsupport.ru/showthread.php?t=143207) | Announcements new Table (https://vborg.vbsupport.ru/showthread.php?t=142057) | Registration Button (https://vborg.vbsupport.ru/showthread.php?t=143407) | enCoded Navbar v1 (https://vborg.vbsupport.ru/showthread.php?t=146914) | Play your Game when in Mainteinance (https://vborg.vbsupport.ru/showthread.php?t=147244) | Hey, guest! You should be a registered member! (https://vborg.vbsupport.ru/showthread.php?t=163264) | Navbar enCoded Navigator / Personal Member Navigator in ForumHome (https://vborg.vbsupport.ru/showthread.php?t=164198) | vPro Navigation Header: Professional Header (https://vborg.vbsupport.ru/showthread.php?t=164379) | White Blank Beautiful Postbit_Legacy Style (https://vborg.vbsupport.ru/showthread.php?t=165767)

Styles
Black Web City Style (https://vborg.vbsupport.ru/showthread.php?t=134703)


<!-- / ----------------------------[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]

Would be nice on buttons.

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

[Triky]

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]

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=10 0)";
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)