Using div background image as link using jQuery

Question

I have put a logo as the background image in a div

<div id="logo" style="background-image:url(images/logo.jpg); position:absolute; top:20px; left:18%; width:275px; height:100px; cursor:pointer;"></div>

I want to use this as div as a link using jquery

//jQuery code

$('#logo').bind('click',function() {
window.location = "index.php"
});

Neither does the cursor:pointer show up nor does the link work, any ideas.

Thanks Jean

Do you have any further info on this problem? Using your examples, it works perfectly for me - both the cursor and link in both IE and Firefox. Is your jQuery library correctly referenced on the page? — CraigTP
– CraigTP, Commented Aug 3, 2010 at 7:52
I'm on chrome too... latest version and that works... was my demo not working in your browser? — Reigel Gallarde
– Reigel Gallarde, Commented Aug 3, 2010 at 7:59

Sarfraz · Accepted Answer · 2010-08-03 08:05:35Z

1

Make sure that you wrap your code in ready handler like this:

$(function(){
  $('#logo').bind('click',function() {
    window.location = "index.php"
  });
});

edited Aug 3, 2010 at 8:05

answered Aug 3, 2010 at 7:52

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sarfraz Over a year ago

@Jean: You need to specify wrap your code in ready handler so that when DOM becomes ready, your code should become runable when for example the logo gets clicked. More Info: api.jquery.com/ready

Sarfraz Over a year ago

@Jean: You have not specified the ready handler, note my first line please $(function(){

Starx Over a year ago

@sAc, I dont think this is needed in this case, because see my example it is working without the wrapping

Sarfraz Over a year ago

@Starx: jsfiddle puts your code in ready handler implicitly when using jquery. Note from the left selection bar you have chosen load event.

Starx · Accepted Answer · 2010-08-03 07:55:01Z

1

add display:block; to your css

see an working example here

http://jsfiddle.net/4ceK4/

answered Aug 3, 2010 at 7:55

Starx

79.3k50 gold badges187 silver badges266 bronze badges

Comments

Giuseppe Accaputo · Accepted Answer · 2010-08-03 07:59:29Z

1

Register your click event handler in the ready event handler as follows, and it will work:

$(document).ready(function() {
    $("#logo").click(function() {
        window.location = "index.php";
    });
});

Regarding your CSS problem, I've tested it using Google Chrome (5.0.375.125), Opera (10.60), and Internet Explorer (8.0), and the cursor is displayed correctly.

edited Aug 3, 2010 at 7:59

answered Aug 3, 2010 at 7:52

Giuseppe Accaputo

2,64217 silver badges24 bronze badges

Comments

Manie · Accepted Answer · 2010-08-03 07:49:16Z

0

Use,

 window.location.replace("index.php")

instead of

 window.location = "index.php"

and instead of .bind, just use .click event.

answered Aug 3, 2010 at 7:49

Manie

2,0382 gold badges16 silver badges19 bronze badges

Comments

Mathias Bynens · Accepted Answer · 2010-08-03 07:51:07Z

0

You don’t need jQuery/JavaScript for that, just use HTML and CSS.

<a href="index.php" id="logo">Blabla</a>

#logo {
 display: block;
 background-image: url(img/foo.png);
 text-indent: -9999em;
 overflow: hidden;
 width: 300px; /* width of image goes here */
 height: 300px; /* height of image goes here */
}

answered Aug 3, 2010 at 7:51

Mathias Bynens

151k54 gold badges224 silver badges254 bronze badges

Comments

Adrian · Accepted Answer · 2010-08-03 07:51:48Z

0

looks like you are missing a semicolon after "index.php"

answered Aug 3, 2010 at 7:51

Adrian

2,9231 gold badge18 silver badges27 bronze badges

Collectives™ on Stack Overflow

Using div background image as link using jQuery

6 Answers 6

4 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related