How would I make my forum logo a button type object?

[stardotstar]

Hi all,

You know how the forum logo in the top right can be used effectively as a "home" button for the boards? By clicking on it you get to the main index page.

Really the main forum logo is a clickable graphic element and I would like it to look like and operate like a clickable button.

I can make the unpressed and pressed in versions but I don't know how to make vB handle this in the header.

Is there a mod/hack or other approach I could use to achieve this?

My main logo is this:
http://www.archeli.com.au/forums/images/arcHELI_branding/arcHELI_V_Master_Logo_FINAL_2_small_200.gif
And the current button idea is this:
http://www.archeli.com.au/forums/images/arcHELI_branding/arcHELI-V-ButtonLogo-200.gif

TIA,
Will

[BirdOPrey5]

You can use javascript to change the image... you can change it simply when clicked but I think personally changing it when the mouse goes over it is better... the code for that is here:
http://www.hypergurl.com/rolloverimage.html

You will need to edit templates to put the code in the header and then edit the code for the logo.

[stardotstar]

Thank you I will certainly try this today!
Great!

[BirdOPrey5]

Hey, I just tried it, there is errors in that code.
The code below works for sure:

Put this in the header... change picture1.gif / picture2.gif to the full path to your images, probably something like "images/misc/logo1.gif" and "images/misc/logo2.gif"

<script language="Javascript">
if (document.images) {
pic1 = new Image;
pic2 = new Image;
pic1.src = 'picture1.gif';
pic2.src = 'picture2.gif';
}
</script>


and then for the logo put in the following:


<a href="http://www.juot.net" onMouseOver="document.rollover.src=pic2.src"
onMouseOut="document.rollover.src=pic1.src">
<img src="picture1.gif" border="0" name="rollover"></a>

Change www.juot.net to your domain and change picture1.gif again to the full path to your logo.

--------------- Added 1274831736 at 1274831736 ---------------

I *think* you have to go to templates -> All Style Options and in 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 logo code from above, which I changed to your forum details:

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

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:

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

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

[stardotstar]

This worked perfectly ! thank you very much - I have done a mouseover to an embossed version of the logo that does the trick. :)

Will;