posted on:January 23, 2008
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…
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?
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.
So, Image Link script basically takes your markup that should look like this:
<a href="/somelink"><img src="image.jpg" alt="My Image" /></a>
turns it into this:
<a href="/somelink"><img src="image.jpg" alt="My Image" /><span></span></a>
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.
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
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:
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.
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.
Enjoyed the article?
Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.
Comments (52 Comments)
Sorry, the comment form is closed at this time.