Changing logo image on mouse-over or mouse-click

[BirdOPrey5]

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:

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

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

and replace it with the following:

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

<!-- 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. :cool:

[BirdOPrey5]

Just wanted to thank whoever gave me a low rating, without being man enough to actually post what you find so poor about it... very classy. :/

[MagicThemeParks]

Any demos of this? Interested to see it in action :)

[BirdOPrey5]

OK, Demo here: http://www.juot.net/forums/
It's very subtle in my case, but could be two completely different images if need be.

Edit- for your forum would be great if you could somehow animate that flag on a mouse-over... not sure your graphic skills but an animated gif would be perfect if you could do it.

[dadoc]

I will surely use this mod with my new logo
Thanks Joe, nice mod

[pakhackerz]

nice share keep it up

[BirdOPrey5]

thanks guys.

[Hell Bomb]

You can actually achieve a lot better results using only css, which in turn makes it more universal. And with CSS you can make it only a single image which reduces http requests

[BirdOPrey5]

You can actually achieve a lot better results using only css, which in turn makes it more universal. And with CSS you can make it only a single image which reduces http requests

Thanks... feel free to release those instructions and link it here. :up:

[danyxxx]

This modification makes my style xhtml invalid because:


Line 166, Column 78: there is no attribute "onMouseOver"

…06b1df33c8a26331c9d7bc3b" onMouseOver="document.rollover.src=pic2.src" onMouse…



Line 166, Column 122: there is no attribute "onMouseOut"

…="document.rollover.src=pic2.src" onMouseOut="document.rollover.src=pic1.src" >


Any solution for this?
I mean.. must be a way to make that attribute valide , no?
Because I really want to keep my style xhtml valid :)

Kind Regards !

-------------------

EDIT & UPDATE:

You must edit your modification codes this way -->

1. onmouseover instead --> onMouseOver
2. onmouseout instead --> onMouseOut

--> After:

This document was successfully checked as XHTML 1.0 Transitional!

Enjoy and thanks for this BirdOPrey5 !

[BirdOPrey5]

Thanks for the info! Will update the thread.

[MudRacing]

I can change "onmouseout" with the second?

I'd like to move the mouse over the logo and the logo change, then after a few seconds again as before..

EDIT: it's compatible with 4.1?