HTML+CSS+JavaScript

Народ! Может кто встречал? Наверняка же есть какой нить скрипт, который можно под себя сделать?

Задача просто как в знаменитых Яндекс.Фотки, Вконтакте и т.п. отмечать людей на фото с помощью DOM и AJAX. Чтобы было удобно можно указать объект на фото и нажав "сохранить" без перезагрузок передать координаты "отметки" на сервер.

Возьмите и вытащите js код с этих проектов и посмотрите как там и что делается на клиенте.
А уж передать готовые координаты на сервер и сохранить фигня.

Таким образом и навык быстрее повысится.

Пробовал)) не особо получается понять скажем структуру данныхз посылаемых на сервер вконтакте... В яндекс.фотках вообще ступр. Да и воровство же, а ресурс у меня не маленький, нафига мне проблемы?

Если 1 в 1 стырите - то воровство.
Если сделаете на основе, то вдохновение :)

А вам надо на чистом js или jquery сойдёт?
В JQuery есть отличный плагин выделения областей на фотографиях.
Я на основе него как-то делал систему он-лайн редактирования фоток (обрезание, там, ресайз и т.д.)
Наверное можно его применить, если сделать возможность добавления неограниченного количество областей выделения.

На Jquery... А енто что ? Очередной аналог prototype? Мне не важно как! Главное кросбраузерно и функционально. Чтобы фотоальбом был удобен моим пользователям :)

Если поделитесь буду признателен)) Упомню в списке помогавших когда либо (на сайте) :)))

Вот сюда сходите http://odyniec.net/projects/imgareaselect/ , посмотрите пример. Там легко определяются координаты прямоугольной области. Их и надо отправлять на сервер. А дальше уже сами сможете, я думаю, доделать под свои нужды.

Спасибо огромное! Это то что мы тупые php программеры искали))) определитель координат :))))))))

Возник попутный вопрос...

Я получил координаты. Занёс в бд. Могу вывести как угодно соответственно.

Кароче, как сделать эту штуку что ты наводишь мышкой на фото (или на ник в списке отмеченных) и на фотке выделяется ранее выделенная область и подписывает кто это!

можно использовать map

Мап не катит.
Йа говорю про div при наведении на который появляется рамка, как и отмечали, и внизу рамочки Ник отмеченного.

Или тут тоже нужен МАП? Желательно просто кроссбразерную реализацию :)

ну можно просто выводит div с z-index выше чем у фотки. Тогда он поверх окажется. И абсолютно его позиционировать параметрами top и left.
А ещё лучше фотку в бекграунд засунуть. Тогда никакие слои не понадобятся.

у меня фотка лежит в коде так:

<tr><td><img src="xxx"></td></tr>

То есть засунуть в бэк ничто не мешает!
Тока опять же как? И желательно пример в студию, отвык я от HTML и т.п.

Нашел тут нечто на JQuery...

http://www.sanisoft.com/downloads/imgnotes-0.1/example.html


Вот кстати умные люди скажите что делать из-за разных скриптов на js у меня на сайте 4 библиотеки framework'a: JsHttpRequest, mootools, prototype, JQuery... Потому что нужные скрипты в разных библиотеках - это плоха?

Я в CSS тоже приличный ламер, но наверное сделал бы так:

<style>   .container{background:url('/path/to/pic.jpg');height:100;width:100;vertical-align:top;}/*height:100;width:100; - подставить реальные размеры фотки*/   .box{position:relative;width:50;height:50;left:10;top:10;border:0.1em solid #000;} /*здесь координаты области*/ </style> <table border="1">   <tr>     <td class="container">       <div class="box">&nbsp;</div>     </td>   </tr> </table>

> JsHttpRequest, mootools, prototype, JQuery...
JsHttpRequest можно смело сносить. Аякс гораздо проще с помощью JQuery делается.
И желательно всё-таки остановится на одной библиотеке, хотя совмещение, конечно и не возбраняется.

хм... я вчера надумал снести все ибо нашел все нужное в jQuery, но оставить JsHttpRequest

потому что доков по ajax с jQuery не найдено.... желательно на русишь))) и не терять совместимость с серверной частью jshttprequest.php
у меня много аякса и менять все скрипты не хочеться...

http://visualjquery.com/1.1.2.html -> ajax

$.get(url, params, callback) - передает запрос GET
$.post(url, params, callback) - передает запрос POST

нужно еще что-то?

Доков по jquery дофига. Просто они в разных местах. И их приходится коллекционировать :)
Для затравки:
http://www.webreview.org.ua/?id=3&action=article_detail&ar_id=17
http://www.noupe.com/tutorial/51-best-of-jquery-tutorials-and-examples.html

ну и хабра, куда без неё :) Удобный список плагинов для рускоязычной аудитории.
http://habrahabr.ru/blog/webdev/47620.html#habracut

JQuery хорош своим весом. Там, в отличии от прототайпа, всё в ядро не напихано. Но некоторые вещи в прототайпе реализованы интереснее и лучше (очень нравились в своё время скрипты aculo.us)

А аякс на JQuery действительно очень просто реализуется. Буквально в одну строчку.

Спасибо! Полезное ссылочки.
Тока вот не понял а с серверной то стороны что? jshttprequest оставлять или json реализовывать? (хотя это почти одно и тоже).
И всё равно без реальйных примеров работы пока недопонял работу frontend'a ... ну да ладно пойму уж наверно :)

jsgttprequest как раз и занимается преобразованием результата в JSON :)
C Jquery можно использовать соответствующее php расширение, а можно стырить ровно одну функцию из того же jshttprequest. И получится маленький симпатичный бакенд.
Он в аттаче. Выдернул как есть из рабочего проекта.
Использовать так:

<script>   function getSomething(){      $.getJSON('backend.php',               {q:'world'},               function(data){                  alert(data.var1)               });   } </script>

файл backend.php:

<? $result = array('var1'=>'hello ','var2'=>'val2'); $result['var1'] .= $_REQUEST['q']; require_once "jquery.helper.php"; $jqHelper =  new jquery_helper(); echo $jqHelper->json($result); ?>

Спасибо огромное! Вы мне очень очень помогли, сегодня система уже запущена и атарва довольных пользователей в аську пишет благодарности ;))))))

Вот и отлично.
Ведь главное, для нас, разработчиков, что? Правильно, довольные пользователи :)

я честно говоря тоже не знаю, как доставать относительные координаты. Можно попробовать через ифрейм.
Наверняка кто-нибудь знает на этом форуме