Hi Does this work like Facebook's photo tagging where you can tag
people?
Do you think I could adapt it to tag with a Mootips description?
Can I store the co-ordinates of the tag in my database and use it to
generate the divs?
Thanks,
On Sep 4, 3:15 am, Idan <[EMAIL PROTECTED]> wrote:
> Well, i've made really, really simpleimagetaggingfor mootools 1.2
> you dont need anything but the core for that. and the styling really
> stupid
> I just wanted to release it to you, if you have something to do with
> that.
>
> If you have a bug, or any request, please post here. but i'm not sure
> i'll keep maintaining this
>
> Again, really stupid lib
>
> HOW TO USE: ..
> change: /javascript/util/imagetagging.js - to the JS
> change: 'profile_picture' - to the ID of the picture you want to
> attach to
>
> you can attach any picture you like, and as much pictures you like as
> long as it has a div or some parent.
> /*
> <style>
> legend
> {
> color: #ffffff;
> font-weight: bold;
> }
>
> .active_class
> {
> border: 2px solid #157DEC;
> }
>
> .deactive_class
> {
> border: 2px dotted silver;
> }
> </style>
>
> <div>
> <img src='exmaple.jpg' id='profile_picture' />
> </div>
>
> <script src="/javascript/util/imagetagging.js" type="text/
> javascript"></script>
> <script>var it = new imagetagging('active_class', 'deactive_class');
> it.attach('profile_picture')</script>
> */
>
> var imagetagging = new Class(
> {
> Implements: Events,
>
> active_class: null,
> deactive_class: null,
> image: null,
>
> tags: null,
>
> initialize: function(active_class, deactive_class)
> {
> this.active_class = active_class;
> this.deactive_class = deactive_class;
>
> this.tags = new Array();
> },
>
> attach: function(image_id)
> {
> var self = this;
> this.image= $(image_id);
>
> this.image.setStyle('cursor', 'pointer');
> this.image.addEvent('click', function(event)
> {
> self.create_input(event.page.x, event.page.y);
> });
>
> return true;
> },
>
> create_remove: function(index)
> {
> var self = this;
>
> return new Element('center').adopt(
> new Element('div', {'styles': { 'padding-top': '30px'
> }}).adopt(
> new Element('a', {
> 'styles':
> {
> 'color': '#ffffff',
> 'border-bottom': '1px dotted
> #ffffff'
> },
>
> 'href': 'javascript:void(0)',
> 'events':
> {
> 'click': function(event)
> {
> self.remove(index);
>
> event.stopPropagation();
> }
> }
> }).set('text', 'Remove Tag')
> )
> );
> },
>
> create_input: function(x, y)
> {
> var self = this;
>
> var input = new Element('input',
> {
> 'size': 10,
> 'styles':
> {
> 'border': '1px solid silver'
> }
> });
>
> var button = new Element('input',
> {
> 'type': 'submit',
> 'value': 'Tag!',
> 'events':
> {
> 'click': function()
> {
> var tag_name =
> input.getProperty('value');
> self.tag(x, y, tag_name);
>
> this.getParent().dispose();
> }
> }
> });
>
> var element = new Element('div',
> {
> 'styles':
> {
> 'position': 'absolute',
> 'top': y,
> 'left': x
> }
> }).adopt(input, button);
>
> this.image.getParent().adopt(element);
> input.focus();
> },
>
> tag: function(x, y, tag_name)
> {
> var self = this;
>
> var index = this.tags.length;
> var element = new Element('fieldset',
> {
> 'styles':
> {
> 'position': 'absolute',
> 'top': y - 50,
> 'left': x - 50,
> 'width': '100px',
> 'height': '100px'
> },
>
> 'events':
> {
> 'mouseover': function() { self.active(index);
> },
> 'mouseout': function() {
> self.deactive(index); }
> }
> });
>
> if (!tag_name)
> tag_name = "Someone";
>
> var remove = this.create_remove(index);
>
> element.store('tag_remove', remove);
> element.store('tag_x', x);
> element.store('tag_y', y);
> element.store('tag_name', tag_name);
>
> element.adopt(new Element('legend').set('text', tag_name));
> element.adopt(remove);
>
> this.image.getParent().adopt(element);
> this.tags.push(element);
>
> this.fireEvent('tagged', [x, y, tag_name]);
>
> return true;
> },
>
> remove: function(index)
> {
> if (this.tags.length > index)
> {
> var element = this.tags[index];
>
> this.fireEvent('untagged', [element.retrieve('tag_x'),
> element.retrieve('tag_y'), element.retrieve('tag_name')]);
>
> element.dispose();
>
> return true;
> } else
> return false;
> },
>
> active: function(index)
> {
> if (this.tags.length > index)
> {
> var element = this.tags[index];
> element.setProperty('class', this.active_class);
> //element.retrieve('tag_remove').setStyle('display',
> '');
>
> return true;
> } else
> return false;
> },
>
> deactive: function(index)
> {
> if (this.tags.length > index)
> {
> var element = this.tags[index];
> element.setProperty('class', this.deactive_class);
> //element.retrieve('tag_remove').setStyle('display',
> 'none');
>
> return true;
> } else
> return false;
> }
>
> });
