Simulating an HTML Hyperlink
For Active Client Pages
Forward: In this article I show you how to simulate a hyperlink in a web page using a non-a element.
By: Chrysanthus Date Published: 16 Feb 2013
Introduction
With Active Client Pages and the way in which browsers operate today, sometimes the hyperlink produced is not effective; that is, when you click the hyperlink a new web page does not open. In that case you have to simulate it. You can actually have many simulated hyperlinks in an ACP page. There may be other reasons why you would want to simulate a hyperlink.
In this article I show you how to simulate a hyperlink in a web page using a non-a element. You need basic knowledge in HTML, CSS and ECMAscript in order to understand this.
Use of span Element
The basic syntax for the a-element used to produce a hyperlink is:
<a href="http://www.somesite.com">Link Text</a>
You should be familiar with this already. There are two main things with a hyperlink: When the mouse pointer goes over it, it becomes a hand and the link text is underlined. When it is clicked, it opens a new web page. This new web page is actually downloaded from the server “automatically”.
A very good HTML element to use to simulate the a-element is the span element. In this case you will need CSS to make the span element become a hand and the text underlined, when the mouse pointer goes over it. You then need ECMAScript to open a new web page when the span element is clicked.
The basic span element structure for this is:
<span>Link Text</span>
This is also an inline element like the a-element and if you place it anywhere within text, it would stay there.
Two main features are necessary in this simulation. You need CSS to make the span element appear like a hyperlink and you need ECMAScript to open a new page when the link is clicked.
A link in a web page with a professional look and feel normally has the classes: link, visited, hover and active as illustrated below:
a:link {color:blue; text-decoration: none} /* unvisited links */
a:visited {color:cornflowerblue; text-decoration: underline} /* visited links */
a:hover {color:darkblue; text-decoration: underline} /* user hovers */
a:active {color:blueviolet; text-decoration: underline} /* active links */
With the span element, only the hover class is really applicable. So, in simulating the a-element by the span element, we would have a CSS declaration in the HTML header like:
span:hover {color:blue; text-decoration:underline; cursor:pointer}
This would apply to all span elements. In order to make only the span elements that simulate hyperlinks, we have to place the span elements of interest into a class; something like:
span.simul:hover {color:blue; text-decoration:underline;cursor:pointer}
And a span element to simulate the hyperlink, would become:
<span class="simul">Link Text</span>
In this situation, the class name is “simul”, meaning simulation.
ECMAScript and the span Element
When the span element is clicked, an ECMAScript code is executed, to open the new web page in the same window. The span element has the onlick event. To make the event open the new web page, you just use the following code for the onlick event:
onclick = "window.open('URL', '_self');"
The code is just the ECMAscript DOM window open() method. Type the URL of the page to be opened, in place of URL, in the code. Under this condition, when the span element is clicked, the web page with the URL is opened (downloaded and opened).
The following is a sample web page showing three simulated hyperlinks. Read the code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
<style type="text/css">
span {color:darkblue; text-decoration: none} /* unvisited links */
span.simul:hover {color:blue; text-decoration:underline;cursor:pointer} /* user hovers */
</style>
</head>
<body>
<span class="simul" onclick = "window.open('newPage1.htm', '_self');">Link Text1</span><br>
<span class="simul" onclick = "window.open('newPage2.htm', '_self');">Link Text2</span><br>
<span class="simul" onclick = "window.open('newPage3.htm', '_self');">Link Text3</span><br>
<br>
<span>Some text, some text</span><br>
<span>Some text, some text</span><br>
<span>Some text, some text</span><br>
</body>
<html>
The first three span elements are simulated hyperlinks. The next three are ordinary span elements. To try the code, you need to create three other HTML files called, newPage1.htm, newPage2.htm, and newPage3.htm . You place the sample page and the three files in the same directory.
Summary
To simulate a hyperlink, use the span element; use CSS to make the span element appear like a hyperlink; use ECMAScript DOM window open() method for the onclick event of the span element.
Browsers
The above code sample works with Mozilla Firefox and Opera browsers. With Internet Explorer 6 it is the onclick event that works; CSS as coded above does not work. I cannot tell if the CSS, as coded above works with the higher versions of Internet explorer. Test the code with other browsers that I have not mentioned here, to see how the code operates.
That is what I have prepared for you on Simulating an HTML Hyperlink.
Chrys
Related Articles
Simulating an HTML HyperlinkRedirecting with HTML and ECMAScript
Page Views with Ajax and PHP and MySQL
Image and Text as same Hyperlink
Major in Website Design
Web Development Course