[javascript]
Disjointed Text Links
This is a tutorial for disjointed text links, i.e.
Text Link 1
which can be applied to any web page. You may require more than one disjointed text link
Text Link 2
on your page.
First, cut and paste the following script in-between the <head> and </head> tags of your page:
Look at the code above. It is a simple rollover javascript which defines a 'CLEAR' image followed by followed by 2 other images [pic1.gif and pic2.gif]. These are the images that show when you run your mouse over the red text. You can have as many images as you wish but they must all have their own number, i.e. - if you wanted to add another image to this list, the list would read like this:
pics[1] = new Image();
pics[1].src = "clear.gif";
pics[2] = new Image();
pics[2].src = "pic1.gif";
pics[3] = new Image();
pics[3].src = "pic2.gif";
pics[4] = new Image();
pics[4].src = "pic3.gif";
where [4] is the new image. Use of these numbers is explained further on.
Let's take it stage by stage. There are certain rules to follow when coding rollovers.
» RULE 1
The first VERY IMPORTANT rule is ALL YOUR IMAGES MUST BE THE SAME SIZE
The way the rollover effect works is that the 'clear.gif' is displayed while the function is not in use. This can be a transparent image or a default graphic, the same size as all the other images, which prevents a blank square with the little red 'x' in the corner, from being displayed. This gif sits in the holder until a mouse is run over the 'text link'. At this point, the holder drops the 'clear.gif' and replaces it with the chosen image for that particular 'text link'.
This is the line of code that positions the holder on the page:
In this case, I have used a transparent image 1 x 1 pixel in size
and resized it here in the code to match the width and height of the images I have used. You will need
to alter these values to suit the images you are going to display. [If you are planning to leave the
popup area 'empty' when the mouseover effect is not in use like this example, a
1 x 1 pixel transparent gif is great because it loads very quickly]
Remember, ALL your images MUST BE THE SAME SIZE or the function
will not display correctly. This line of code should be placed where you want the popup images to appear
on your page. In this instance, I wanted them to appear to the right of my text links and used the align
attribute in my <img> tag to achieve this result.
The next stage is to code for your images to appear when the appropriate text is hovered over with the
mouse. Look at this line of code:
This line is telling the page to change the image in the 'holder' to pic[2] (pic1.gif) when the mouse is placed over the relative 'text link' and back to pic[1] (clear.gif) when the mouse is taken away from the relative 'text link'.
Put this line of code on the page where you want the 'text link' to appear. If you do not wish to link to another page or URL, simply add "javascript:;" to your href which will cause the current page to stay in focus.
For your next link, you use exactly the same code but change the number '2' to the relevant number of the image you wish to display according to your javascript code at the top of the page, i.e. in this instance, '3' will display pic2.gif and '4' will display pic3.gif.
« RULE 2 »
Each image MUST HAVE IT'S OWN UNIQUE NUMBER within the script. If you duplicate a number, you will get a .js error in the bottom left corner of your browser.
You also need to be careful that you assign the correct image number [ i.e. '1', '2' etc.] to each mouseover event in your page or you will get unpredictable results.
In the above examples, I have used CSS to create different text effects. You will probably want to make your 'text links' a different colour or style of font to make them stand out from the page so users know it is an interactive piece of text. Underlining is always good for this as it is universally recognised as a link effect.
This is a simple and easy to apply piece of JavaScript that can create an effective display function on any web page. Interactive sites are popular as it creates something for the viewer to become involved with. If kept clean and simple, functions like this can enhance your site when used appropriately.