I have something like below, normally when my mouse is over the button, it will change from less visible to visible, if mouse move away, it turn back to less visible.
But now i want to make it when i click the button, it will keep the status as visable even i move the mouse out from the button. Please help.
Thanks. - <SCRIPT>
-
function makevisible(cur,which){
-
if (which==0)
-
cur.filters.alpha.opacity=90
-
else
-
cur.filters.alpha.opacity=40
-
if (which==2)
-
cur.filters.alpha.opacity=0
-
}
-
</SCRIPT>
-
[HTML]<button style="font-size: 9pt; color: gray; FILTER: alpha(opacity=4 0); background-color: gainsboro; border: 3px double gainsboro"
onmouseover="th is.style.color= 'black'; makevisible(thi s,0)" onmouseout="thi s.style.color=' gray'; makevisible(thi s,1)" onclick="listin fo()">List</button><br><br>[/HTML]
5 2277
Hi,there is some code will help you on the below. - <SCRIPT>
-
function makevisible(cur,which){
-
if (which==0)
-
cur.filters.alpha.opacity=90
-
else
-
cur.filters.alpha.opacity=40
-
if (which==2)
-
cur.filters.alpha.opacity=0
-
}
-
function listinfo(el){
-
makevisible(el,0);
-
el.onmouseout = function(){
-
};
-
}
-
</SCRIPT>
-
[HTML]<button style="font-size: 9pt; color: gray; FILTER: alpha(opacity=4 0); background-color: gainsboro; border: 3px double gainsboro"
onmouseover="th is.style.color= 'black'; makevisible(thi s,0)" onmouseout="thi s.style.color=' gray'; makevisible(thi s,1)" onclick="listin fo(this)">List</button><br><br>[/HTML]
acoder 16,027
Recognized Expert Moderator MVP
Please use code tags when posting code:
[CODE=javascrip t]
Your JavaScript code...
[/code]
Thanks!
Thanks, it works, however, there is 2 button, i want to make it when i Click the 2nd button, then the first button will chnage to less invisible again?
Thanks. -
-
<button style="font-size: 9pt; color: gray; FILTER: alpha(opacity=40); background-color: gainsboro; border: 3px double gainsboro"
-
onmouseover="this.style.color='black'; makevisible(this,0)" onmouseout="this.style.color='gray'; makevisible(this,1)" onclick="generatenote(); listinfo(this)">Generate PCRM note</button><br><br>
-
<button style="font-size: 9pt; color: gray; FILTER: alpha(opacity=40); background-color: gainsboro; border: 3px double gainsboro"
-
onmouseover="this.style.color='black'; makevisible(this,0)" onmouseout="this.style.color='gray'; makevisible(this,1)" onclick="generatemail(); listinfo(this)">Generate Email: Disti</button><br>
-
-
Dasty 101
Recognized Expert New Member
Your new condition changes solution quite a bit. So, you need to know which one button is in "clicked" state on general scope and old clicked button must be accessable (so we can turn it off). I think that easiest way would be to create global variable that holds object.id of last clicked button. (but it requires to set unique ids to all of your buttons). Solution would look like: - <SCRIPT>
-
var last_clicked_element_id = null;
-
-
function makevisible(cur,which){
-
if (which==0)
-
{
-
cur.style.color='black';
-
cur.filters.alpha.opacity=90;
-
}
-
else
-
{
-
if ((!cur.id) || (cur.id != last_clicked_element_id))
-
{
-
cur.style.color='gray';
-
cur.filters.alpha.opacity=40;
-
}
-
}
-
}
-
-
function listinfo(cur)
-
{
-
var old_selected = null;
-
-
if (last_clicked_element_id)
-
{
-
old_selected = document.getElementById(last_clicked_element_id);
-
}
-
last_clicked_element_id = cur.id;
-
if (old_selected) makevisible(old_selected, 1)
-
-
makevisible(cur,0);
-
}</SCRIPT>
-
[HTML]<button style="font-size: 9pt; color: gray; FILTER: alpha(opacity=4 0); background-color: gainsboro; border: 3px double gainsboro"
onmouseover="ma kevisible(this, 0)"
onmouseout="mak evisible(this,1 )" onclick="listin fo(this)" id=button1>List 1</button>
<br>
<button style="font-size: 9pt; color: gray; FILTER: alpha(opacity=4 0); background-color: gainsboro; border: 3px double gainsboro"
onmouseover="ma kevisible(this, 0)"
onmouseout="mak evisible(this,1 )" onclick="listin fo(this)" id=button2>List 2</button>[/HTML]
Yes, maybe we can do it better / faster by remembering reference to last clicked object (instead of its id), but this one is easier to understand and you can tune it up yourself.
acoder 16,027
Recognized Expert Moderator MVP
Just a quick mention on cross-browser compatibility.
Use style.opacity (standard) to support the other browsers (e.g. Firefox, Opera, Safari) and style.mozOpacit y to support older versions of Mozilla/Firefox.
Sign in to post your reply or Sign up for a free account.
Similar topics |
by: NONYA |
last post by:
This is driving me crazy. I'm having trouble with how a simple radio
button is displayed, in a simple html form.
The default has the outline around the radio button shaded gray only
in the top left hand side corner and on a white background it doesn't
show up very well. I've seen multiple examples of radio buttons that
are fully outlined in blue and the little dot is green. How the heck
do I do this??? I've figured out how to change...
|
by: Avni |
last post by:
Can anyone tell me what event i would use to change the background colour of a button while the mouse is over the button. I could not find the mouseover event
The colour will need to change back to its origional when the mouse is not over the butto
Thx
|
by: Vinita Sharma |
last post by:
Hi All,
I have a strange problem. I have 2 text boxes and a button in my form. There
is a function called on onchange event of the first text box. There is
another function called on onclick event of the button. Things work fine if
you move from one field to another using tab keys. But if you change
something in the first text box and move to button using mouse, the onchange
event of the text box is called but the onclick event of the...
|
by: Tom Weston |
last post by:
Hello
Why are my buttons always Grey? how can I change the colour of the button?
Tom
|
by: Mel |
last post by:
Hi, Is there any way I can force to change button background colour when
toggle button is checked? Just like button change its background colour when
mouseover in MS Visual Studio.NET.
I hope I can get my question answered. Thank you very much.
| |
by: Sushi |
last post by:
Hello!
I'm new to the Python language(about 2 months). Having done C programming for 2 years I find out I need Python for a final project, and have been trying to do get my head around object oriented programming. At the moment I'm simply trying to get the colour of a circle to change when you press a button. I've got this so far:
from Tkinter import *
class Op:
def __init__(self, master):
|
by: WestAussie |
last post by:
Hello
I'm new to .NET and have been working through some exercises to get a bit more fluent.
I have no idea what I have done to cause command buttons to have their background appearance changed. This has happened to all previous programs as well that I have gone back over and checked, yet when I created them the command button style was different.
Originally the background of the command button was one colour (light blue from memory)...
|
by: bettyboo |
last post by:
Hi
I'm new to the forum and also a VERY new user of Access to develop databases. I'm building a DB for a driving instructor acquaintance, and he wants a button on the pupil data entry form which he can click to flag a pupil as "Do Not Rebook" (i.e. if they're a non-payer or something). Upon clicking the button, he wants a value to be recorded in the appropriate field in the table (so we can report on it later) and he also wants the...
|
by: gavy7210 |
last post by:
hello
i am using struts 1.2,Eclipse Platform Version: 3.4.2,mySql 5.0.1,jdk 1.5..
i have a login form(jsp) in which a user logs in,in case he doesnt enter his username and/or password an error is displayed using the <ul> tag and <html:errors> in the jsp. in the from class a vaidate method creates an actionerrors object adds all the errors to it and finally returns it.
the ids are linked in messageresources.properties and appropriate...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| |
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |