473,387 Members | 1,464 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 software developers and data experts.

changing the background when the mouse button is held down

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
4 2466
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Tom | last post by:
Is there any C++ .NET best practice for handling the case where a mouse is held on a control and the right-button is held down - signifying a rapidly repeating action equivalent to clicking the...
5
by: Martha | last post by:
When I move my mouse over a hyperlink component, the hyperlink does not change color. How do I change the color of a hyperlink when the mouse goes over the hyperlink? or Change the color of a...
2
by: stef | last post by:
Hello: I would like a process to continue as long as the mouse is held down on a button and to stop as soon as it is released. Something ideally like this: "while (ButtonIsDown) {i+ = 1}" I...
3
by: Morten Snedker | last post by:
If I have a number of random applications open, move the mouse cursor to a given position and do a click, the application gets the focus. That is what this simple code should illustrate: Dim...
5
by: Mudcat | last post by:
I was trying to design a widget that I could drag and drop anywhere in a frame and then resize by pulling at the edges with the mouse. I have fiddled with several different approaches and came...
6
by: Eric Layman | last post by:
Is there a way to detect a held-down button while the mouse is moving? Thanks. Posted Via Usenet.com Premium Usenet Newsgroup Services
1
by: =?Utf-8?B?bGpsZXZlbmQy?= | last post by:
I've noticed that if you click on a Windows.Forms.ToolStripButton then a MouseLeave event will not occur until the button is released. ToolStripMenuItems on the other hand will raise a MouseLeave...
6
by: =?Utf-8?B?bGpsZXZlbmQy?= | last post by:
I want to implement the following: If the user clicks on the border of a form, then I want to show a box around the form that represents the form's bounds. As the user moves the mouse only the...
8
by: metaphysics | last post by:
I'm not sure if this is possible, but I thought I saw it somewhere and I'd like to know how to do it. This is rather difficult to explain, so bare with me. Lets say you have 3 background...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.