Solved

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

Posted on 2008-10-05
12
152 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 500 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
multiple selects 23 62
Search Item in Table 2 43
Mobile apps - web/native or hybrid? 1 65
CSS Scroll Center with Static Side. Like EE does. 2 28
This article discusses four methods for overlaying images in a container on a web page
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

740 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