 |
|
 |
Advanced Web Page Linking
Here we are going to discuss more advanced web page linking techniques that you can use to:
Before proceeding you should be familiar with creating basic links as discussed in web page links. Open linked pages in another WindowNormally when you click a link on a web page the page you are currently reading is replaced by the new page. If the visitor want to return to the original page he has to use the browser back button. This type of linking is standard for internal links (links on the same site). When linking to other web sites it is common to open the new page in a different window. The visitor then has two pages open, the original and the new page. This link open in another window.
You should notice that the anchor attribute is modified by the target="_blank" property which causes the web page to open a new window. A modification of this is to open a named target. This link will open a new window called data. Here is the HTML, notice the use of the target attribute.
Although you probably wont notice a difference there is one. If you repeatedly click the second example it will constantly refresh the same window. However in the first example, clicking the link 10 times will open 10 new windows. Hiding Affiliate LinksIf you are a member of an affiliate programs you will need to provide links to your affiliate merchant. When a user hovers over the link the link will appear in the bottom left of the browser window with the link details. These details will include you affiliate id unless you hide it. Although it can lead to people stealing you affiliate commissions the main reason to hide it is that some visitors wont click a link with affiliate code in them, probably because they don't look quite right as they can in many circumstances be very long. To illustrate the purpose just move your mouse over the links below and notice what is displayed in the bottom left corner of your browser.
This is accomplished by using the onmouseover command. The HTML for the first example is what we normally see:
The HTML for the second example has the onmouseover code inserted.
Onmouseover is in fact an event which is called when you place your mouse over the link. This calls a script, in this case the job of the script is to display the text "super affiliate handbook". Do you need to understand this to use it. NO! just create the link as normal with your web page editor, and then switch to HTML mode so that you can edit the link, then copy the onmouseover code highlighted above, after the opening anchor tag (<a). Finally edit the text (Super Affiliate Handbook) to read what you want. I use notepad for this. I have a note pad file that contains the code like this:
And I simply edit It as necessary, and copy it as described above. Displaying a Message When the Visitor Hovers Over a LinkHere we will look at displaying a screen tip when the visitor hovers over a hyperlink. Here are the links just place the mouse over the to see if anything is displayed.
Here is the html/xhtml
The code that generates the screen hint is highlighted in green and it is the title attribute. The title attribute can be placed anywhere within the opening <a> tag. Changing the Link Colour When the Visitor Hovers Over a LinkHere we are going to look at changing the link colour when the visitor hovers over the link. To see what it looks like just place your mouse over this test link. The background effect is created using CSS. The paragraph containing the links is give a class name --here I used simply test, and at the top of the page I declared the hyperlinks for that class. Here is the class definition.
Usually you would place this class definition in an external style sheet. This is used frequently today for constructing website navigational menus. See starting cascading style sheets for more details.
Related Articles and Resources:
|
|||||||||||
|
|
