Link on half of an image in CSS - css

Question

I have an image of a logo which has a slogan underneath it. I want the logo as a hyperlink for the home page but I want it to be only clickable from the actual logo and not the slogan underneath it. But I cant manage to achieve this because the logo and slogan are part as one image.
Is there anyway around this other than having 2 separate images?
HTML:
<a href="http://www.dalewoods.com" id="logo_link">
<img src="images/logo.png" alt="Dale Woods" class="logo"/></a>
CSS:
img.logo {
margin-top: 20px;
}

Answer 1

You could use <map> and <area> to create an image map on the image. The area can then be used to link only parts of the image.
Here is a simple example that you could modify to fit your needs:
<map name="a">
<area shape="rect" coords="25,25,75,75" href="http://www.dalewoods.com">
</map>
<img src="images/logo.png" alt="Dale Woods" class="logo" usemap="#a" />
In this example, only the part of the logo covered by the rectangle area will be linked.

Answer 2

Yes, there is. :)
<div id="logo">
Dale Woods
</div>
And CSS:
#logo {
width:200px;height:200px;position:relative;
background:url(images/logo.png) no-repeat;overflow:hidden;
}
#logo_link {
display:block;position:absolute;top:0;left:0;
width:200px;height:150px;text-indent:-2000px;
}
The positions and dimensions have to be changed, but structurally this should solve your problem.

Answer 3

Here is an example: http://codepen.io/anon/pen/KEdrc
HTML:
<div class="logo">
<img src="image.png" alt="Logo">
</div>
CSS:
.logo {
display: inline-block;
position: relative;
}
a {
position: absolute;
left: 0; top: 0;
height: 50%; width: 100%;
}
img { display: block; }

Answer 4

I tried to explain here on how to do this.. Check the fiddle and you could get an idea of how to do that...
Example
<img src="example.gif" width="145" height="126" alt="Example" usemap="#Example">
<map name="Example">
<area shape="rect" coords="0,0,82,126" alt="Firsthalf" href="#">
</map>
​
Here think that the image and the first half is clickable and the second is not clickable. Try to do that as the same or provide your image in the fiddle..

Answer 5

Having a 286x176 pixels image, this is how I achieved it so that the left half is a link to Android and the right half links to Apple:
<map name="logos">
<area shape="rect" coords="0,0,143,176" href="http://www.android.com" title="Link to Android" alt="Link to Android">
<area shape="rect" coords="143,0,286,176" href="http://www.ios.com" title="Link to Apple" alt="Link to Apple">
</map>
<img src="myimage.png" usemap="#logos">