Quick Tricks
OK, so you're too lazy to read all those manuals. You just want to know how to do those neat tricks you've seen on other web sites. Well, here are a few to get you going. No expanded explanations, just the code.
Text Decoration: None
To remove the traditional underline (text decoration) from text links on a web page, simply copy and paste the code below into the <head> section of your HTML file.
<style>
a{text-decoration:none;}
</style>
You can also add a hover effect to the link in order to differentiate it from other text. The code below removes the underline and changes the colour of the link when the mouse moves over it. Paste the code to the <head> section of your HTML file and then change the Hex colour value to suit. The colour used here (#FF0000) is red.
<style>
a{text-decoration:none;}
a:hover {color:#FF0000;}
</style>
For more detail on this technique, take a look at the excellent Site Navigation with CSS tutorial at one of the best web resource sites around, sitepoint.com.
New Window
If you want to load a file into a new browser window, just add the target="_blank" parameter to the anchor tag as in the example below.
<a href="filename.html" target="_blank">Link Text</a>
Smart New Window
Create new browser windows to your own specifications. Copy and paste the following code to the <head> section of your HTML file. Use the width and height attributes to specify the window size in pixels.
<script>
function newWindow(htmlfile) {
htmlWindow = window.open(htmlfile, 'newWin', 'width=500,height=350,toolbar=no,scrollbars=no')
htmlWindow.focus()
}
</script>
Now, create a link using the following syntax:
<a href="javascript:newWindow('filename.html')">Link Text</a>
All you need to do is replace filename.html with the name of the file you're linking to and add some appropriate link text or use an image.
See the wonderful Resize a Popup to fit an Image's Size tutorial at sitepoint.com for a more complex but elegant solution to creating different sized windows automatically.
|
