Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2008-10-05
12
Medium Priority
?
157 Views
Last Modified: 2011-10-19
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
Comment
Question by:nathan1038
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
12 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 22645054
>>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
 

Author Comment

by:nathan1038
ID: 22645192
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
 
LVL 82

Expert Comment

by:hielo
ID: 22645272
>>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.

 

Author Comment

by:nathan1038
ID: 22645302
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
 

Author Comment

by:nathan1038
ID: 22645304
sorry about taking so long with those pics mate.
0
 

Author Comment

by:nathan1038
ID: 22645328
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
 
LVL 82

Expert Comment

by:hielo
ID: 22645380
>>"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
 

Author Comment

by:nathan1038
ID: 22645399
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
 
LVL 82

Expert Comment

by:hielo
ID: 22645429
>>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
 
LVL 82

Expert Comment

by:hielo
ID: 22645442
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
 
LVL 82

Accepted Solution

by:
hielo earned 2000 total points
ID: 22645443
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
 

Author Comment

by:nathan1038
ID: 22645696
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

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question