vb.org Archive - Miscellaneous Hacks - [Monkey's Works]

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 3.7 Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=229)

- - Miscellaneous Hacks - [Monkey's Works] - Ghost Images (https://vborg.vbsupport.ru/showthread.php?t=166235)

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

Preview (with ImageShack):

Modification:

Quote:

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

Seacrh for:

Code:

Below, add:

Code:

<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:

Code:

.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.

Modifications

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

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

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

Interesting ...

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

Quote:

Originally Posted by Magnumutz (Post 1410212)

Would be nice on buttons.

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

Quote:

Originally Posted by SwollenCranium (Post 1410236)

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..

Quote:

Originally Posted by Triky (Post 1410618)

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:

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

Code:

/* 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:

Code:

<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:

Code:

img {

to:

Code:

img.img_op {

and:

Code:

img.img_op:hover {

to:

Code:

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)

X vBulletin 3.8.12 by vBS Debug Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (9)bbcode_code_printable (4)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages:

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01168 seconds Memory Usage 1,755KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (9)bbcode_code_printable (4)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: