Methods

There’s 3 basic ways you can create a rollover effect:

Flash animation

Javascript

CSS

For our purposes we’re going to skip the first two and use strictly CSS and a tad bit of HTML to make it all work. We’re going to be using a sprite in order to accomplish this. If you don’t know what a sprite is it’s basically a single image with all of your different colored effects self contained. The fact we use a single image means that there’s no additional preloading that has to be done which, when using multiple images, can cause a flicker or pause in the initial display of the mouseover event. Here’s an example of a sprite image which consists of two identical designs but with different colored backgrounds:

The goal here is to use this image in a rollover event for a hyperlink.

CSS

Here’s the CSS Code we’ll be working with:

#imageLink
{
  display: block;
  width: 200px;
  height: 40px;
  background: url("compare-sprite.jpg") no-repeat 0 0;

}

#imageLink:hover
{
  background-position: 0 -40px;
}

#imageLink span
{
  display: none;
}

First, keep in mind that we are creating a hyperlink. Therefore we are going to utilize this code when we create our link by assigning the id to the hyperlink like you would a class. We’re going to explain the code just a bit.

• the height and width represent the single button, not the entire image. So, if the entire image is 80px tall and divided perfectly between the two versions then we set our height at 40px.
• On the :hover we want the background position to move down 40px. Therefore we set the position to -40px to make the effect. Same image, just showing a different portion of it.
• The use of the span tag is to complete our hyperlink since the background image isn’t really creating a link. Therefore, something tangible has to be there. But, the trick is, we set the display to none which makes it invisible to the viewer and all they see is the image

The HTML

Here’s the HTML:

Some text here

You can have as many rollovers on one page or throughout your site as you wish using this code. But, you have to copy the code and assign each one its own unique ID. And, of course, their own images if applicable.

/* For PDFs */
a[href $= '.pdf']{
    padding-left:20px;
    background: transparent url(pdf.gif) no-repeat scroll left top;
}

Let’s take a look at this to see how it works:

• The a[href $='.pdf'] aspect is stating that all ‘a href’ tags where the suffix is .pdf to attach the following formatting to it
• The padding-left: 20px; allows for the room needed to place the icon (you can pad left or right depending on where you want the icon displayed)
• The background: tag outlines the parameters for how and where and location of the icon using standard CSS

You’ll notice the $ before the =, this is specifying that we want what is at the end of the href.  There are more tags like this to specify different locations.

• $=   End of String
• ^=   Beginning of String
• ~=  String contains the word and is separated from other words by spaces.
• *=   String contains the word. (doesn’t have to be separated by spaces)

So, armed with this you can make one modification to your CSS file and affect many elements of your pages. Another example of this would be to add an icon to all ‘mailto’ links. Like this:

/* For Emails */
a[href ^= 'mailto']{
    padding-left:20px;
    background: transparent url(mail.gif) no-repeat scroll left top;
}

Here, the ^ symbol means to search for the ‘mailto’ at the beginning of the href string. Then, attach the icon to all the links that qualify only.

Let’s say you want to add an icon to all links that are scheduled to open in a new window:

/* For external links */
a[target = '_blank']{
    padding-left:20px;
    background: transparent url(external.gif) no-repeat scroll left top;
}

Notice that instead of ‘href’ it states ‘target’ which is the method used for determining if a hyperlink is going to open in a new window or in the same window, etc. This CSS command applies just to those hyperlinks that state target=”_blank”.

You can also specify a certain class in the event that you have different styles set up for your various hyperlinks. This method lets you do the following:

/* For popups */
a[class ~= 'popup']{
    padding-left:20px;
    background: transparent url(popup.gif) no-repeat scroll left top;
}

Even if you don’t create different classes for your hyperlinks but would like to have icons next to some of them you can simply assign the class tag to the hyperlink and it will merely add the icon without changing any of the other formatting.

For best results we recommend you use very small icons of 16 x 16 or less. Otherwise they could cause messy looking text lines if your hyperlinks are located within paragraphs.

1. Use the id=”nav” in the <ul> tag
2. Create a <div> wrapper to contain the <ul> and assign the id=”nav’ to the div

Here’s the HTML:

Home
Photos
Videos
Add a Restaurant
Delete a Restaurant
Logout

Notice it’s just a standard HTML unordered list. Nothing fancy nor is it hard to reproduce. The magic occurs in the CSS formatting to give it the look and feel you want.

Here’s the CSS:

Let’s explain this simple code so you understand how these particular selectors change the appearance of the typical list:

1. First the navigation bar is created with #nav, margins and background color
2. Next we have to set the li to list-style: none; to get rid of the bullets
3. At the same time we use display:inline; to force the list items to go horizontal
4. Some padding it also added in order to move the boundaries of the nav bar to equal proportions above and below the text
5. The font family, size, weight, color and style is chosen
6. We add the ‘hover’ effect to the actual hyperlink by having a color change
7. Now we add the ‘hover’ effect to the entire padded link
8. Last we add the ‘hover’ effect to the
9. element itself which produces the downward pointer image

The final output will look like this:

• Horizontal Navlist Demo

ShopperPress Wordpress Plugin

View The Demo

ShopperPress Demo

Example #1 – Using Ajax in the Main Menu

When we say ‘main menu’ we are referring to the main method of navigation for the website. This is usually a horizontal or vertical menu (in this case a vertical unordered list styled with CSS) that is present on every page of the site. This image below illustrates how the site was laid out to accommodate the display of the external content into the container div (click to enlarge):

Ajax menu by SimcoMedia

Example #2 – Using Ajax in a Sub-menu

In this example the site has a main menu horizontally to provide navigation to all the various sections of the site. Within those sections are sub-menus that allow the related content to be displayed via Ajax into a container div located to the right of the sub-menu. This is extremely helpful in keeping the visitor ‘on topic’ while reviewing your site content. The image below illustrates the layout (click to enlarge):

Ajax menu by SimcoMedia

Ajax can be used in a variety of ways to improve the speed and ease of navigation for your website. Overuse of Ajax can be a site killer. For more information on how Ajax could be integrated into your website please contact us.

• Link Title One
  Place some text here describing the hyperlink contents as a summary…
  Date posted or author name
• Link Title Two
  Place some text here describing the hyperlink contents as a summary…
  Date posted or author name
• Link Title Three
  Place some text here describing the hyperlink contents as a summary…
  Date posted or author name

The HTML is pretty straight forward and the heights and widths can be adjusted to whatever you’d like them to be. My example shows the thumbnails at 80 x 87 in order to match the height of the block they represent. There’s no set height for the blocks themselves so you’ll need to judge your thumbnails based upon the amount of text you place into your blocks.

The trick with this is the ‘link’ is the entire block or li tag. Therefore, when you mouse over it, the hover effect covers the entire block

Here’s the HTML:

		
		
		


Link Title One
				Place some text here describing the hyperlink contents as a summary...
				Date posted or author name
Link Title Two
				Place some text here describing the hyperlink contents as a summary...
				Date posted or author name
Link Title Three
				Place some text here describing the hyperlink contents as a summary...
				Date posted or author name

Here’s the CSS from the example:

#links ul {
        list-style-type: none;
        width: 400px;
		float: left;
		margin: 0px;
		padding: 0px;
} 

#links li {
        border: 1px dotted #999;
        border-width: 1px 0;
        margin: 5px 0;
}

#links li a {
        color: #990000;
        display: block;
        font: bold 120% Arial, Helvetica, sans-serif;
        padding: 5px;
        text-decoration: none;
}

 * html #links li a {  /* make hover effect work in IE */
	width: 400px;
	float: left;
}

#links li a:hover {
        background: #FCD5AD
}

#links a em {
        color: #333;
        display: block;
        font: normal 85% Verdana, Helvetica, sans-serif;
        line-height: 125%;
}

#links a span {
        color: #125F15;
        font: normal 70% Verdana, Helvetica, sans-serif;
        line-height: 150%;
}

#linkwrapper {
width: 550px;
border: 0;
}

#linkpics {
width: 80px;
float: left;
padding: 5px;
margin-right: 10px;
}

.linksimage {
float: left;
width: 80px;
margin-bottom: 5px;
border: 1px #CC3300 solid;
padding: 3px;
background: #FF9900;

}

Notice that there’s a div that wraps around the entire set of blocks. This is done so the other two divs will reside side by side when using the float: left; selector on each. The width of the wrapping div needs to be wide enough to accommodate both child divs plus their margins, borders and padding.

Another note, the IE special instruction is there since IE requires that the link itself be the same width of the div. Otherwise it won’t work in IE.

Obviously you can make this example as wide as you need it and add additional li’s to the mix. This type of setup would make a nice navigation system for a product page. You could even use Ajax to load content into another div on the page when these hyperlink blocks are clicked on.

Option #1 – using corner images

This option requires you create the corner images with all four being exactly equal in size and named according to the code sample.

CONTENT Goes In here

And the CSS being:

.roundcont {

width: 250px;

background-color: #f90;

color: #fff;

}

.roundcont p {

margin: 0 10px;

}

.roundtop {

background: url(tr.gif) no-repeat top right;

}

.roundbottom {

background: url(br.gif) no-repeat top right;

}

img.corner {

width: 15px;

height: 15px;

border: none;

display: block !important;

}

Option #2 – fixed width

The other option requires just three images, the top, middle and bottom. This method uses three div’s with the middle one being your content container. Each div has a background which is your top, middle and bottom. The middle div, though, is where your content goes and is expandable vertically depending upon that content. The nice part about this setup is you can style your borders for your box any way you wish and have uneven dimensions on the top or bottom. The center or middle is simply a div with some margins to position your text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus magna, consectetur eu
eleifend sit amet, condimentum ac massa. Maecenas at diam eu est scelerisque facilisis id sit amet
ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Sed vitae risus cursus dui pulvinar rhoncus at et velit. Cras nulla velit, pellentesque ut ultricies
eget, sodales eget arcu. Morbi sed nunc quis urna condimentum imperdiet. Ut nec justo sed ligula
interdum egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Nullam non est vel odio hendrerit dignissim at quis dui. Fusce laoreet erat non urna
lacinia porta. Maecenas ac metus lacus, nec convallis ligula. Cras in eros in felis rutrum varius
vel eu dolor. Nunc lorem erat, adipiscing non aliquam elementum, accumsan sed mi. Mauris urna eros,
suscipit sit amet tristique rhoncus, venenatis a nunc. Cras eget nunc quam, a mattis libero. Etiam
sit amet auctor dolor. Vivamus pretium iaculis justo vitae faucibus. Nulla orci nisi, accumsan sed
semper ac, bibendum id erat.

And, the CSS for this:

#content-top {
background-image: url('images/content-top.png');
background-repeat: no-repeat;
width: 670px;
height: 20px;
float: left;
}
#content {
background-image: url('images/content-bg.png');
background-repeat: repeat-y;
width: 670px;
min-height: 300px;

float: left;
}

#contentcontainer {
width: 650px;
margin-left: 10px;
float: left;
}

#content-bottom {
background-image: url('images/content-bottom.png');
background-repeat: no-repeat;
width: 670px;
height: 20px;
float: left;
}

Option #2 was used in a recent project for the main content area. This content holder was also the target div for the Ajax display of content from page to page. The div expands vertically without breaking in order to allow as much space as needed for the various pages being summoned into the content area.

You can view it at Myers Chiropractic Center

Name


Address


City

And some simple CSS styling that positions the text field labels and styles them at the same time:

label,input {

display: block;

width: 150px;

float: left;

margin-bottom: 10px;

}

label {

text-align: right;

width: 75px;

padding-right: 20px;

font-weight: bold;

color: #999;

}

br {

clear: left;

}

Here is a snapshot of what the form would look like in your browser:

CSS Tableless Form

Check it out – this is standard list display:

1. blah blah
2. blah blah blahhhh
3. blah blah blahhhhhh

Now, with some style use in our CSS we can come up with something like this:

1. blah blah

2. blah blahhh

3. blah blah blahhhhhhhhhh

Here’s the CSS:

ol {

font: italic 1em Georgia, Times, serif;

color: #999999;

}

ol p {

font: normal .8em Arial, Helvetica, sans-serif;

color: #000000;

}

And the HTML:

This is line one


Here is line two


And last line

Position

The position property (as you may have guessed) changes how elements are positioned on your webpage.

position: value;

Values:

• static
• relative
• absolute
• fixed

Now, what does all that mean?

Static

Static positioning is by default the way an element will appear in the normal flow of your (X)HTML file. It is not necessary to declare a position of static. Doing so, is no different than not declaring it at all.

position: static;

Relative

Positioning an element relatively places the element in the normal flow of your (X)HTML file and then offsets it by some amount using the properties left, right, top and bottom. This may cause the element to overlap other elements that are on the page, which of course may be the effect that is required.

position: relative;

Absolute

Positioning an element absolutely, removes the element from the normal flow of your (X)HTML file, and positions it to the top left of its nearest parent element that has a position declared other than static. If no parent element with a position other than static exists then it will be positioned from the top left of the browser window.

position: fixed;

When positioning elements with relative, absolute or fixed values the following properties are used to offset the element:

• top
• left
• right
• bottom

position: absolute; top: 10px; right: 10px;