Style Your Image Links

Mouse over behaviors have a certain significance when we're talking about usability. Letting users know that particular section of our website is meant to be clicked on is best achieved through mouse over effect. Those "clickable" sections certainly include content images. But what can you do with image mouseovers? Add a different border? This script will certainly help you to do a bit more than that...

Take a look at the Demo | Download Image Link

What is it?

Image Link is a script that enables you to apply additional styling to your image links. It has two states: default and mouseover states, so you can use it i.e.on your gallery thumbnails to display a little zoom icon when thumbnail is rolled over or to place a "click here" message at the bottom of your image...

Why is this script different (better) than similar scripts?

This is totally unobtrusive piece of JavaScript. It doesn't demand any interventions in html except for class naming of particular images that you wish to style. If you want to use the same style for all of your image links you don't even have to assign classes. The script will automatically apply styles to all images inside anchor tags.

How does it work?

Script goes through the source code and locates images inside anchor tags - image links. It creates a span element that is placed above the image. Script then assigns css class to that span based on your preferences.

image link scheme

So, Image Link script basically takes your markup that should look like this:

My Image

turns it into this:

My Image

and gives you an "image cover" to work with and style it as you wish.

Parameters and variations

There are 2 variations of this script to suit your preferences. One is single style variation and other is multistyle.
Single style is easier to set up and perfect for those who wants one style throughout the site. It has 3 variables that you can configure in the config section of the JavaScript file:
imageClass - a string that you use to provide a class name for the images you want to get "styled". If you want Image Link script applied to all images inside anchors, leave this string blank.
defaultClass - a string that you use to provide a class name that defines how image covering span is styled by default
overClass - a string that you use to provide a class name that defines how image covering span is styled when rolled over

Multistyle version of the Image Link looks a bit more complicated but it gives you a possibility to use multiple styles on different images. Config section consists of JavaScript array where each item is an array of 3 subitems. Those 3 subitems are exaclty the same ones as in single style version: a image css class (used to locate the image), default css class for image covering span and css class used for image covering span when rolled over.

How to apply it to your own site?

Download the zip containing sample files, unpack and place folders in the root of your site and insert this line of code to your head tag:

In your css file you should create styles that you will use with Image Link script. Create your own or use some of the styles from the demo, it's up to you. Just make sure that you insert correct css class names in the config section of the JavaScript file.

For advanced developers, this can be a starting point with many possibilities. Some of them will be explained in another article when I release Image Link v2.0 so stay tuned.

Note

For best results in all browsers, you should set position:relative on containing element. So, if you have text with images placed inside a div id=content, put position:relative to that div.