This article is an extension / improvement upon another article I published on my site previously: Simple Javascript for Image Mouseovers. As I am always looking for improved methods, I was discussing the pitfalls of the javascript method with a friend (and occasional comment writer / contributor to my site) who pointed me in the direction of CSS and image sprites. This lead me to research the topic further, and I found two articles in particular which were incredibly useful:

Read on…

As you can see from the above title this plugin allows you to embed any font you want, using any colour scheme you choose. Boom!

This is a screengrab from the WP Flash Titles Options page in WordPress, where you are able to select the font, colour, mouseover / hover colour, background colour, font-size, width and height for your Flash Titles.

Back to WP Flash Titles post

This is a simple javascript for creating a mouseover effect on image links, also known as an image replacement script. It works in two stages. In this example "image 1" is the link image and "image 2" is the mouseover image.

Stage 1

Add this javascript to the head of your page:

function SwapImage1() {
document.image1.src="/images/image2.jpg"
}
 
function SwapImage1Back() {
document.image1.src="/img/image1.jpg"
}

Stage 2

Add the following onmouseover and onmouseout properties to your image:

<img src="/images/image1.jpg"
onmouseout="SwapImage1Back()" onmouseover="SwapImage1()" name="image1" />

This site, built for photographer Neil Stewart, is the first site 76 Creative have launched this year. Built with PHP, it features categorized thumbnail galleries, the usual biog, links and contact information, and also a moving image section with an embedded Flash Video (flv). All of the navigation for the site is done using images to create the hand written look that we were going for, it uses a javascript to give the mouseover effect for the images. For me, this is one of the best designed sites I have worked on so far, as it has a distinctive style, yet it's simple and functional.

Check it out: www.photoneil.com