What this session is about

On this page you should (hopefully)...

• More Links
• Combating Spam-bots
• Rollover

Expanding upon Links

Assuming that you've read Season 1 - Linking you know how to create links already. Here we will also look at making links for email addresses, links to other websites and also opening links in new windows.

Email Links

It's a lot easier than you might fear. A normal link will have the "href" attribute which contains the link to another page such as "../season2/more.php". If you were to write a link as shown below, it would not be a true email link.
The correct method is to put "mailto:" before the email address inside the href attribute.

Which will then result in this.

Linking to other sites

The href attribute normally holds a reference or a pointer to a file on your site. This pointer starts at your current location and shows a path to the file. It is called "relative". However, if you want to link to another site, you cannot use a "relative" link, you must use an "absolute" link. This means that the link will remain the same regardless of which file you are in.

Absolute links are quite easy to do, you simply enter the entire URL. For instance, to create an absolute link to this page you would type the following.
You can use absolute links to link to the site you are currently on, it's absolute and thus works from any page on any site.

Combating Spammers

We've almost certainly all had it, some email telling us how we can enlarge certain parts of our body, how we can make vast sums of money or get free software. There's also a good chance that you have at one time been told that putting your email address on the internet is a bad idea!

So why then am I so happy to put my email address on these web pages? I've not tried writing it in some clever way such as "sarkalian [at] gmail.com" which allows you to see what it is but apparently prevents spam-bots from reading it. Spam bots do not read the web page as you are now (unless you're using view source or a source browser such as lynx). When they see my email address they do not see sarkalain@gmail.com, they see this


It is normally one long line but I added in some line returns to prevent it looking too crazy. Last lesson we looked at Character Entities such as & (written as &). Normally the character entity has a name such as "amp". However, each character also has a number which can be written in the form of {.

If you write an email address using this method then the spam-bot is less likely to be able to read it correctly as it will probably not have been designed to decode the sequence while all browsers for the past 5 or so years have.

That looks like a lot of work

Now, working out which number refers to which digit isn't easy, it helps to know what "ascii" is but quite frankly, it's boring when compared with web design. A much easier method is to use a table lookup that I've helpfully made or easier still, just use the automatic converter I wrote in my spare time. Both are located on the Character Cheat Sheet.

Rollover

Originally I planned to explain Image maps. Of course, doing them by hand is near impossible, even when you know the exact pixel locations you want. I got very confused and decided that cool rollovers would be a far far better idea.

To make a rollover you will need a few things.

• A normal image
• An image to show when the mouse moves over the image
• If you want to be really cool, an image to shown when the mouse is clicked

The code for a rollover is actually rather easy. It's result it sitting to the right (and probably up a bit). It's hopefully obvious what the different bits do but on the offchance that you're drunk, like reading what I write or need a reason to avoid planning your final year project (that'd be me) I will explain.

The attribute onmouseover changes the src attribute of the image when the mouse is moved over it. The onmouseout changes the src of the image when the mouse moves out of the image. Finally, the onmousedown changes the src of the image when the mouse is clicked on the image.

Javascript

All 3 of those attributes use what is called Javascript which is turned off by some users so not all users will benefit from this, in addition, you are now loading 2 or 3 times as many images (once loaded they stay loaded) and so that can increase page load times.

Of course, the page doesn't actually auto-load the image itself so you have to come up with some ingenious ploy of your own to trick it into auto-loading. I've googled and found lots of javascript things to do it but quite frankly, they're all a little complicated. Thus I came up with my own idea (though it's quite possible someone came up with it first, I've just never seen it before).

At the bottom of all my pages with rollovers I have a set of lines that look like the following. These images have their height and width attribute set to 1 and so are near invisible. In addition, as they are at the very end of the page, they are the last things to be loaded and so allow the user to view the page's content right away. Should the user move their mouse over the rollover before it loads then there will still be a slight pause as the image is loaded but there's not much you can do about that without using Javascript and getting all complicated.