[SOLVED] How can I create mouseover logo in header.tpl

[LukeH]

I would like to have a logo for my shop that changes when moused over. I have created 2 .png images (logo1.png & logo2.png) for each state e.g. "Normal" and "Mouseover" but I don't know how to change the code in "header.tpl" to use the two images.

I can get this working in html using javascript but I don't really know what I am doing with the code below.

Any help would be appreciated.

Thanks, Luke.

<!-- Header -->







                   {$HOOK_TOP}

<!-- headerwrapper -->

[MrBaseball34]

Give the link a class and write a hover selector in your css file.

[LukeH]

Give the link a class and write a hover selector in your css file.

Thanks for the reply.

Any guidance on how I do this? I'm a css novice and wouldn't really know where to start.

[LukeH]

Can anyone give me a hint and/or sample code for creating a hover selector class?

Thanks

Luke.

[LukeH]

Anyone? I would really like to get this working. I have emailed the creator of my theme that I purchased but no reply.

Help would be appreciated to get this working.

Thanks, Luke.

[MrBaseball34]

This should work better for you as you don't have to create the CSS, just create the rollover image.
(It is off the top of my head but I have tested this and it worked for my site)

It won't let me post anything with smarty tags so download the code snippet attached:

hover_code.txt

[LukeH]

Thanks MrBaseball34 I have just managed to figure this out myself 30 mins before you posted but my code looks more complicated than yours so I might modify it and try your suggestion.

I changed the header wrapper of my theme to this;




Thanks for your help.

Luke.

modified header.txt