Solved

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

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

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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
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 add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

743 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now