За последние 24 часа нас посетили 18432 программиста и 1913 роботов. Сейчас ищут 1623 программиста ...

Можно ли чекбоксы точно расставить на картинке?

Тема в разделе "HTML и CSS", создана пользователем Namer, 23 сен 2011.

  1. Namer

    Namer Активный пользователь

    С нами с:
    14 апр 2010
    Сообщения:
    492
    Симпатии:
    0
    Есть что-то типа интернет-магазина. В нем товар не в текстовом виде, а написан на картинке. Каждая такая надпись кликабельна, что реализовано с помощью html тегов <map> и <area>. Все в общем-то работает, но при таком подходе нет возможности выбрать сразу несколько товаров, а только по одному. Планирую сделать страничку для оптовых покупателей и хотел спросить, можно ли рядом с названием каждого товара на картинке поместить чекбокс? Чтобы покупатель с их помощью отметил нужные позиции и сделал оптовый заказ?
     
  2. lexa

    lexa Активный пользователь

    С нами с:
    22 июл 2007
    Сообщения:
    1.746
    Симпатии:
    0
    Адрес:
    Санкт-Петербург
    Вообще не правильно сделано изначально. Надо не картинку мапить, а под картинку прятать чекбокс. Перехватывать клик на картинку javascript и делать соответствующему чекбоксу checked.
     
  3. Namer

    Namer Активный пользователь

    С нами с:
    14 апр 2010
    Сообщения:
    492
    Симпатии:
    0
    lexa, пока сделан выбор товара по клику на его надпись на размапеной картинке. А с чекбоксами еще ничего не сделано. Просто раздумываю каким способом это реализовать. Для начала я просто хотел узнать, можно ли поверх рисунка расставить чекбоксы с заданными координатами в пикселях?
     
  4. lexa

    lexa Активный пользователь

    С нами с:
    22 июл 2007
    Сообщения:
    1.746
    Симпатии:
    0
    Адрес:
    Санкт-Петербург
    Да, можно. Через тот же map. Но при клике должен срабатывать javascript и ставить скрытому чекбоксу значение.

    То есть ответ положительный. но не в отом ключе, который подразумеваешь ты - чекбоксы поверх картинки. :)
     
  5. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Да вообще тогда не нужны чекбоксы, раз уж тут всё зависит от javascript. Скрытые поля сделать или отправку через ajax.
    Клик на картинке просто будет менять переменную.
     
  6. lexa

    lexa Активный пользователь

    С нами с:
    22 июл 2007
    Сообщения:
    1.746
    Симпатии:
    0
    Адрес:
    Санкт-Петербург
    YSandro, кстати, да. Если под картинками нет формы, то и чекбоксы-то и не нужны. Тык -> аякс.
     
  7. Namer

    Namer Активный пользователь

    С нами с:
    14 апр 2010
    Сообщения:
    492
    Симпатии:
    0
    А можете привести кусочек кода, как поместить чекбокс на картинку в определенное пикселями место? А то я что-то вообще пока не в теме этого...

    А как человек увидит, что он выбрал этот товар? С чекбоксами все наглядно.
     
  8. lexa

    lexa Активный пользователь

    С нами с:
    22 июл 2007
    Сообщения:
    1.746
    Симпатии:
    0
    Адрес:
    Санкт-Петербург
    Ещё раз: никак. Чекбоксы идут не поверх картинки. Они отдельно, визуально спрятаны в любую часть страницы. Когда пользователь кликает вызывается javascript он-то и имитирует нажатие на чекбокс.

    Выделив участок, например.
     
  9. Namer

    Namer Активный пользователь

    С нами с:
    14 апр 2010
    Сообщения:
    492
    Симпатии:
    0
    А я вот как раз нашел образец: http://lenta.ru/week/2011/37/
    Там текст на рисунок помещается дивами, типа:
    Код (Text):
    1. <div class="png switch title title_common " id="link-2" style="top: 82.13%; left: 1.41%">
    2.                           <span>Британский премьер<br>приехал в Россию</span>
    3.                         </div>
    Наверно и чекбокс по этому принципу можно нанести на рисунок?


    А как можно выделить участок рисунка да еще одновременно в нескольких местах??
    Чтобы понятнее было, есть рисунок, на нем разбросано в разных местах несколько товаров. Надо дать возможность человеку выделения и выбора от одного до нескольких товаров. И чтобы человек при этом видел, какие товары он отмечает.
     
  10. lexa

    lexa Активный пользователь

    С нами с:
    22 июл 2007
    Сообщения:
    1.746
    Симпатии:
    0
    Адрес:
    Санкт-Петербург
    Я всё равно не понимаю картины. :) Ну, то есть сам себе представляю одно, а на самом деле может быть иное.

    Если подход с дивами (это делается через CSS свойство position: absolute) кажется более верным, то, вероятно, он и есть более верный потому что ты-то видишь картину в целом: что есть, что надо и что хочется. :)
     
  11. Namer

    Namer Активный пользователь

    С нами с:
    14 апр 2010
    Сообщения:
    492
    Симпатии:
    0
    Ну вот это наверно оно и есть. Просто не знал как это делать и насколько точно можно ставить чекбокс. Теперь примерно понял и попробую. Спасибо! :)