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.
Lim Chee Aun 24 Jan, 2008
Jermayn Parker 24 Jan, 2008
Wat I really like is how it does it automatically, so there is no need for extra script on the content writer!
Jermayn Parker 24 Jan, 2008
Which is a pity as its a nice feature and looks good.
cssglobe 24 Jan, 2008
TrevorGerzen 24 Jan, 2008
Abraham Estrada 25 Jan, 2008
andiszek 25 Jan, 2008
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 25 Jan, 2008
Relative position on my demo pages didn't work in IE6, but it should be used on more "complex" designs.
An Jay 25 Jan, 2008
andiszek 25 Jan, 2008
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 25 Jan, 2008
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 25 Jan, 2008
Peter 26 Jan, 2008
capz 26 Jan, 2008
Ep 26 Jan, 2008
Trainingstagebuch 26 Jan, 2008
Greetings
Nils
BillyG 26 Jan, 2008
cssglobe 26 Jan, 2008
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 26 Jan, 2008
cssglobe 26 Jan, 2008
this was an experiment gone useful... hope you enjoy it :)
Marko 27 Jan, 2008
Sauravh 28 Jan, 2008
Tartak WWW 28 Jan, 2008
Kurzmelder 28 Jan, 2008
MrBelm 30 Jan, 2008
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 30 Jan, 2008
MrBelm 30 Jan, 2008
rasc 31 Jan, 2008
Nice work.
Steph 31 Jan, 2008
tetblue 14 Feb, 2008
adrian 18 Feb, 2008
jf 27 Feb, 2008
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 7 Mar, 2008
Really good solution :)
Ayush 4 Apr, 2008
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 11 Apr, 2008
MyDesign.com.ar 6 May, 2008
moyo 22 May, 2008
Manel 4 Jun, 2008
http://www.vibeimpressio.com/workinprogress/pruebalinks.htm
the script appears in the blue button "Impresion digital" somebody can help me please
Dinesh Kumar 16 Jul, 2008
The image style information is really great and i think to apply to my site images at http://www.globalcomrades.com/links.htm
Smithveg 24 Jul, 2008
Anthony 24 Jul, 2008
zel 4 Aug, 2008
Timo 13 Aug, 2008
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 4 Sep, 2008
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 11 Sep, 2008
The page in question is http://gamezig.com/game-trailers-and-videos
Currently the script is not active.
fabio 8 Oct, 2008
Anders 15 Oct, 2008
Lars 21 Dec, 2008
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 28 Dec, 2008
Matías 17 Apr, 2009
Burt Abreu 27 May, 2009
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 29 Jun, 2009