Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to disable onmouseover when onmouseclick used

Status
Not open for further replies.
Lokoono

Lokoono

Programmer
Jun 13, 2007
34
US
I'm learning more about Javascript each day, but I'm still unable to figure this out this dilemma. I searched on tek-tips and elsewhere across the web for a solution, but couldn't find one that fits my needs.

I need to change the following code to be able to do the following:

1. Change the background color of the td cell to lime green when the cell is clicked
2. Keep the background color as lime green until another day is clicked (and if another day is clicked, the original clicked cell goes back to a white background and the newly clicked cell is now lime green).


I've managed to figure out the onclick event, but I can't get Javascript to keep it as lime green without the onmouseover taking control immediately when I move the mouse just a hair.

Everything else works great on the page and I as well as my family (which will be the end-consumer of this page) all use IE7 (not sure if it makes a difference).

I appreciate any help anyone can give. Thanks!

Code: 
<html><head>
<style type="text/css"> 
.regtext
{
    FONT: 16px Arial, Helvetica, sans-serif;
    COLOR: #000000
}
</style>
<script type="text/javascript">

function hiddenDiv() { 
document.getElementById('hideShow').style.display = 'none';
document.getElementById('hideShow2').style.display = 'none';
document.getElementById('hideShow3').style.display = 'none';
document.getElementById('hideShow4').style.display = 'none';
document.getElementById('hideShow5').style.display = 'none';
document.getElementById('hideShow6').style.display = 'none';
document.getElementById('hideShow7').style.display = 'none';
}

function showDiv() { 
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('hideShow2').style.display = 'none';
document.getElementById('hideShow3').style.display = 'none';
document.getElementById('hideShow4').style.display = 'none';
document.getElementById('hideShow5').style.display = 'none';
document.getElementById('hideShow6').style.display = 'none';
document.getElementById('hideShow7').style.display = 'none';
document.getElementById('hideShow').style.display = 'block';
}
}

function showDiv2() { 
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('hideShow').style.display = 'none';
document.getElementById('hideShow3').style.display = 'none';
document.getElementById('hideShow4').style.display = 'none';
document.getElementById('hideShow5').style.display = 'none';
document.getElementById('hideShow6').style.display = 'none';
document.getElementById('hideShow7').style.display = 'none';
document.getElementById('hideShow2').style.display = 'block'; 
} 
}

function showDiv3() { 
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('hideShow').style.display = 'none';
document.getElementById('hideShow2').style.display = 'none';
document.getElementById('hideShow4').style.display = 'none';
document.getElementById('hideShow5').style.display = 'none';
document.getElementById('hideShow6').style.display = 'none';
document.getElementById('hideShow7').style.display = 'none';
document.getElementById('hideShow3').style.display = 'block'; 
} 
}

function showDiv4() {
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('hideShow').style.display = 'none';
document.getElementById('hideShow2').style.display = 'none';
document.getElementById('hideShow3').style.display = 'none';
document.getElementById('hideShow5').style.display = 'none';
document.getElementById('hideShow6').style.display = 'none';
document.getElementById('hideShow7').style.display = 'none';
document.getElementById('hideShow4').style.display = 'block'; 
} 
}

function showDiv5() {
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('hideShow').style.display = 'none';
document.getElementById('hideShow2').style.display = 'none';
document.getElementById('hideShow3').style.display = 'none';
document.getElementById('hideShow4').style.display = 'none';
document.getElementById('hideShow6').style.display = 'none';
document.getElementById('hideShow7').style.display = 'none';
document.getElementById('hideShow5').style.display = 'block'; 
} 
}

function showDiv6() {
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('hideShow').style.display = 'none';
document.getElementById('hideShow2').style.display = 'none';
document.getElementById('hideShow3').style.display = 'none';
document.getElementById('hideShow4').style.display = 'none';
document.getElementById('hideShow5').style.display = 'none';
document.getElementById('hideShow7').style.display = 'none';
document.getElementById('hideShow6').style.display = 'block'; 
} 
}

