Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Rollover Logo image - Any ideas on how to achieve this? 
 
gadgetplay
Jr. Member
 
Avatar
Total Posts:  30
Joined:  2008-05-03
Basingstoke, UK
 

Hi,

I’ve gone into my header file at app/frontend\defualt\default\template\page/html/header.phtml

and have located the following code for the logo:

<h1 id="logo"><a href="<?php echo $this->getUrl('') ?>"><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a></h1>

I’m just wondering how I can make this a rollover image as I’ve tried already and it doesn’t work.

Anyone tried this and could share the code?

Thanks

 
Magento Community Magento Community
Magento Community
Magento Community
 
bozmac
Jr. Member
 
Total Posts:  18
Joined:  2008-06-17
 

Use jQuery and a simple hook such as

$("#logo img").hover(function () { // code to change the source here });

 
Magento Community Magento Community
Magento Community
Magento Community
 
gadgetplay
Jr. Member
 
Avatar
Total Posts:  30
Joined:  2008-05-03
Basingstoke, UK
 

Hi Bozmac, thanks for the reply.

I’ve never actually used jQuery before as my skills are really just CSS and HTML.

Would it be possible to go into a little bit more detail please as looking at what you put above, I would just expect to insert that code and it will work when that’s not really the case I don’t think?

Thanks

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

If you know CSS, you can do it with CSS background like so:

#logo a {background: url(../images/logo.gif) no-repeat;
width: 200px ; height 300px }

#logo a:hover {background: url(../images/logo_hover.gif) no-repeat; }

In your markup, you need to move the logo to
<h1><a id="logo” href="<?php echo $this->getUrl('') ?>"><img src="<?php echo $this->getLogoSrc() ?>” alt="<?php echo $this->getLogoAlt() ?>” /></a></h1>

 
Magento Community Magento Community
Magento Community
Magento Community
 
Crucial
Enthusiast
 
Avatar
Total Posts:  770
Joined:  2007-11-07
Phoenix, AZ
 

A better way would be to use one image for the logo (so you don’t have to download two and possibly get a flicker), and to use text-indent to hide the text when CSS is enabled, and show the site name when it’s disabled.

Your CSS should be like this:

#header h1 {
text-indent:-10000px;
}

    
#header h1 a {
    
width:500px;
    
height:55px;
    
display:block;
    
background:url(/path/to/logo.png0px 0px no-repeat;
    
}
    
    
#header h1 a:hover {
    
background:url(/path/to/logo.png0px -56px no-repeat;
    
}

Obviously adjust the width and height of the image to that of your logo, make sure you set the offset (-56px) to the height + 1 of your logo, and replace #header with the appropriate ID of the div your logo is in.

Then, for the HTML:

<h1><a href="http://www.my-store-url.com">My Store's Name</a></h1>

Now you only need to use one image, and your HTML is semantic, SEO friendly, and accessible to those on different devices or that browse without CSS.

 
Magento Community Magento Community
Magento Community
Magento Community
 
gadgetplay
Jr. Member
 
Avatar
Total Posts:  30
Joined:  2008-05-03
Basingstoke, UK
 

Hi Crucial, thanks so much for the advice.

I tried your method which seemed to be the easiest to do as well as being SEO friendly which is the most important things with having a store.

Mind you though, I didn’t actually need the ‘#header’ in front. h1 done just fine.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Crucial
Enthusiast
 
Avatar
Total Posts:  770
Joined:  2007-11-07
Phoenix, AZ
 
gadgetplay - 15 July 2008 02:59 PM

Mind you though, I didn’t actually need the ‘#header’ in front. h1 done just fine.

Good point actually, the H1 tag should only be used for the company name (logo) text, so it’s not something you’ll re-use. Since that’s the case, it’s safe not to put a parent element before it.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top