Solved

Help with html menu (getting the buttons to link )

Posted on 2008-10-05
2
139 Views
Last Modified: 2012-05-05
I am using a program called multimedia builder, which can have Browser objects (browser windows)
as part of the design. The particular app i am working on has 2 browser objects, one for the menu buttons
and the other, larger one for the html pages.

Inside multimedia builder, I would use the following code for a menu button to get it to link to page2.html

<li><a href="scriptcode1:Browser(&quot;Browser&quot;,&quot;<SrcDir>\page1.html&quot;)">page 1</a>

Browser being the name of the browser object.

What I need to do is incorporate that command into the script you see below (on the down command)
(so all i really want is, code for when the mouse is pressed down, execute the line of code you
see above. keep in mind that button23 is just 4 images, so not sure if the >page 1</a> is needed.
<!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.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>
 

</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
Comment
Question by:nathan1038
2 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 22647924
Try this:

<a href="scriptcode1:Browser(&quot;Browser&quot;,&quot;<SrcDir>\page1.html&quot;)"><img id="Button1" class="inputImage" src="button22-up.jpg" onmouseover="doRollOver(this);" onmouseout="doRollOut(this);" onmouseup="doClick(this);" onmousedown="doClick(this, true);" ondragstart="return false" onselectstart="return false"></a>
 

or
 
 

<form action="#" onSubmit="scriptcode1:Browser(&quot;Browser&quot;,&quot;<SrcDir>\page1.html&quot;); return false">

 

or 

 

<form method="get" action="scriptcode1:Browser(&quot;Browser&quot;,&quot;<SrcDir>\page1.html&quot;)">

Open in new window

0
 

Author Comment

by:nathan1038
ID: 22648328
HA HAAAAA, that first example did it. FANTASSSSSTIC. Thank you so much for taking the time to write that for me.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Find out what you should include to make the best professional email signature for your organization.
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…
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)

895 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

15 Experts available now in Live!

Get 1:1 Help Now