Solved

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

Posted on 2008-10-05
12
153 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
links not working 2 32
Use Mid in Html 6 33
Html using "Or" in condition 3 38
aria difference 2 22
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

738 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