Css Globe

Delicious | Digg | Stumble | Reddit | Float | 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.

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

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:

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?

Subscribe to our RSS feed or share it with your friends.

Delicious | Digg | Stumble | Reddit | Float | 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?