This was another one of ‘want it now()’ things. A simple way to display notes over images when you roll your mouse over the image – you got it right! Flickr has that…
There are a couple of similar javascript solutions out there but I wanted something using jQuery and simple. Well using jQuery and simple in same sentence is kind of redundant but if you see the plugin code you will realize what I mean.
Take a look at the demo
Usage:
#1 The plugin expects the notes data to be in in json fomat. To quote from the example
- notes = [{"x1":"10","y1":"10","height":"150","width":"50","note":"This is note one"}, {"x1":"25","y1":"25","height":"70","width":"80","note":"<strong>This</strong> is a new note This is another note This is a new note"}];
To quickly go over the properties
x1 – The X co-ordinate of the top-left corner of the note area
y1 – The Y co-ordinate of the top-left corner of the note area
height -
width – self explanatory
note – The text of the note, it can have html but I recommend you keep it simple.
x1 and y1 are relative the position of the image on which the notes will be displayed, so when you move the image around in your page the the notes will move with it.
#2 The javascript code to initialize the notes
- $(window).load(function () {
- $('#id_of_image').imgNotes(); //If your notes data is is not named notes pass it
- });
The zip file has an example
Download : here
Known issues: Internet Explorer has a buggy behavior while displaying the text of notes, any one having a solution please post a comment. – Fixed
IE needs some kind of background for this hover-thing. you could add a transparent gif or png as background-image to .note.
this should work.
besides that, great work!
Thanks Torsten, your solution seems to work, have updated the zip
very good
great work!
Bugreport + Bugfix:
when multiple notes overlap – some note is displayed behind the noteborder of another notearea:
fix:
jquery.imgnotes-0.1.js
line 42
from: $(this).css(“z-index”, 10000);
to: $(this).next(‘.notep’).css(“z-index”, 10000);
and
line 47
from:$(this).css(“z-index”, 0);
to: $(this).next(‘.notep’).css(“z-index”, 0);
@poidi Thanks a lot for the report and more importantly for the fix
Will include it in the download.
Hey Tarique,
awesome work! Thanks for sharing!
What about an improvement, with a button that allows you to select an area and create a new note? I was looking all over the web for a jquery script like that and thats the only thing thats missing in your script!
Greets
Marco
cool tip. I will try to use it.
Hey,
I’m having trouble reading the post data when submitting, how do I fetch it?
Tnx,
Jasper
Hi Tarique,
Wonderful script. There’s a small problem. I don’t know if you realize if one note is big enough to cover all the others, these smaller notes will not be accessible (when hovered you can only see the content of the big note that covers everything)
fyi, on resize of the window the notes move from their previous place.. not sure if you meant that or not..
It’s very good.
I like this.
Thanks for share.
And I wrote something to introduce this project for my readers.
You can find the post about this in my website.
If something is wrong,pls figure it out.thanks.
Hi, first of all GREAT WORK!!!
I would like to know something though… I downloaded this source code and am in the process of modifying to better suite my needs.
I need show the notes that have been tagged to this image at the bottom, and when the user hovers over a given tag, i want the square of that particular tag to be appear.
Could let me know where I should edit in order to make this possible?
This is a very simple plugin. Your best bet is to write a separate plugin to take the data and create necessary links, feel free to copy the code which shows and hides the notes from my plugin.
Hi, first of all thanks for the reply.
I actually got the data to appear at the bottom in the form of links. Now my problem is getting the relevant square to appear on the image when I hover over link.
What is the function that I should pass the x1 y1 width and height values in order for the square to appear?
Well, first you will need all the notes (which are actually divs) to have unique IDs, once that is done then the hover of the links below the picture will need to call the show and hide function with that unique ID being passed, of course then you will have to modify the show and hide to use the ID passed but that is very simple. Do release the plugin modifications once you are done
Right! thanks for the feedback! And definitely will do
hi,
Thanks for this script, it works wonderful! but i want to fixed the size of selection box, could you please direct me that how i make this change.
No doubt its good feature but my requirement is for fixed size.
Thanks
The img notes script is just for displaying the notes – if you are referring to the demo then that uses another script from another author – see the source….