CODEWITHSUNDEEP
javascriptjquerycsshtml
Vignesh Pichamani
Vignesh Pichamani

Reputation: 8070

How can i make the div clickable with entire background image?

I added background image in parent div The div width is 100% I make the redirection when you click the div (It all works fine) But i want to redirect the div only if you click from left to right of 100px; For Example Here is the fiddle i called the div with background image whenever i click any portion of div it get redirected. But My question is i want to redirect only if you click the image from left to right within 100px; Is it possible to achieve that any suggestion would be great. http://jsfiddle.net/a39Va/25/

$('#loginContainer').click(function(e) { 

    window.open('http://google.com');
});

Thanks.

Upvotes: 1

Views: 3598

Answers (4)

Love Trivedi
Love Trivedi

Reputation: 4046

try this JSFiddle

HTML

 <div id="loginContainer">
     <div class="clickable">
     </div>
   </div>

CSS

.clickable{
    width:100px;
    height:100%;
    cursor:pointer;
}

JS

$('.clickable').click(function(e) { 

    window.open('http://google.com');
});

Upvotes: 0

Jitendra Pancholi
Jitendra Pancholi

Reputation: 7562

try below (http://jsfiddle.net/a39Va/31/)

 <div id="loginContainer">
      <div class="clickable"></div>
    </div>

CSS

.clickable{
    width:100px;
    height:100%;

}

JS

$('.clickable').click(function(e) { 

    window.open('http://google.com');
});

Upvotes: 2

Sachin
Sachin

Reputation: 40970

Try this

$('#loginContainer').click(function(e) { 
  if(e.pageX < 100)
    window.open('http://google.com');
});

Js Fiddle Demo

Upvotes: 1

Saksham
Saksham

Reputation: 9380

The most suitable thing to do would be using an image map

It helps you to define specific regions for which you need specific clickable areas. You may define area of any shape by just defining the coordinates fro the region.

Please look HERE for more details

Upvotes: 1

Related Questions