function showDiv7() {
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('hideShow').style.display = 'none';
document.getElementById('hideShow2').style.display = 'none';
document.getElementById('hideShow3').style.display = 'none';
document.getElementById('hideShow4').style.display = 'none';
document.getElementById('hideShow5').style.display = 'none';
document.getElementById('hideShow6').style.display = 'none';
document.getElementById('hideShow7').style.display = 'block'; 
} 
}


</script>

</head>
<body onload="javascript:hiddenDiv()">
<script>
function tdmouseover(el) {
el.style.color = "black"
el.style.backgroundColor = "orange"
}

function tdmouseout(el) {
el.style.color = "black"
el.style.backgroundColor = "white"
}

function tdmouseclickit(el) {
	el.style.color = "black"
	el.style.backgroundColor = "lime"
}
</script>
<br><br><br>
<table border=1 align=center width="45%" bordercolor=black cellpadding=3 width=95% cellspacing=0>
<tr height=25 class=regtext bgcolor=#ffffff>
<a href="javascript:showDiv()"><td onmouseover="tdmouseover(this)" onmouseout="tdmouseout(this)" onclick="tdmouseclickit(this)" align=center><b>Sun</td>
<a href="javascript:showDiv2()"><td onmouseover="tdmouseover(this)" onmouseout="tdmouseout(this)" onclick="tdmouseclickit(this)" align=center><b>Mon</td>
<a href="javascript:showDiv3()"><td onmouseover="tdmouseover(this)" onmouseout="tdmouseout(this)" onclick="tdmouseclickit(this)" align=center><b>Tue</td>
<a href="javascript:showDiv4()"><td onmouseover="tdmouseover(this)" onmouseout="tdmouseout(this)" onclick="tdmouseclickit(this)" align=center><b>Wed</td>
<a href="javascript:showDiv5()"><td onmouseover="tdmouseover(this)" onmouseout="tdmouseout(this)" onclick="tdmouseclickit(this)" align=center><b>Thu</td>
<a href="javascript:showDiv6()"><td onmouseover="tdmouseover(this)" onmouseout="tdmouseout(this)" onclick="tdmouseclickit(this)" align=center><b>Fri</td>
<a href="javascript:showDiv7()"><td onmouseover="tdmouseover(this)" onmouseout="tdmouseout(this)" onclick="tdmouseclickit(this)" align=center><b>Sat</td>
</tr>
</table>
<br><br><br><br><br>
<div align="center" class="regtext">
<div id="hideShow" style="margin-top:4px;font-weight:bold;text-decoration:underline;"> 
Sunday
</div>
<div id="hideShow2" style="margin-top:4px;font-weight:bold;text-decoration:underline;"> 
Monday
</div>
<div id="hideShow3" style="margin-top:4px;font-weight:bold;text-decoration:underline;"> 
Tuesday
</div>
<div id="hideShow4" style="margin-top:4px;font-weight:bold;text-decoration:underline;"> 
Wednesday
</div>
<div id="hideShow5" style="margin-top:4px;font-weight:bold;text-decoration:underline;"> 
Thursday
</div>
<div id="hideShow6" style="margin-top:4px;font-weight:bold;text-decoration:underline;"> 
Friday
</div>
<div id="hideShow7" style="margin-top:4px;font-weight:bold;text-decoration:underline;"> 
Saturday
</div>
</div>
</body>
</html>
 
Sort by date Sort by votes
You could do it in a number of ways.

if you can only have one clicked at any one time, then have a global var that stores the ID of the current clicked element.

when an element is clicked get the ID held in the 'current_clicked' var and reassign the onmouseover/mouseout event, then remove the newly clicked elements onmouseover/mouseout event.

you can alter events on elements with JS.

I do this to get round X/HTML validation and allow targeting a new window.

Code: 
onclick="this.target='_blank';"

Hope this makes sense





"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
544
Rayj0000
Rayj0000
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
705
Kennelbloke
Kennelbloke
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
592
lexer
lexer
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
848
xwb
xwb
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
664
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top