How to Code Rollover Buttons With VBScript
Image rollovers, or mouse-overs, are a set of buttons often situated on websites scripted from HTML JavaScript and HTML VBScript. The buttons often appear depressed when a mouse cursor is moved over them, and appear to pop up when the cursor is moved aside. VBScript or Visual Basic Script allows you to code the rollover buttons much like you would with JavaScript. To use it, you must define it in your HTML body.
Other People Are Reading
Instructions
-
-
1
Open Notepad in your computer.
-
2
Type <HTML> to start your HTML code. Begin a new code on a new line to ensure organized visual presentation of your codes. To ensure this, press the “tab” key on you keyboard to shift to a new line.
-
-
3
Type the code "<HEAD>" on a new line to open your head section.
-
4
Press the “tab” button on your keyboard to proceed to a new line, and type the code <TITLE> to give your work a title.
-
5
Type the title of your page. For instance, type “Practicing Rollover Buttons” as your title. Move to a new line and type the code </TITLE> to end your heading section. Your title section should be something like this: "<TITLE> Practicing Rollover Buttons </TITLE>."
-
6
Type the code <BODY > on a new line to start your HTML body.
-
7
Define your VBScript code block by typing the code: <script language="VBScript" type="text/VBScript">
-
8
Type a code to display writing on the screen. For instance, use the code: document.write (“My first mouseover buttons.”)
-
9
Type the heading code <H3> to display your heading. Type your heading below the code and close the heading code. For instance, type the code:
<H3> Rollover buttons in VBScript</H3><HR> -
10
Create the image rollovers. The rollovers are executed by creating two images for the same button. Type the code:
<a href="index.html"
onmouseover="buttondown('homebutton')"
onmouseout="buttonup('homebutton')">The first is what you want showed when the cursor is not hovering over the button, and the second is what you want displayed when the mouse does hover over the button. The mouseover effect is created by VBScrpit that's added to the affected link. Note that the <a … > tag has attributes such as “onMouseOver” and “onMouseOut.” The “onMouseOver” summons the rollover function to set the image for when the image is out, while the “n MouseOut” summons the rollout, which sets the image for when the mouse is moved from the button.
-
11
Type the code:
<img src="homebutton.gif" name="homebutton" border="0" />
</a>The code <IMG SRC="..."> sets the image to be displayed when the mouse is pulled over or away from the button. It also has an extra attribute known as NAME="home".
The code: "homebutton.gif" name="homebutton" border="0" assigns a unique name to your rollover button -- hence the VBScript will apply the unique name to summon the image and alter its properties when the mouse is moved over or away from the button.
-
12
Follow the <IMG ...> tag with a short VBScript. For example, type the code:
<SCRIPT TYPE="text/VBSscript">
<!-- setrollover("../graphics/home_over.gif");
//--> -
13
Type the code </SCRIPT> to close the script. Close the body tag by typing the code </BODY>. Type the code </HTML> to end your HTML document.
-
14
Click “File” and “Save as” to save your work. Ensure you save your file as HTML type by entering .HTML at the end of your file name. For instance, type VBScriptRollovers.html.
-
15
Go to your hard drive to locate your saved Web page. Double-click on the file name and allow it to open in your Web browser.
-
1
