Posted by Katrina B on January 21, 2010 at 12:10am
I am in the process of creating a new website for a small daily newspaper, and since the site logo is also a link to the home/front page, I would like for the image to change slightly to confirm to the end user that it is a link.
I'd like to be able to swap out the image on rollover ... but how do I do that in Drupal? Any suggestions?
Comments
CSS
I think easiest way is to do it through CSS, so Drupal creates the text link < a > and you create a background image for it
Remember to create width and height for the < a > element.
And then choose other background image for a:hover
In page.tpl.php make sure that < a >(Here no text)< / a >, and put the title of the web in the alt attribute of < a > for accessibility and SEO reasons.(Wrong. alt is for img)Although http://www.w3.org/ don't have rollover, they are doing the logo through this technique.
use a css sprite
just make one png image with 2 or 3 states of the logo and target only the logo id or class. then just reposition the sprite so the css block shows the other states upon rollover (or active). something like this:
#siteLogo a {
display: block;
background: url(sprite.png) no-repeat;
height: 30px;
width: 100px;
}
#siteLogo a:hover {
background-position: 0 -30px;
}
#siteLogo a:active {
background-position: 0 -60px;
}
Thanks for the suggestion!
I was faced with adding a rollover image to one of my Views and was amazed that I was stumped on the best way to do it. I was thinking I'd have to use javascript or something and then I found this post... DUH, CSS Sprite! Been meaning to try out the technique for a while now, this was a perfect time. Thanks, it's working perfectly. :-)
Where should I put alt text?
Thanks to your suggestions (and some extra stuff I had to figure out myself), I got it to work. One last thing: I'm not clear on where to put the alt text; here's the code from page.tpl.php:
<?php if ($logo): ?><div id="logo"><a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>" rel="home"> </a></div>
<?php endif; ?>
Katrina
Site builder, writer, trainer, graphic designer
Sorry for confusing you, alt
Sorry for confusing you, alt attribute is for < img > and you can't put it then
Maybe you want to put the name of the site inside of < a > < / a >link. There is some CSS Techniques for hiding it,
http://css-tricks.com/css-image-replacement/
rollover image is work
a href="ENDEREÇO-DO-LINK">
img src="ENDEREÇO-DA-IMAGEM-1" border="0" onmouseover="this.src='ENDEREÇO-DA-IMAGEM-2'" onmouseout="this.src='ENDEREÇO-DA-IMAGEM-1'"
e so abrir e fechar as tags
rollover image is work
||||
|||||
Use a transparent gif for the logo image ...
This is an old trick but still works great and all the standard drupal code is preserved, no need for custom editing/javascript in the source file (the templates, etc).
I.E.
Another simple technique, perhaps even simpler, is to use opacity on the full logo. E.G. make the logo 90% opaque (opacity: 0.9;) on the a:hover. That will give the logo a nice little shimmer without any major effort at all.
Have fun.
Q.