changing the background image on mouse down

Question

I have a slight problem that I swear should work...it kinda seems like a silly question ...but here it is ... i want a div i created to act as a button ...it how ever does not want to change its background when i click on it( giving the effect of a button) here's my code :

<!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Untitled Document</title>
 <style>
 #button1 {
     width:100px;
     height:50px;
     background-image:url(normalbutton.jpg)
 }
 </style>
 </head>

 <body class="asd">
 <div id="container">
 <a href="#">
 <div id="button1" onmousedown="document.getElementById("button1").style.backgroundImage='url(onmousedownbutton.jpg)'"></div></a>

 </body>
 </html>

1) You shouldn't put inline javascript. 2) you can refer to your item using `this` keyword in your function. 3) It may be that the path to your image is not good... check this first — Laurent S., Oct 25 '13 at 08:17
4), your HTML is invalid. You are using `"` inside `"`, what will give you probably an error. (`"document.getElementById("button1")..."`) — putvande, Oct 25 '13 at 08:17
thanks ...i thought of trying to avoid creating some script ..anyways ..thanks :) — user2919040, Oct 25 '13 at 08:19
As @Bartdude said, inline js is your problem. Check this fiddle: **http://jsfiddle.net/CcKM4/** to see how to put that to work. — Abhitalks, Oct 25 '13 at 08:19

score 2 · Answer 1 · answered Oct 25 '13 at 08:28

2

I think using jQuery it will be easy :

$("#button1").mousedown(function() {
    $(this).css({'background-image': 'url(1.jpg)'}) 
});

answered Oct 25 '13 at 08:28

BhushanK

1,205
6
23
39

score 1 · Answer 2 · edited Oct 25 '13 at 08:22

1

You use double quotes inside double quotes. Change the quotes around button1 to single quotes like this: <div id="button1" onmousedown="document.getElementById('button1').style.backgroundImage='url(onmousedownbutton.jpg)'"></div>

Further notes:

Your <div id="container"> isn't closed
You can't use <div> inside of <a>

edited Oct 25 '13 at 08:22

Abhitalks

27,721
5
58
81

answered Oct 25 '13 at 08:18

Reeno

5,720
11
37
50

score 1 · Answer 3 · answered Oct 25 '13 at 08:22

Just use css :

HTML

<html> 
<body class="asd">
 <div id="container">
   <a href="#">
     <div id="button1" ></div>
   </a>
  </div>
 </body> 
 </html>

CSS

#button1 {width:500px;height:500px;background:red}
#button1:hover {background:green;}
#button1:active {background:grey;}

score 0 · Answer 4 · answered Oct 25 '13 at 08:18

Change the mouse down like this

 <a href="#">
 <div id="button1" onmousedown="this.style.backgroundImage='url(http://t3.gstatic.com/images?q=tbn:ANd9GcT6-aJ6Hz_oXi_M2ZScbEiNGKZFKN3hyhffh2NMWTmbgU2WX-IZKA)'">Button
</div>
</a>

LiveDemo

onmousedown="this.style.backgroundImage='url(http://t3.gstatic.com/images?q=tbn:ANd9GcT6-aJ6Hz_oXi_M2ZScbEiNGKZFKN3hyhffh2NMWTmbgU2WX-IZKA)'">

I have used some images from Google it will look good with some custom images. :)

score 0 · Answer 5 · answered Oct 25 '13 at 08:20

0

You also can try css:

#button1:focus {
  background: url(onmousedownbutton.jpg);
}

or

#button1:active{
  background: url(onmousedownbutton.jpg);
}

answered Oct 25 '13 at 08:20

Mihey Egoroff

1,542
14
23

score 0 · Answer 6 · edited May 30 '21 at 09:43

Building on Bushan's answer, this will swap to the downclick image when mouse is held down, and revert back to the original image when mouse button is released.

$("#button1").mousedown(function() {
    $(this).css({'background-image': 'url(image2.jpg)'}) 
}).mousedown(function(){
    $(this).css({'background-image': 'url(image1.jpg)'}) 
});

HTML:

<div id="button1" style="background-image:url('image1.jpg');"></div>

Sources/References:

CSS background-image - What is the correct usage?

changing the background image on mouse down

6 Answers6

Linked