CODEWITHSUNDEEP
csshyperlinkimage
user1278496
user1278496

Reputation: 1066

Link on half of an image in CSS

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;

}

Upvotes: 3

Views: 4194

Answers (5)

Jaime Montoya
Jaime Montoya

Reputation: 7701

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">

Upvotes: 0

Sri
Sri

Reputation: 2273

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..

Upvotes: 0

Brian
Brian

Reputation: 2829

Here is an example: http://codepen.io/anon/pen/KEdrc

HTML:

<div class="logo">
  <a href="#"></a>
  <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; }

Upvotes: 1

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

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.

Upvotes: 6

fboes
fboes

Reputation: 331

Yes, there is. :)

<div id="logo">
  <a href="http://www.dalewoods.com" id="logo_link">Dale Woods</a>
</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.

Upvotes: 1

Related Questions