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.

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.

Enjoyed the article?

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

Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe

Comments (52 Comments)

1. Lim Chee Aun
   January 24, 2008

   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.

2. Jermayn Parker
   January 24, 2008

   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!

3. Jermayn Parker
   January 24, 2008

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

4. cssglobe
   January 24, 2008

   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!

5. TrevorGerzen
   January 24, 2008

   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

6. Abraham Estrada
   January 25, 2008

   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.

7. andiszek
   January 25, 2008

   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,

8. cssglobe
   January 25, 2008

   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.

9. An Jay
   January 25, 2008

   wow...thats great. Good work!

10. andiszek
    January 25, 2008

    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

11. cssglobe
    January 25, 2008

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

12. andiszek
    January 25, 2008

    thanks, i have seen your comment after i posted. thanks for the tip:)

13. Peter
    January 26, 2008

    Could you please explain how I can make this work in a WP blog ( preferably through integration in a JS lib like LightBox ) ?

14. capz
    January 26, 2008

    How to make this script work with http://www.digitalia.be/software/slimbox ?

15. Ep
    January 26, 2008

    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.

16. Trainingstagebuch
    January 26, 2008

    Thank you for this great article! Greetings Nils

17. BillyG
    January 26, 2008

    I don't save most of your articles because they showcase JavaScript techniques, even though you are supposedly all about CSS.

18. cssglobe
    January 26, 2008

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

19. Ozh
    January 26, 2008

    This is very neat. The world now just needs a jQueryfication of this to get a sub 1kb file :)

20. cssglobe
    January 26, 2008

    jquery this jquery that, I'll stop writing scripts :) LOL this was an experiment gone useful... hope you enjoy it :)

21. Marko
    January 27, 2008

    Well done, I think I'll use this trick on a upcomming project tnx. btw.Dugg

22. Sauravh
    January 28, 2008

    nice idea i will sure use this thing in my designs

23. Tartak WWW
    January 28, 2008

    Good article about Advances CSS!

24. Kurzmelder
    January 28, 2008

    Very light weight and elegant solution! Thx for sharing the result of your experiment!

25. MrBelm
    January 30, 2008

    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?

26. cssglobe
    January 30, 2008

    MrBelm, try to add position:relative; to #presslist li

27. MrBelm
    January 30, 2008

    That worked. Thanks!

28. rasc
    January 31, 2008

    There should be a "focus" state for keyboard users (tabbing without the mouse). Then this would be more accessible. Nice work.

29. Steph
    January 31, 2008

    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!

30. tetblue
    February 14, 2008

    This is a jolly good script. Thanks!

31. adrian
    February 18, 2008

    Bine de stiut!

32. jf
    February 27, 2008

    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.

33. Süleyman Sönmez
    March 7, 2008

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

34. Ayush
    April 4, 2008

    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.

35. coco
    April 11, 2008

    Thanks bud, just what I was looking for great script!

36. MyDesign.com.ar
    May 6, 2008

    Its good thanks

37. moyo
    May 22, 2008

    that's exactly what i'm looking for! thanx alot

38. Manel
    June 4, 2008

    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

39. Dinesh Kumar
    July 16, 2008

    Hi, The image style information is really great and i think to apply to my site images at http://www.globalcomrades.com/links.htm

40. Smithveg
    July 24, 2008

    Good POST!!! Thank for Sharing.

41. Anthony
    July 24, 2008

    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.

42. zel
    August 4, 2008

    hi! this doesn't work with images inside a table. how can we fix this?

43. Timo
    August 13, 2008

    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

44. Risket
    September 4, 2008

    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

45. Blackwings
    September 11, 2008

    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.

46. fabio
    October 8, 2008

    Put "Relative" instead "Static" in line 42; this will make it work inside tables; it works for me at least ;-)

47. Anders
    October 15, 2008

    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?

48. Lars
    December 21, 2008

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

49. hakan
    December 28, 2008

    thanks

50. Matías
    April 17, 2009

    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

51. Burt Abreu
    May 27, 2009

    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.

52. ANTHONY
    June 29, 2009

    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, the comment form is closed at this time.