Style Your Image Links

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

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:

<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.
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:

<script type="text/javascript" src="imagelink/imagelink.js"></script>

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.

About the author:

cssglobe's image Designer, developer and a passionate standardista. Long time web professional with huge experience in all types of front-end work. Founder of Css Globe and creator of Easy front-end framework.
To get in touch, visit Alen's personal page, follow Alen on Twitter or become a Facebook friend.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

Comments

Lim Chee Aun on 24 Jan, 2008 wrote:

I see. The script absolute-positions the span on top of the image, so I doubt this will work for liquid designs where the images may 'move'. It will also break when resizing text, which also make the images 'move' away from its initial position.
Jermayn Parker on 24 Jan, 2008 wrote:

I like the look of this...

Wat I really like is how it does it automatically, so there is no need for extra script on the content writer!
Jermayn Parker on 24 Jan, 2008 wrote:

@Lim - You are correct on both accounts. I tried the same html code but changed the width to a liquid and it broke when changed the layout size manually, also broke when resize text in FF and when viewed in IE7 it completely did not work.

Which is a pity as its a nice feature and looks good.
cssglobe on 24 Jan, 2008 wrote:

Thanks guys for pointing out those errors. I've added on resize event to the script and I am working on on text resize as well, so it'll be up soon. Thanks!
TrevorGerzen on 24 Jan, 2008 wrote:

I like the idea of this and would love to see your jquery version of this. It's pretty light weight already but I wonder if you can break it down any more
Abraham Estrada on 25 Jan, 2008 wrote:

I second Trevor Gerzen's request. Tomorrow I will try to implement the idea in jQuery and the make it a plugin. I didn't work before creating plugins so this could be a very nice excersice.
andiszek on 25 Jan, 2008 wrote:

great idea, but smth is not working right in IE6, if i place the images into a container that is floated AND has margins applied.
example: the container has a top&left margin of 44px and floats left
http://www.accende.net/imagelink/
in IE6 the icons don`t center anymore on the image, but seem to ignore the positioning of the images in the container.
if i eliminate the float of the container, all seems to be OK.

images are usually placed in a floated DIV, so this could be a real problem :(.
hope you can find a fix for it:)

and if the container has a float,
cssglobe on 25 Jan, 2008 wrote:

Try switching to relative position for your anchors - line 32, change to a[i].style.position = "relative";
Relative position on my demo pages didn't work in IE6, but it should be used on more "complex" designs.
An Jay on 25 Jan, 2008 wrote:

wow...thats great. Good work!
andiszek on 25 Jan, 2008 wrote:

me again:P
ok, found some workaround for this:
let`s say you have a big DIV that`s floated.

wrap the images into another DIV inside the big floated DIV. give this image-wrapping DIV a "position: relative;" and it`ll fix the IE6 bug.
see here an example:
http://www.accende.net/imagelink/index2.html

