You are here: Forum Home / RapidWeaver User Forum / Tips, Tricks and How To’s / Thread
Make a Rollover Logo for the Slogan Field - now 2 solutions.
Hi Peeps!
This is to code a logo that changes image as you rollover/hover with your mouse, and provides a link to your home page (or different if you decide).
I had coded one or two of these, so I thought others would find it useful if I put together a tutorial on my site to help. It is designed to work in the slogan field, but it can work in other places.
EDIT I have now added part 2 which puts the images into the theme and uses pathto.
If you have any questions, post here, or if you see any issues let me know!
with best regards,
Karn.
Theme Editing Basics for budding theme weavers
SqueezeBox and Space Gallery Casts making Stacks pages rock
More @ WebKarnage hosted on RapidWeaver friendly Hosting.
MacSupportCasts to learn Macs
Hi Peeps!
This is to code a logo that changes image as you rollover/hover with your mouse, and provides a link to your home page (or different if you decide).
I had coded one or two of these, so I thought others would find it useful if I put together a tutorial on my site to help. It is designed to work in the logo field, but it can work in other places. I will be adding part 2 later which puts the images into the theme and uses path_to, but this will be a start!
If you have any questions, post here, or if you see any issues let me know!
with best regards,
Karn.
Thank you, Karn, this is a great idea, I think it could fill an annoying gap in RW. It seems almost a requirement these days that the logo in a header should be a clickable link to your home page….and it so happens that I have another use for it, since I have a client with an unusual logo, and they want the link to go to a page explaining the logo’s significance. I think your code will do the trick, it’s nice that it’s so easy to direct the link to anywhere you choose.
A quick question - I see where to upload the images, but I’m not sure where the HTML goes. Your tutorial refers to the “logo field of the Page Inspector” but I cannot locate this field. What am I missing? I can see this working if you place the logo anywhere on a page using Blocks, but I cannot see how it gets into the header which is the more common location…
In any event, thanks for the nice contribution!
Bonnie
Sweet Karn!
Hadn’t thought of this. Might be something to add over at my site.
Thanks and can’t wait for Part 2.
Visit myRapidWeaver-The Links You’re Looking For.
Join me @ SupportCasts & MacSupportCasts
Get a Great Web Host that’s RW Friendly
{ old forum post count = 6128 }
A quick question - I see where to upload the images, but I’m not sure where the HTML goes. Your tutorial refers to the “logo field of the Page Inspector” but I cannot locate this field. What am I missing? I can see this working if you place the logo anywhere on a page using Blocks, but I cannot see how it gets into the header which is the more common location…
In any event, thanks for the nice contribution!
Bonnie
Sorry Bonnie!
I just woke up and looked at the forum to see you pointing out a daft thing I did in a rush! SLOGAN field Karn!! SLOGAN!
I’ve sorted the tutorial and I’ll get the other part done later today!
with best regards,
Karn.
Theme Editing Basics for budding theme weavers
SqueezeBox and Space Gallery Casts making Stacks pages rock
More @ WebKarnage hosted on RapidWeaver friendly Hosting.
MacSupportCasts to learn Macs
Thanks, Karn - this is something I’ve been wondering about - will give this a shot.
Cheers,
“Music expresses that which cannot be said and on which it is impossible to be silent.” — Victor Hugo
Come listen to the Dallas Symphony Chorus in concert and we’ll prove it!
The second part of this tutorial does have the danger of opening up a large can of worms! I haven’t had the chance to try lots of themes, and there are plenty I don’t even have. PLease post here with further questions, but with me going on mobile work for 5 days tomorrow, I don’t yet know when I will be able to answer them!
Fortunately, we have people around more able than me, who will hopefully chip in before I get back.
with best regards,
Karn.
Theme Editing Basics for budding theme weavers
SqueezeBox and Space Gallery Casts making Stacks pages rock
More @ WebKarnage hosted on RapidWeaver friendly Hosting.
MacSupportCasts to learn Macs
Karn,
Thanks a lot for this “trick of the century” for RW. Is there any chance for you to post only a code for SINGLE image without mouse rollover? Or tell us how to adjust the code? 
Thanks again!
Cheers!
Branko
Lazarov Design
HostGator’s Green Hosting Rocks. Check them out! | Dropbox Great storage / sync tool! Signup for free!
Hi Branko,
Most are using this to be more ‘interactive’ than a normal pageHeader background image. Do you still want the image to link to your home page (as it does in the example), because if you don’t, replacing the pageHeader background image is really the way to go. The majority of the code is there for the mouseover effect.
<a href="/index.html"><img id= 'logo'
style= "border:0px; margin:0px; padding:0px; background-color:transparent; border-style:none;"
alt="logo"
src="http://www.yourdomain.com/images/logo_1.jpg"
width="393" height="85"
name="logo" /></a>
That should be enough for you! Let me know if more help is useful.
with best regards,
Karn.
Theme Editing Basics for budding theme weavers
SqueezeBox and Space Gallery Casts making Stacks pages rock
More @ WebKarnage hosted on RapidWeaver friendly Hosting.
MacSupportCasts to learn Macs
Karn,
Thanks a lot. I always replace the image for the header when there is an image I’ll try this trick in the themes without images and let you know. Once again - thank you very much.
Cheers!
Branko
Lazarov Design
HostGator’s Green Hosting Rocks. Check them out! | Dropbox Great storage / sync tool! Signup for free!