HTML+CSS+JavaScript

Доброго времени суток.
Я создаю , с помощью библиотеки Raphael прямоугольники при нажатии на картинку "image".
как мне определить, по какому прямоугольнику я делаю клик?(тоесть,как обращатся к каждому прямоугольнику отдельно?). Код находится в вложеном файле.

с помощью функции Select(), я вызиваю alert на клик по элементу, но вызивается только последний alert. Что тогда мне делать?
[JS]var Select = function () {

for (x in array) {
joptarray.push(shapes[x]);
//if (shapeLength == i) {
if (shapes[x]) {
shapes[x].click(function () {
selected = shapes[x];
if (selected == shapes[x]) {
alert("shape" + x);
//shapes[1].attr({ stroke: "#2C81C2", "stroke-width": 2 });
};
});
};

};
};[/JS]

Не знаю библиотеки Raphael, но вот навешивать на каждый элемент обработчик вряд ли разумно.
Представьте, что у вас есть таблица 50х50 ячеек и нужно обрабатывать выбор каждой ячейки. Можно поступить так - прописать для каждой ячейки onclick="func()", и при динамическом добавлении новых ячеек не забывать добавлять обработку этого события им. Такой подход расточителен и не оправдан.
А можно поступить следующим образом - добавить всего один обработчик события onclick, и добавить его родителю, элементу table. В данном обработчике потребуется проверить источник события, и если это ячейка, выполнить необходимое. При этом заботиться об обработчике для вновь добавляемых ячеек в таблицу нет необходимости.

у меня создается только один див "element" и на нем все рисуется. Как тогда поступить в случае с родителями:

var div = document.createElement("div");     div.id = "element";     document.body.appendChild(div);     r = Raphael(document.getElementById("element"));

Вы поймите суть того, что я написал.

<script> function childEvent(e) {    alert(e.id)  } </script> <style> div div {   display: block;   width: 20px;   height: 20px;   border: 1px solid #000;   float: left;   margin: 1px;   } </style>     <div onclick="childEvent(event.target || event.srcElement)">   <div id="d1"></div>   <div id="d2"></div>   <div id="d3"></div>   <div id="d4"></div>   <div id="d5"></div>   <div id="d6"></div> </div>

Здесь есть div имеющий дочерние элементы. У этого div назначаем обработчик события onclick. Так как события всплывают вверх по иерархии объектов документа, то щелчок по любому из дочерних его элементов можно "отловить" выше - в родительском элементе. В примере не проверяется, что щелчок произошел на дочернем элементе, а не на родительском (да я собственно и не знаю, что за элементы вы рисуете в родителе), а просто выводится id выбранного div. Добавьте динамическое добавление родителю элемента div, и вы увидите, что щелчок по нему будет также обрабатываться, что естественно.

Я не знаю библиотеки с которой вы работаете, но если возможно делегирование обработки событий родительскому элементу, то поступил бы именно так.

Хорошая идея, я попробую так, спасибо :)

Разберите исходный код примера - http://raphaeljs.com/easing.html - ИМХО, там всё просто и понятно.

спасибо, но в этом примере мы знаем сколько в нас элементов создано, а как можно организировать цыкл, чтобы к каждому елементу обращатся отдельно(количество созданых элементов неизвестно)?

Спасибо всем!!! Решыл: :dance:

z++;         shapes.push(r.rect(x, y, 95, 25, 20).attr({ fill: fcolor, stroke: scolor, "stroke-width": 2, cursor: "move" }).data("shape", z)          .click(function () {              alert(this.data("shape"));          }));