You can use an image to create a vertical or horizontal line
in a web page. Create a 2 pixel by 2 pixel image in the color of your choice.
This single image can be used to create a vertical or horizontal line on your
web page simply by changing the HEIGHT and WIDTH attributes within your image
tag.
When designing a web page, you can use an image background
that will remain stationary even when scrolling through the page -- only the
text will move. Add background="yourimage.gif" bgproperties="fixed" within your
BODY tag. Try to select an image that won't make your text difficult to read.
Highlight the Background of Text:
<span style="background-color:ffffcc;">Wow, that's yellow!</span>
Align Images to Absolute Vertical Center of Text:
<img src="image.gif" align="absmiddle">
Highlight Background Color of Links (embed in head
tag):
<STYLE TYPE="text/css">a:hover{background-color:red;}</STYLE>
Timed redirect to another page automatically:
<META HTTP-EQUIV="refresh" CONTENT="10; URL=http://www.yoursite/newpage.htm">
Display messages in browser status bar on link
hover:
<a href="index.htm" OnMouseOver="self.status='Go to my homepage!';
return true" onmouseout="self.status=''; return true">Visit this page.</a>
Adding a Title attribute to your links creates a
mini-popup description:
<A HREF="http://www.bravenet.com" TITLE="Cool Website Tools!">Text</a>
Make a sound on mouseover.
A script that would generate a sound on when a visitor mouses over a link or
other object on the webpage:
Place this code between your <head> tags of your html page:
Place this code where you want it to appear on the page:
Once you have the code placed on your page, you can mouse
over the link and see (well, hear it) in action.
If you are not hearing a sound, be sure that you have placed your sound file
online, and are pointing to it in the script.
Table Magic
On the subject of Style Sheets and dynamic color changes,
here is a way to make entire table cells change on mouseover and mouseout.
First, let's create some global definitions for our tables, so here is a style
sheet that defines the text color and background color for each cell.
<style>
td
{
font-family: verdana,arial,sans-serif;
font-size:12pt;
font-weight:bold;
background-color: C9C9C9;
}
</style>
Now, within the table itself, we can define the mouse activity like this:
<TABLE bgcolor="#cc0000" cellpadding="1" cellspacing="1" border="0">
<TR>
<TD width="100" onmouseover="this.style.backgroundColor='#FFFF00';" onmouseout="this.style.backgroundColor='#C9C9C9'">
<a href="http://www.bravenet.com"><FONT COLOR="#000000">Bravenet.com</FONT></a>
</TD>
</TR>
<TR>
<TD width="100" onmouseover="this.style.backgroundColor='#FFFF00';" onmouseout="this.style.backgroundColor='#C9C9C9'">
<a href="http://www.freeguestbooks.com"><FONT COLOR="#000000">FreeGuestbooks.com</FONT></a>
</TD>
</TR>
</TABLE>
Note that we have coded the onmouseout value to the original background color
(C9C9C9) that we scripted in the stylesheet. This of course could be different,
but what this does is set a bgcolor value, change it on mouse hover, then return
to our original color. Note also we set a background color for the table
(CC0000), which, because we are defining the cell color, acts as a dark red
border around our cell. As always, play around with these parameters to get the
effect which best suits your site. You can also combine this with the Rollover
styles shown in the first section of this newsletter for some really wacky and
fun color changes!
Image Maps
Image maps are one of the most-used and least-understood
display functions used in Web development. Although they have been around for
ages, very few people understand the concept and the creation of image maps. In
short, image maps are navigation tools that allow hyperlinking from within an
image environment. A good example is actually a map, where you could click a
city to take you to a page about that city. Here's how it works. The image is
really a coordinate of cells, with a block of cells designated to hyperlink to a
particular page. To create an image map, your best bet is to get an image map
editor, but you can code them by hand. Here's how:
br> <IMG SRC="theimage.gif" WIDTH=400 HEIGHT=50 ALT="" BORDER="0" usemap="#theimage">
<map name="theimage">
<area shape="rect" coords="1,1,100,50" href="page1.htm">
<area shape="rect" coords="101,1,200,50" href="page2.htm">
<area shape="rect" coords="201,1,300,50" href="page3.htm">
<area shape="rect" coords="301,1,400,50" href="mailto:you@yourserver.com">
</map>
The above code cuts up the image into 4 pieces for different links. The "coords"
are the pixels of the image (the cells) X-start, Y-start, X-end, Y-end So our
first link starts at pixel 1 width and 1 height and ends at 100 width and 50
height. (Remember width starts at left and height at top.)
More magic with style sheets
The old way of attributing properties to text was with font
tags.
<font face="Arial,sans-serif" size="4">some text</font>
With the introduction of Cascading Style Sheets, this process becomes far
easier.
You can simplify and speed up your coding with css by joining several properties
together at one time. An example of this would be
<span style="font: italic bolder 12px arial,sans-serif;">some text</span>
With this, all the text contained within the <span> tags will share the
properties as they are listed.
<span style="font:
italic bolder 12px arial,sans-serif;">Note that the order that the properties
are listed is critical.</span>
A little table magic
Using the same principles, tables can be designed with
properties assigned with the use of css as well.
table {border-style:solid;
border-color:red;
border-width:3px;
background-color:lightgreen;}
td {padding-right:20px;
padding-left:20px;}
