vb.org Archive

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)

Triky 12-26-2007 10:00 PM

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

<!-- / CSS Stylesheet -->
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.


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

Modifications

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

lasto 12-27-2007 09:14 AM

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

Triky 12-27-2007 09:16 AM

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

Magnumutz 12-27-2007 05:12 PM

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

SwollenCranium 12-27-2007 06:21 PM

Interesting ...

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

Triky 12-27-2007 07:21 PM

Quote:

Originally Posted by Magnumutz (Post 1410212)
Would be nice on buttons.

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

Triky 12-28-2007 07:43 AM

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

SwollenCranium 12-28-2007 02:19 PM

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:

mesdar 12-12-2008 06:35 AM

Thanks

installed

PinkMilk 05-28-2012 04:49 PM

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)


All times are GMT. The time now is 11:54 AM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01507 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