By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,701 Members | 1,711 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,701 IT Pros & Developers. It's quick & easy.

changing the background when the mouse button is held down

P: n/a
I'm trying to write a script whereby the body background is changed to
back (from white) when the mouse button is held down and kept held
down. When you lift it up, I'd like it to change back to white.
Unfortunately, I'm not sure how to do that. Any ideas? Here's my
code:

http://www.frostjedi.com/terra/scrip...mousedown.html

Thanks!
Aug 22 '08 #1
Share this Question
Share on Google+
4 Replies


P: n/a
SAM
yawnmoth a écrit :
I'm trying to write a script whereby the body background is changed to
back (from white) when the mouse button is held down and kept held
down. When you lift it up, I'd like it to change back to white.

function bck(color) {
document.body.style.backgroundColor = color;
}

<body onmousedown="bck('black');" onmouseup="bck('');">
Here's my code:

http://www.frostjedi.com/terra/scrip...mousedown.html
<html>
<body>
<script type="text/javascript">
var body = document.getElementsByTagName('body')[0].style;
document.onmouseup = function() { body.background = ''; }
document.onmousedown = function() { body.background = '#000'; }
</script>
<p>some text
</body>
</html>

--
sm
Aug 22 '08 #2

P: n/a
On Aug 22, 2:55*pm, yawnmoth <terra1...@yahoo.comwrote:
I'm trying to write a script whereby the body background is changed to
back (from white) when the mouse button is held down and kept held
down. *When you lift it up, I'd like it to change back to white.
Unfortunately, I'm not sure how to do that. *Any ideas? *Here's my
code:

http://www.frostjedi.com/terra/scrip...mousedown.html

Thanks!
Never mind... I figured it out...
Aug 22 '08 #3

P: n/a
On Aug 22, 2:55*pm, yawnmoth <terra1...@yahoo.comwrote:
I'm trying to write a script whereby the body background is changed to
back (from white) when the mouse button is held down and kept held
down. *When you lift it up, I'd like it to change back to white.
Unfortunately, I'm not sure how to do that. *Any ideas? *Here's my
code:

http://www.frostjedi.com/terra/scrip...mousedown.html

Thanks!
onMouseDown(), onMouseUp()

http://www.w3schools.com/jsref/jsref_onmousedown.asp

But there are some issues in regard to what you're trying to do,
depending on where you use onMouseDown/onMouseUp and exactly when you
want this event to be triggered.

see this: http://www.quirksmode.org/js/events_order.html

As to changing the background color, there is different ways to grab a
reference to the body element, but here we go:

<script>
function toggleBG(bgcolr){
document.getElementsByTagName('body')[0].style.backgroundColor =
bgcolr;
}
</script>

<body onmousedown="toggleBG('black)" onmouseup="toggleBG('white')">

good luck
Aug 22 '08 #4

P: n/a
yawnmoth wrote:
I'm trying to write a script whereby the body background is changed to
back (from white) when the mouse button is held down and kept held
down. When you lift it up, I'd like it to change back to white.
Unfortunately, I'm not sure how to do that. Any ideas? Here's my
code:

http://www.frostjedi.com/terra/scrip...mousedown.html
Now, that is so little code that you could have posted it, too:

| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

You do not want to use XHTML. Use HTML 4.01 instead.

| <head>
| <title>onmousedown / onmouseup</title>
| </head>
|
| <body id="body">

The `body' element does not need an ID to be referred to.

| <script type="text/javascript">
| body = document.getElementById('body');

`body' was not declared, which is error-prone. And you don't need the
additional identifier anyway:

document.body

is mostly standards-compliant:

<http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-62018039>

| document.onmouseup = body.style.background = '#fff';
| document.onmousedown = body.style.background = '#000';

It if works, this is assigning "#fff" to `document.onmouseup' and "#000" to
`document.onmousedown' because the right-hand side of the whole assignment
evaluates to the result of the right-hand side assignment.

Because there is no delay in the evaluation of the right-hand side
assignment, the background color of the `body' element would turn white and
immediately black afterwards.

You should not use the `background' CSS property when all you want to do is
to change the background color.

The `onmouseup' and `onmousedown' properties are proprietary and should not
be used but as a fallback for the standards-compliant approach.

It is not necessary here to use scripting to define the event listeners; the
HTML BODY element (and the XHTML `body' element) has intrinsic event handler
attributes for that.

<body
onmouseup="document.body.style.backgroundColor = '#fff';"
onmousedown="document.body.style.background = '#000';">

(Usually, by convention you could refer to the handling element with `this',
but the `body' element has a peculiarity here.)

RTFM.

<http://jibbering.com/faq/>
PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>
Aug 23 '08 #5

This discussion thread is closed

Replies have been disabled for this discussion.