Mouse-over Effects Text based buttons
Mouse-over Effects: Text based buttons. The purpose of this pamphlet is to give you a simple and quick example that illustrates the use of text based mouse-over effects in your web pages. To do this, we are going to show two simple examples of a text based button. This button will change colors when you hover your mouse over it and will return to its original color when you move your mouse away from the button. The button will also change colors when you click on it. To achieve this effect we will use HTML, JavaScript and CSS. If you are not familiar with these, don't worry. This will be a very simple example. You will only need to use a text editor like notepad or gedit and a modern browser that has JavaScript enabled. Lets start with the HTML part. Open your favorite text editor and type in the following: <html> <head> <title>example of a Text Button</title> </head> <body> </html> </body> Save your document as button.html and then use your browser to open it. You should see a blank page with Example of a Text Button at the top. Go back to your editor and type the following after the <title> tags.
<title>example of a Text Button</title> <style type="text/css">.normalbutton { </style> </title> This will establish the initial look of our button using a CSS class that we called normalbutton. In our HTML we can apply this class to a <span> tag to create the look of our text. Between your body tags type the span tags and text shown below: <body> <span id='mybutton1' class='normalbutton'>go to McNeal Data</span> </body> After you finish typing the text above, save the file again. If you were to refresh your browser you would probably see something like this:
Now we have a nice text based button but if you were to click on it, nothing would happen. Thats because we have not entered any JavaScript behind the code. To invoke JavaScript we are going to user script tags after the style tags. We will only need a single function to achieve a mouse-over effect. <script type= text/javascript > function changebuttoncolor(buttonname, buttoncolor, backgroundcolor) { var thebutton = document.getelementbyid(buttonname); thebutton.style.backgroundcolor = backgroundcolor; thebutton.style.color = buttoncolor; </script> This function will allow us to pass the name of the button, the color we want the button to be and its background color to a couple of commands within the function. These commands will change the style of the button to reflect the new colors we want it to be. The first line of the function... var thebutton = document.getelementbyid(buttonname); initializes a variable called thebutton. This variable will hold the location of the object we want to change. In this case an object can be just about any HTML object on the web page, but in our case it is going to be our <span> tag. We get the reference to the object by using the document.getelementbyid command. If you remember our span tag we gave it a name of mybutton1. <span id='mybutton1' class='normalbutton'>go to McNeal Data</span> We will pass this name to the function so it will know that this is what we want to change colors. So the span id and the buttonname will point to each other. var thebutton = document.getelementbyid('mybutton1'); <span id='mybutton1'... The other two commands will change the foreground color...
thebutton.style.color = buttoncolor; and the background color... thebutton.style.backgroundcolor = backgroundcolor; depending on what you assign buttoncolor and backgroundcolor variables to be. Now you will notice that when you type this formula in your code and refresh your browser, nothing happens when you click on the button. That is because we have not put in a trigger that tells the browser to execute the function. The triggers that we will use in this example are the onmouseover, onmouseout and onmousedown events. To use them we have to add them to the span. Lets start by adding the onmouseover event to our span. We are going to add the following to our span... onmouseover= changebuttoncolor('mybutton1', 'blue', 'white') So our span will now look like this... <span id='mybutton1' class='normalbutton' onmouseover= changebuttoncolor('mybutton1', 'blue', 'white') >Go to McNeal Data</span> If you were to refresh your browser at this point and hover your mouse cursor over it you would see the that the button now has a white background and the text has turned blue.
If you move your mouse cursor away from the button it stays the same color. To make it return to its original color we need to use the onmouseout event. We can now add the following to our span... onmouseout = changebuttoncolor('mybutton1', 'black', 'silver') Our span code will now look like this... <span id='mybutton1' class='normalbutton' onmouseover="changebuttoncolor('mybutton1','blue','white')" onmouseout="changebuttoncolor('mybutton1','black','silver')"> Go to McNeal Data </span> To make the button actually do some work we need to tell our web page to do something when the mouse button is pressed. We can use the onmousedown event to to this. We will need a new function to define what kind of work we want performed. In this case we will use the window.location command to tell the browser to go to the McNeal Data home page. After the changebuttoncolor function we will add a new function called gotomainsite(). function gotomainsite() { window.location= http://www.mcnealdata.com ; Then in our span we will add the onmousedown event like this... onmousedown = gotomainsite() So the whole span will look like this... <span id='mybutton1' class='normalbutton' onmouseover="changebuttoncolor('mybutton1','blue','white')" onmouseout="changebuttoncolor('mybutton1','black','silver')" onmousedown="gotomainsite()"> Go to McNeal Data </span> Now when you click the button it will go to the McNeal Data site. The whole web page source code should look like the listing shown below:
<html> <head> <title>example of a Text Button</title> <style type="text/css">.normalbutton { </style> <script type="text/javascript"> function changebuttoncolor(buttonname, buttoncolor, backgroundcolor) { var thebutton = document.getelementbyid(buttonname); thebutton.style.backgroundcolor = backgroundcolor; thebutton.style.color = buttoncolor; function gotomainsite() { window.location="http://www.mcnealdata.com"; </script> </head> <body> <span id='mybutton1' class='normalbutton' onmouseover="changebuttoncolor('mybutton1','blue','white')" onmouseout="changebuttoncolor('mybutton1','black','silver')" onmousedown="gotomainsite()"> Go to McNeal Data </span> </body> </html> You can also just use just CSS to produce this effect. Again you would start out by creating a blank HTML file in your favorite text editor this time called button2.html <html> <head> <title>example of a Text Button using CSS only</title> </head> <body> </body> </html> Our CSS will take advantage of the four possible states of a hyperlink tag: link, visited, hover and active. In the link state the hyperlink text has not been used. The visited state is the look of the hyperlink after is has been used. The hover state is what the hyperlink text looks like when the mouse
cursor is hovering over it. The active state can be used to change the appearance of the hyperlink when it is clicked. After the title tags add your script tags and the associated text as shown below: <style type="text/css">.button a:link {.button a:visited {.button a:hover { color:blue; background-color:white;.button a:active { </style> Next enter the following between the body tags: <div class="button"> <a href="http://www.mcnealdata.com">go to McNeal Data</a> </div> The whole web page should look like the following:
<html> <head> <style type="text/css">.button a:link {.button a:visited {.button a:hover { color:blue; background-color:white;.button a:active { </style> </head> <body> <div class="button"> <a href="http://www.mcnealdata.com">go to McNeal Data</a> </div> </body> </html> Save your file and then open it in your favorite browser. You should see a page like this:
If you hover your mouse over the button, it should change colors and if you click on it, it will take you to the McNeal Data web site. You can download this from the McNeal Data website at http://www.mcnealdata.com. You can also view a video tutorial there as well. Feel free to play with this code and use different colors in for your buttons or to add more buttons if you like.