Changing logo image on mouse-over or mouse-click

Changing logo image on mouse-over or mouse-click

Mod Version: 1.00, by BirdOPrey5

vB Version: 3.8.x	Rating: (2 votes - 5.00 average)	Installs: 8
Released: 28 May 2010	Last Update: Never	Downloads: 0
Not Supported Template Edits Re-usable Code

This isn't much of a mod but is more confusing then I thought it would be so I figured why not release it for anyone interested.

This code will let you change your forum logo to an alternate image with Javascript when you bring the mouse over or click on it. Usually you'd make a version of the logo that looks like it's a button being pushed down, or otherwise selected- but any image will do. I don't have an example because it would simply be an image before the mouse-over and a different image during the mouse-over.

However here is a demo: http://www.juot.net/forums/
Mouse-over the logo image for a subtle change.

If a user doesn't have Javascript enabled only the original image will be displayed.

1. Go to Styles & Templates -> Style Manager -> All Style Options
In the bottom of headerinclude enter the following Javascript code:

Code:

<!-- Begin onmouseover Logo Script-->
<script language="Javascript">
if (document.images) {
    pic1 = new Image;
    pic2 = new Image; 
    pic1.src = 'path/picture1.gif';
    pic2.src = 'path/picture2.gif';
    }
</script>
<!-- End onmouseover Logo Script-->

Change path/picture1.gif / picture2.gif to the full path to your images, probably something like 'images/misc/logo1.gif' and 'images/misc/logo2.gif'

2. Now go to the header box under 'Common templates" make the following change...

find

Code:

<a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a>

and replace it with the following:

Code:

<!-- Begin onmouseover Logo Code-->
<a href="$vboptions[forumhome].php$session[sessionurl_q]" onmouseover="document.rollover.src=pic2.src"  onmouseout="document.rollover.src=pic1.src" ><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" name="rollover" /></a>
<!-- End onmouseover Logo Code-->

That should do it... note you want to keep the correct #1 image as your defined logo using the above code, otherwise you can ignore your defined logo and use the following alternate code:

Code:

<!-- Begin onmouseover Logo Code-->
<a href="$vboptions[forumhome].php$session[sessionurl_q]" onmouseover="document.rollover.src=pic2.src"  onmouseout="document.rollover.src=pic1.src" ><img src="images/misc/logo1.gif" border="0" alt="$vboptions[bbtitle]" name="rollover" /></a>
<!-- End onmouseover Logo Code-->

minding you will need to change "images/misc/logo1.gif" to the path to your main (un-clicked) logo image.

If you want to change the image on a mouse-click instead of mouse over change "onmouseover" to "onclick".

Please remember to click 'Marked As Installed" if you use this.

Download

No files for download.

vBulletin LTS