How to Hyperlink From a Dynamic Anchor Tag in CSS

Hyperlinks on a Web page may not be relevant to all users at all times. You don't have to update your HTML code every time you need to add or remove anchor tags that define your links. You can make them appear and disappear as needed using CSS. Cascading style sheets not only allow you to set the visibility properties of your hyperlinks, but enable you to move links to new locations on a page as well.

Instructions

1. Open an HTML Web page document and locate the document's body section. Paste the following HTML code anywhere within that section:

   <a href="http://www.nasa.gov">Insert Link Text Here</a>
   <a href="http://www.nasa.gov">Insert Link Text Here</a>
   </div>

   <input type="button" value="Show Dynamic Hyperlinks" onclick="return manageLinks('dynamicLinks1', '200', '100', 'show')" />
   <input type="button" value="Hide Dynamic Hyperlinks" onclick="return manageLinks('dynamicLinks1', '200', '100', 'hide')" />

   This code creates a div container that holds two anchor tags. The links that these tags create point to the NASA website. Change the URLs in these anchor tags to other values if you like. The div references a CSS class named "hidden." That class keeps the anchor tags hidden until you need to display them. The first button below the div calls a JavaScript function when clicked. That button's onclick event passes the div's id to that function along with the desired X and Y screen coordinate locations for the anchor tags. The button event also passes the word "show" as a parameter. This parameter tells the function to display the dynamic links at the location specified. The second button calls the same function and passes the word "hide" to the function. This button hides the links.

2. <div id="dynamicLinks1" class="hidden">

   Move to the top of the document and locate its head section. Paste the code shown below inside that section:

   <style type="text/css">
   .hidden {display:none;}
   </style>

   This class hides the dynamic links in the div container.

3. Add the following JavaScript function below the code listed in the previous step:

   function manageLinks(divContainer, xLocation, yLocation, actionToTake) {

   var divObject = document.getElementById(divContainer);

   if (actionToTake == "show") {

   divObject.style.position = "absolute";
   divObject.style.left = xLocation;
   divObject.style.top = yLocation;
   divObject.style.display = "block";
   }

   else {
   divObject.style.display = "none";
   }
   }

   This code obtains a reference to the div you pass it and sets its position attribute to "absolute." A value of "absolute" allows you to move the div to different locations on the Web page. The two statements after that statement set the container's left and top attributes to the values passed by the button clicks. The left and top properties represent the distance in pixels that an object resides from the top left corner of a Web page. The "divObject.style.display" statements set the container's display value to "block" or "div" depending on the value passed to the function. The container appears when the display value is "block." It disappears when the value is "none."

4. Save your document and launch your Web browser. Open the page and view the two buttons that appear. Click "Show Dynamic Links." The links will appear at the screen coordinates specified in the code. Click "Hide Dynamic Links" to make them go away.

Tips & Warnings

• When the hyperinks are visible, site visitors can click them and navigate to other websites as they normally do with regular links. Add as many hyperlinks as you like to the div container. It will expand as you add more links.

References

• W3schools: HTML DOM Style Position Property

Resources

• Web Design Group: Guide to Cascading Style Sheets