How to Dynamically Change the Size of Hyperlinks in VB
- 1). Launch Microsoft Visual Studio 2010, and open your VB.NET project.
- 2). Find the project's startup form in the Solution Explorer, and click that form to select it. Visual Studio displays the form's HTML code in the code window.
- 3). Click the "Design" button at the bottom of Visual Studio to view the form's design window.
- 4). Click the "View" button at the top of Visual Studio, and click "Toolbox."
- 5). Drag a "Hyperlink" control and a "Button" control from the "Toolbox" onto the form.
- 6). Click the "Source" button at the bottom of "Visual Studio" to display the form's HTML code window again. Locate the following code within that window:
<asp:Button runat="server" Text="Button" />
This code creates the button you added. Delete that code and replace it with the code shown below:
<asp:Button runat="server" Text="Change HyperLink Size"
OnClientClick="return changeHyperlink('8px')" />
Note the "OnClientClick" attribute. It defines a JavaScript function named "changeHyperLink." It also passes the value "8px" to that function. When a user clicks this button, the function runs and changes the hyperlink's font size to 8 pixels. - 7). Add the following code to the form's "<head>" section:
<script type="text/javascript" language="javascript">
function changeHyperlink(newSize) {
var linkCollection = document.getElementsByTagName("a");
for (var i = 0; i < linkCollection.length; i++) {
var currentLink = linkCollection[i];
currentLink.style.fontSize = newSize;
return false;
}}
</script>
This is the "changeHyperLInk" function described in the previous step. It uses the "getElementsByTagName" method to retrieve a collection of all hyperlinks on the page. The function loops through those elements and changes each one's "fontSize" property to the value passed by the button click. The final statement, "return false" prevents the browser from sending a "postback" to the Web server. This is important to stop a refreshed page from overlaying your font size change and returning the hyperlinks to their normal size. - 8). Press "F5." Visual Studio runs the project and displays the form in your browser. A hyperlink and the button appear.
- 9). Click the button. The JavaScript function runs and changes the hyperlink's size to the value you set in the code.