Using div background image as link using jQuery

Question

Hello,

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

Answer 1

Use,

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

instead of

 window.location = "index.php"

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

Answer 2

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 */
}

Answer 3

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

Answer 4

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.

Answer 5

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

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

Answer 6

add display:block; to your css

see an working example here

http://jsfiddle.net/4ceK4/