Making portion of header image clickable to home page
guppydrupal - April 15, 2008 - 18:11
| Project: | Header image |
| Version: | 5.x-1.1 |
| Component: | Code |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed |
Jump to:
Description
Thanks for this module,
I'm wondering if you know of a hack or way I can make the image clickable to a specific url. I want to use this module to place a banner in the header section but would like to make the top left part clickable to the home page.
any ideas?
thanks,
guppy
#1
With theming you can add any html/css you want to the header image.
See: http://drupal.org/theme-guide
(we call this a support request)
(you assign an issue to yourselves if you are the one who is going to work on it)
#2
#3
Automatically closed -- issue fixed for two weeks with no activity.
#4
Here's a simple way to accomplish this...
In your template (or possibly your headerimage.tpl.php theme file), place a transparent GIF or PNG
<img>just AFTER the region that the header image block is being displayed -- the<img>tag should go AFTER the header image so that when you use CSS to position it, it will display on top of the header image. Surround the transparent image with a<a href="">tag and point it to the URL you want to send the user to. Then add some CSS to place the image where you want it.Example
Template:
<div id="header-image"><?php print $header_image_region; ?>
<a id="header-image-link" href="<?php print $base_path; ?>">
<img src="/misc/spacer.gif" alt="Oodles of Noodles" width="200" height="50" /></a>
</div>
CSS:
#header-image {position: relative;
}
#header-image-link {
position: absolute;
top: 20px;
left: 30px;
}
#header-image-link IMG {
border: 0px none;
}
This will create a 200x50 transparent image that links to the homepage of the site (
$base_path). When they mouse over your transparent image, they will get a help-text-popup with the name of your site, in this case "Oodles of Noodles".