also, IE6 again: the icons take some time to load, it must be the IE background flicker bug.
i`ve added the fix for it (a JS in the HEAD) and the icons appear instantly now in IE6.
see the flicker problem and solution:
http://www.mister-pixel.com/#Content__state=whats_the_problem

cheers
cssglobe on 25 Jan, 2008 wrote:

@andiszek: you don't have to add another element.. you can simply add position:relative to that div you are already using (#aaa)...
Apparently, IE6 is having troubles when you don't provide a solid starting point... that would be a parent block level element with position:relative. I should have thought of that actually, and I will definitely have to create a fix.
andiszek on 25 Jan, 2008 wrote:

thanks, i have seen your comment after i posted. thanks for the tip:)
Peter on 26 Jan, 2008 wrote:

Could you please explain how I can make this work in a WP blog ( preferably through integration in a JS lib like LightBox ) ?
capz on 26 Jan, 2008 wrote:

How to make this script work with http://www.digitalia.be/software/slimbox ?
Ep on 26 Jan, 2008 wrote:

This is great. You should make a note in the actual post about the position: relative; thing. I almost tossed this (because it didn't work in IE6/7) until I read that part.
Trainingstagebuch on 26 Jan, 2008 wrote:

Thank you for this great article!

Greetings
Nils
BillyG on 26 Jan, 2008 wrote:

I don't save most of your articles because they showcase JavaScript techniques, even though you are supposedly all about CSS.
cssglobe on 26 Jan, 2008 wrote:

BillyG, this is a web standards magazine... Common misconception is Web Standards = CSS. Styling with css is only one part of the building your site according to standards. Most important part is actually the markup and everything else is something that you have to build on top of it. JavaScript is also one tool that you can use in standards compliant way and I am showcasing what I think is proper usage of JavaScript.
I am a front end specialist, designer, coder whatever, and these articles are just ideas that pop to my head every now and then. There will be css related articles, not to worry :)
Hey, you gave me a topic for another article...
Ozh on 26 Jan, 2008 wrote:

This is very neat. The world now just needs a jQueryfication of this to get a sub 1kb file :)
cssglobe on 26 Jan, 2008 wrote:

jquery this jquery that, I'll stop writing scripts :) LOL
this was an experiment gone useful... hope you enjoy it :)
Marko on 27 Jan, 2008 wrote:

Well done, I think I'll use this trick on a upcomming project tnx. btw.Dugg
Sauravh on 28 Jan, 2008 wrote:

nice idea i will sure use this thing in my designs
Tartak WWW on 28 Jan, 2008 wrote:

Good article about Advances CSS!
Kurzmelder on 28 Jan, 2008 wrote:

Very light weight and elegant solution! Thx for sharing the result of your experiment!
MrBelm on 30 Jan, 2008 wrote:

Have a look at this page:
http://www.omgirl.com/test/press2007.htm

It works in every browser except IE 7, where the highlight displays over the first image, no matter what image is moused over. Any suggestions for a fix?
cssglobe on 30 Jan, 2008 wrote:

MrBelm, try to add position:relative; to #presslist li
MrBelm on 30 Jan, 2008 wrote:

That worked. Thanks!
rasc on 31 Jan, 2008 wrote:

There should be a "focus" state for keyboard users (tabbing without the mouse). Then this would be more accessible.
Nice work.
Steph on 31 Jan, 2008 wrote:

Ooo interesting. You know I thought of this, but never carried it out - so I think I'm going to have to try it :) Thanks a lot!
tetblue on 14 Feb, 2008 wrote:

This is a jolly good script. Thanks!
adrian on 18 Feb, 2008 wrote:

Bine de stiut!
jf on 27 Feb, 2008 wrote:

1. Yot could use a png instead of the opacity css to make it valid. (and a special css for ie < 7 - a gif instead)

2. #mysite img { position: realtive; } is nice
(body id=mysite")

3. There is a Javascript bug, too.
The Script causes some promplems in combination with the Lightbox-Script in Opera 9.25.
Süleyman Sönmez on 7 Mar, 2008 wrote:

Thank you Alen, I used this script on my educational game website, "Whose hand is this?" URL: http://www.whosehandisthis.com/

Really good solution :)
Ayush on 4 Apr, 2008 wrote:

Hi,
I am Ayush Mathur. I got stuck in my code. My application allows users to create softkeys which are reflected on an IP phone image. But, if a user creates more than 5 softkeys, the code should create a "more" softkey and place it in place of 5th softkey. The next set of softkeys, starting from 5th one, should be displayed on clicking "more" button. And this should repeat until all softkeys are displayed. From last screen, if the user presses more key, screen should be transferred to first set of softkeys.
Can anyone please help me as I have already wasted many days in this task.
coco on 11 Apr, 2008 wrote:

Thanks bud, just what I was looking for great script!
MyDesign.com.ar on 6 May, 2008 wrote:

Its good thanks
moyo on 22 May, 2008 wrote:

that's exactly what i'm looking for! thanx alot
Manel on 4 Jun, 2008 wrote:

Hello, I`m trying to insert this script in my page, but in can´t do it. I think that i follow all steps. I´m trying it in

http://www.vibeimpressio.com/workinprogress/pruebalinks.htm

the script appears in the blue button "Impresion digital" somebody can help me please
Dinesh Kumar on 16 Jul, 2008 wrote:

Hi,

The image style information is really great and i think to apply to my site images at http://www.globalcomrades.com/links.htm
Smithveg on 24 Jul, 2008 wrote:

