[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 158
  • Last Modified:

help with this html code for a menu (rollover problem)

Observe the code below : its for vertical buttons, that have 3 states,


button22-up    - red
button22-over   -  blue
button22-normal -  black
button22-down - yellow



when the user clicks on down, the color changes to a state that remains until the user clicks on another
button.

Problem is, if you try this code what happens is this :

From start, rollovers work fine. Then you click on a button and it remains on yellow. Roll off that button
and onto another button and that (new)button changes to blue (all good so far) But if you roll back
onto the original button, it goes from the down color - yellow to the OVER color BLUE (like it is being rolled
over again) then when you roll off that original button it remains BLUE.

What i need is  - when clicked the button turns to yellow and remains yellow even when you roll over another button and back onto that button.  

I hope I have explained myself clearly - for a html example pls ask and I will supply.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <style type="text/css">
 
 
 
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	
}
 
-->
</style></head>
 
	
	
	
	
	<style>
        .inputImage
        {
            border: 1px solid black;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
                var buttonIDClicked
                buttonIDClicked = '';
                var img = [];
                img['Button1'] = [];
                img['Button1']['up'] = 'button22-up.jpg';
                img['Button1']['over'] = 'button22-over.jpg';
                img['Button1']['normal'] = 'button22-normal.jpg';
                img['Button1']['down']  = 'button22-down.jpg';
                img['Button2'] = [];
                img['Button2']['up'] = 'button23-up.jpg';
                img['Button2']['over'] = 'button23-over.jpg';
                img['Button2']['normal'] = 'button23-normal.jpg';
                img['Button2']['down']  = 'button23-down.jpg';
                img['Button3'] = [];
                img['Button3']['up'] = 'button24-up.jpg';
                img['Button3']['over'] = 'button24-over.jpg';
                img['Button3']['normal'] = 'button24-normal.jpg';
                img['Button3']['down']  = 'button24-down.jpg';
				
                
                function doRollOver(buttonID){
                        if (buttonID.src != img[buttonID.id]['up'])
                        {
                           buttonID.src = img[buttonID.id]['over'];
                        }
                }
				
                function doClick(buttonID, down){
                        clearAllButtons();
                        buttonIDClicked = buttonID.getAttribute('ID');
                        buttonID.src = img[buttonID.id][(down ? 'down' : 'up')];
                }
                
                function doRollOut(buttonID){
                        if(buttonID.getAttribute('ID')!=buttonIDClicked){
                                buttonID.src = img[buttonID.id]['normal'];
                        }
                }
                
                function clearAllButtons(){
                        var myButton
                        for(var i=1;i<=10;i++){
                                myButton = document.getElementById('Button'+i);
                                if(myButton && (myButton.src != img[myButton.id]['down'])){
                                        myButton.src = img[myButton.id]['normal'];
                                }
                        }
                }
    </script>
</head>
<body onload="clearAllButtons()">
        <form action="#" method="post">
        
           <img id="Button1" class="inputImage" type="image" src="button22-normal.jpg" onmouseover="doRollOver(this);" onmouseout="doRollOut(this);" onmouseup="doClick(this);" onmousedown="doClick(this, true);" ondragstart="return false" onselectstart="return false"><br/>
           <img id="Button2" class="inputImage" type="image" src="button23-normal.jpg" onmouseover="doRollOver(this);" onmouseout="doRollOut(this);" onmouseup="doClick(this);" onmousedown="doClick(this, true);" ondragstart="return false" onselectstart="return false"><br/>
             <img id="Button3" class="inputImage" type="image" src="button24-normal.jpg" onmouseover="doRollOver(this);" onmouseout="doRollOut(this);" onmouseup="doClick(this);" onmousedown="doClick(this, true);" ondragstart="return false" onselectstart="return false"><br/>
</form>
 
</body>
</html>

Open in new window

0
nathan1038
Asked:
nathan1038
  • 6
  • 6
1 Solution
 
hieloCommented:
>>if (buttonID.src != img[buttonID.id]['up'])
If your html source code originally has something like:

<ims src="button1.gif"...> 
some browsers take that attribute and (internally) change it to the full url: "http://www.yoursite.com/button1.gif"
So, under these circumstances, this:
if (buttonID.src != img[buttonID.id]['up']) 
is equivalent to:
if( "http://www.yoursite.com/button1.gif" != 'button1.gif') 
which will always be true, so it may not work as you expect. You would need to use this instead:
if ( buttonID.src.indexOf(img[buttonID.id]['up']) == -1 ) 
the same applies to:
if(myButton && (myButton.src != img[myButton.id]['down'])){ 
change it to:
if(myButton && (myButton.src.indexOf(img[myButton.id]['down']) == -1) ){ 
I don't know if that will fix your problem (I don't have your images so I couldn't see the effects) but is a step in the right direction.

Open in new window

0
 
nathan1038Author Commented:
erm, are you saying my problem is solvable ! I wonder if you would be generous enough to
re write my script as I have tried to do what your saying but probably did not understand your coding
correctly.

0
 
hieloCommented:
>>are you saying my problem is solvable !
most likely it is, but it would help to see what your code is actually doing if your provided the graphics OR a link to a test page.

>>I have tried to do what your saying but probably did not understand
attached is the modified code, but like I said, I'm not certain it will fix your issue.
    <script type="text/javascript">
                var buttonIDClicked
                buttonIDClicked = '';
                var img = [];
                img['Button1'] = [];
                img['Button1']['up'] = 'button22-up.jpg';
                img['Button1']['over'] = 'button22-over.jpg';
                img['Button1']['normal'] = 'button22-normal.jpg';
                img['Button1']['down']  = 'moveDown.png';
                img['Button2'] = [];
                img['Button2']['up'] = 'button23-up.jpg';
                img['Button2']['over'] = 'button23-over.jpg';
                img['Button2']['normal'] = 'moveDownBlur.png';
                img['Button2']['down']  = 'button23-down.jpg';
                img['Button3'] = [];
                img['Button3']['up'] = 'button24-up.jpg';
                img['Button3']['over'] = 'button24-over.jpg';
                img['Button3']['normal'] = 'moveTopBlur.png';
                img['Button3']['down']  = 'button24-down.jpg';
				
                
                function doRollOver(buttonID){
                        if (buttonID.src.indexOf(img[buttonID.id]['up']) == -1)
                        {
                           buttonID.src = img[buttonID.id]['over'];
                        }
                }
				
                function doClick(buttonID, down){
                        clearAllButtons();
                        buttonIDClicked = buttonID.getAttribute('ID');
                        buttonID.src = img[buttonID.id][(down ? 'down' : 'up')];
                }
                
                function doRollOut(buttonID){
                        if(buttonID.getAttribute('ID')!=buttonIDClicked){
                                buttonID.src = img[buttonID.id]['normal'];
                        }
                }
                
                function clearAllButtons(){
                        var myButton
                        for(var i=1;i<=10;i++){
                                myButton = document.getElementById('Button'+i);
                                if(myButton && (myButton.src.indexOf(img[myButton.id]['down'])==-1)){
                                        myButton.src = img[myButton.id]['normal'];
                                }
                        }
                }
    </script>

Open in new window

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
nathan1038Author Commented:
Just add the following code along with these images -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <style type="text/css">
 
 
 
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	
}
 
-->
</style></head>
 
	
	
	
	
	<style>
        .inputImage
        {
            border: 1px solid black;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
                var buttonIDClicked
                buttonIDClicked = '';
                var img = [];
                img['Button1'] = [];
                img['Button1']['up'] = 'button22-up.jpg';
                img['Button1']['over'] = 'button22-over.jpg';
                img['Button1']['normal'] = 'button22-normal.jpg';
                img['Button1']['down']  = 'button22-down.jpg';
                img['Button2'] = [];
                img['Button2']['up'] = 'button23-up.jpg';
                img['Button2']['over'] = 'button23-over.jpg';
                img['Button2']['normal'] = 'button23-normal.jpg';
                img['Button2']['down']  = 'button23-down.jpg';
                img['Button3'] = [];
                img['Button3']['up'] = 'button24-up.jpg';
                img['Button3']['over'] = 'button24-over.jpg';
                img['Button3']['normal'] = 'button24-normal.jpg';
                img['Button3']['down']  = 'button24-down.jpg';
				
                
                function doRollOver(buttonID){
                        if (buttonID.src != img[buttonID.id]['up'])
                        {
                           buttonID.src = img[buttonID.id]['over'];
                        }
                }
				
                function doClick(buttonID, down){
                        clearAllButtons();
                        buttonIDClicked = buttonID.getAttribute('ID');
                        buttonID.src = img[buttonID.id][(down ? 'down' : 'up')];
                }
                
                function doRollOut(buttonID){
                        if(buttonID.getAttribute('ID')!=buttonIDClicked){
                                buttonID.src = img[buttonID.id]['normal'];
                        }
                }
                
                function clearAllButtons(){
                        var myButton
                        for(var i=1;i<=10;i++){
                                myButton = document.getElementById('Button'+i);
                                if(myButton && (myButton.src != img[myButton.id]['down'])){
                                        myButton.src = img[myButton.id]['normal'];
                                }
                        }
                }
    </script>
</head>
<body onload="clearAllButtons()">
<form action="#" method="post">
        
   <img id="Button1" class="inputImage" type="image" src="button22-up.jpg" onmouseover="doRollOver(this);" onmouseout="doRollOut(this);" onmouseup="doClick(this);" onmousedown="doClick(this, true);" ondragstart="return false" onselectstart="return false"><br/>
  <img id="Button2" class="inputImage" type="image" src="button23-up.jpg" onmouseover="doRollOver(this);" onmouseout="doRollOut(this);" onmouseup="doClick(this);" onmousedown="doClick(this, true);" ondragstart="return false" onselectstart="return false"><br/>
  <img id="Button3" class="inputImage" type="image" src="button24-up.jpg" onmouseover="doRollOver(this);" onmouseout="doRollOut(this);" onmouseup="doClick(this);" onmousedown="doClick(this, true);" ondragstart="return false" onselectstart="return false"><br/>
</form>
 
 
 
 
</body>
</html>

Open in new window

menu-example.zip
0
 
nathan1038Author Commented:
sorry about taking so long with those pics mate.
0
 
nathan1038Author Commented:
had a quick look at your code there, you have a png for the down image - have a look at what I have posted
maybe that makes it a bit clearer and u can play around with the images.

Thank you so much for all your help so far hielo.
0
 
hieloCommented:
>>"Then you click on a button and it remains on yellow..."
I don't see any button remain on the yellow state you are talking about. It goes from blue-yellow-red, but it never stops/remains at yellow. Does it still stop at yellow for you? Does this happen on more than one browser?
0
 
nathan1038Author Commented:
sorry my mistake, on my computer (run through dreamweaver ) and yes throgh IE and Firefox I
get the following -

Rollover is Blue. When you click down, and release, it remains RED, but if you roll over another button
that button will turn blue (all good) but if you roll over the same button (that was red) it now goes to BLUE. and remains on blue until you click another button.

Tell me if you find this too.
0
 
hieloCommented:
>>Tell me if you find this too.
Yes, and you want the red to remain red until another is clicked and do NOT change go blue onmouseover either. Correct?
0
 
hieloCommented:
if yes:
                function doRollOver(buttonID){
			 		if( buttonID.src.indexOf("down.jpg") > -1 )
					{
					return;
					}
                        else if (buttonID.src.indexOf(img[buttonID.id]['up'])==-1)
                        {
                           buttonID.src = img[buttonID.id]['over'];
                        }
                }

Open in new window

0
 
hieloCommented:
including the earlier suggestions:
    <script type="text/javascript">
                var buttonIDClicked
                buttonIDClicked = '';
                var img = [];
                img['Button1'] = [];
                img['Button1']['up'] = 'button22-up.jpg';
                img['Button1']['over'] = 'button22-over.jpg';
                img['Button1']['normal'] = 'button22-normal.jpg';
                img['Button1']['down']  = 'button22-down.jpg';
                img['Button2'] = [];
                img['Button2']['up'] = 'button23-up.jpg';
                img['Button2']['over'] = 'button23-over.jpg';
                img['Button2']['normal'] = 'button23-normal.jpg';
                img['Button2']['down']  = 'button23-down.jpg';
                img['Button3'] = [];
                img['Button3']['up'] = 'button24-up.jpg';
                img['Button3']['over'] = 'button24-over.jpg';
                img['Button3']['normal'] = 'button24-normal.jpg';
                img['Button3']['down']  = 'button24-down.jpg';
				
                
                function doRollOver(buttonID){
			 		if( buttonID.src.indexOf("down.jpg") > -1 )
					{
					return;
					}
                        else if (buttonID.src.indexOf(img[buttonID.id]['up'])==-1)
                        {
                           buttonID.src = img[buttonID.id]['over'];
                        }
                }
				
                function doClick(buttonID, down){
                        clearAllButtons();
                        buttonIDClicked = buttonID.getAttribute('ID');
                        buttonID.src = img[buttonID.id][(down ? 'down' : 'up')];
                }
                
                function doRollOut(buttonID){
                        if(buttonID.getAttribute('ID')!=buttonIDClicked){
                                buttonID.src = img[buttonID.id]['normal'];
                        }
                }
                
                function clearAllButtons(){
                        var myButton
                        for(var i=1;i<=10;i++){
                                myButton = document.getElementById('Button'+i);
                                if(myButton && (myButton.src.indexOf(img[myButton.id]['down'])==-1)){
                                        myButton.src = img[myButton.id]['normal'];
                                }
                        }
                }
    </script>

Open in new window

0
 
nathan1038Author Commented:
by golly I think you've done it mate. Thank you so much. Pls join me in the next question in html area, about how I can actually use these buttons.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 6
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now