Good POST!!! Thank for Sharing.
Anthony on 24 Jul, 2008 wrote:

Hey, is there a way to edit this code so it works on every kind of image EXCEPT one class? I have multiple kinds and classes of images on my site, and I like the overlay to be on all of them except for one certain kind of image.
zel on 4 Aug, 2008 wrote:

hi! this doesn't work with images inside a table. how can we fix this?
Timo on 13 Aug, 2008 wrote:

Hello Alen,
I really like your script. That's what I was searching for for a long time.
Now I got a little problem which I can't solve for myself.
I got a wordpress-blog up and running where I want to use your script. So far no problem, it's running.

But I want to make the script work for two classes only: size-medium and size-thumbnail
My css is set up with the class imageOver; I also wrote that to the vars defaultClass and overClass. It's only working with an empty var imageClass. When I enter the classes I want ImageLink only to appear at, it won't work anymore. If I only enter one class in the var imageClass it doesnt't work, too.

Any hints for getting this working for me?

Cheers from Germany,
Timo
Risket on 4 Sep, 2008 wrote:

This would be awesome if it worked with images that were inside a table that was inside another table.

I wanted to use it for my web site but since I use tables all of the "zoom" images appear in the upper left corner of the entire page, nowhere near the actual image it's supposed to be over.

Anyone know how to fix this?

Email me at:
Chris@PaperBulletClothing.com
Blackwings on 11 Sep, 2008 wrote:

I can get the script to show my 'play' button on my images that are used to trigger my mediabox videos just fine - but the videos no longer play. Instead they trigger a download of the *.flv file. Without the script in place they play fine, any advice?

The page in question is http://gamezig.com/game-trailers-and-videos

Currently the script is not active.
fabio on 8 Oct, 2008 wrote:

Put "Relative" instead "Static" in line 42; this will make it work inside tables; it works for me at least ;-)
Anders on 15 Oct, 2008 wrote:

I use a title tag on my images. The title tag is dead in the Mac browsers. If I remove the image link class the title tag works again. Any solution for this?
Lars on 21 Dec, 2008 wrote:

I found a little bug/problem using this script.

It works perfectly in Chrome, but IE and FF keeps giving me problems.

Most of the time they work, but sometimes the overlay is not centeret probely.

myass.dk/details.php?image_id=3

It's a design i'm making for a friend for his small gallery site.

I know it's not the best coding, hope someone knows a little fix or could tell me where the problem is :)
hakan on 28 Dec, 2008 wrote:

thanks
Matías on 17 Apr, 2009 wrote:

Im trying to make a image navigation bar, seems this still wont work, Im new at this but i cant find any good websites to help me do this. if you can help me please add nirvanauy@hotmail.com on MSN messenger, thanks
Burt Abreu on 27 May, 2009 wrote:

Hi. Love your site and have used snippets on my personal site and will be using the scroller on a new site design for the place (you can see wip http://www.abrusa.com/go/index.cfm/login/employment-center/job-openings/ ).

I'd like to request something for a future article if it appeals to you.

I would like to see a popup overlay that loaded (once per user) when a specific page is opened. I will be adding a page where users responding to an ad can find advertised jobs rather than dig through the whole list. I would like to put a small form there to "mind telling us what ad brought you here" so they can check and then dismiss the box automatically when a selection is made. I can build a standard form in Sava which they can launch with a link but I think a mini form, that auto pops up and is easily dismissed, would be more likely to get some data.

I'll probably make a standard form for now but figured I'd suggest it. If it ever ends up on your site I'll upgrade. :)

Thanks for your excellent site.
ANTHONY on 29 Jun, 2009 wrote:

I was suggested by my friend to book air tickets from Beijing to Shanghai through http://www.bamboobookings.com. I found it very helpful, because the prices they offered are much lower than other websites.

Sorry, further comments are disabled for this post.

Need help with your website?
Hire a CSS/JavaScript expert!

Hey, you are not logged in!
Apply for a membership or login here.

Want to join?

If you wish to contribute with your own articles, updates or gallery entries you can apply for a membership and even become our editor.

Apply here

Become a friend

Css Globe