Работа с областью на изображении

Discussion in 'PHP' started by inlanger, 28 Oct 2008.

  1. inlanger

    inlanger Elder - Старейшина

    Joined:
    7 Jan 2007
    Messages:
    985
    Likes Received:
    283
    Reputations:
    27
    Есть картинка, нужно чтобы при наведении на определённую область на этой картинке выводить всплывающую подсказку.
    Код красивой подсказки у меня есть, параметр alt не предлагать :)
     
  2. Kaimi

    Kaimi Well-Known Member

    Joined:
    23 Aug 2007
    Messages:
    1,732
    Likes Received:
    811
    Reputations:
    231
    Вариант?
    http://www.javascriptkit.com/howto/imagemap.shtml
     
    _________________________
  3. inlanger

    inlanger Elder - Старейшина

    Joined:
    7 Jan 2007
    Messages:
    985
    Likes Received:
    283
    Reputations:
    27
    Буду разбираться... вроде то, только не пойму чё и как.
     
  4. vikseriq

    vikseriq Elder - Старейшина

    Joined:
    31 Jul 2008
    Messages:
    118
    Likes Received:
    44
    Reputations:
    2
    Есть замечательные теги map и area - вот там то и есть Дао ))
    Ну, как вариант, можно и div-ы многослойные класть, но это уж делают только такие мудрецы, как я ))
     
  5. Naydav

    Naydav Elder - Старейшина

    Joined:
    30 Dec 2006
    Messages:
    439
    Likes Received:
    63
    Reputations:
    4
    Хочешь как на flickr?
    держи h_ttp://fotonotes.net/
     
  6. inlanger

    inlanger Elder - Старейшина

    Joined:
    7 Jan 2007
    Messages:
    985
    Likes Received:
    283
    Reputations:
    27
    Ты можешь сделать area ссылкой? Именно вписать туда <a href>? Мне нужно чтобы там было именно <a>, параметр href к area не катит.
     
  7. Naydav

    Naydav Elder - Старейшина

    Joined:
    30 Dec 2006
    Messages:
    439
    Likes Received:
    63
    Reputations:
    4
    А чем тебя не устраивает, тот вариант, что япредложил?
    Формируем массив джаваскрипт, на передаем его в функцию и на основе его строим комменты?
    Я даже ссылку на код дал

    могу и на jquery выложить, если первый вариант не устраивает

    Вот еще пример, достаточно просто сохранить страницу, и забрать скрипт
    h_ttp://flamber.ru/notes/
     
  8. inlanger

    inlanger Elder - Старейшина

    Joined:
    7 Jan 2007
    Messages:
    985
    Likes Received:
    283
    Reputations:
    27
    В том что ты предложил не добавляются новые метки через ФФ на линухе. Дай плиз ссылку на jquery примерчик, попробую.
     
  9. inlanger

    inlanger Elder - Старейшина

    Joined:
    7 Jan 2007
    Messages:
    985
    Likes Received:
    283
    Reputations:
    27
    _ttp://openit.com.ua/used_files/Image/MOVE_EAST/map_move_east.gif
    вот картинка. Надо чтобы при наведении на красную точку появлялся тултип как тут:
    _ttp://www.web-graphics.com/mtarchive/BubbleTooltips.html
    Я даже не знаю с чего начать...
     
  10. Naydav

    Naydav Elder - Старейшина

    Joined:
    30 Dec 2006
    Messages:
    439
    Likes Received:
    63
    Reputations:
    4
    _ttp://www.web-graphics.com/mtarchive/BubbleTooltips.html - css'шные тултипы(знач менее гибкие), лучше использовать js

    h_ttp://jquery.bassistance.de/tooltip/demo/

    Твой пример - Image map with tooltips (карта там внизу)
     
    1 person likes this.
  11. inlanger

    inlanger Elder - Старейшина

    Joined:
    7 Jan 2007
    Messages:
    985
    Likes Received:
    283
    Reputations:
    27
    да мне не гибкость нужна, а именно этот вид, он заказчиками понравился. А за ссылку на jquery спасибо, буду разбираться.
     
  12. Naydav

    Naydav Elder - Старейшина

    Joined:
    30 Dec 2006
    Messages:
    439
    Likes Received:
    63
    Reputations:
    4
    h_ttp://jquery.bassistance.de/tooltip/demo/
    Твой пример - Image map with tooltips (карта там внизу)

    Адрес на сорс забыл дать
    h_ttp://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
     
  13. inlanger

    inlanger Elder - Старейшина

    Joined:
    7 Jan 2007
    Messages:
    985
    Likes Received:
    283
    Reputations:
    27
    Да сорс я нашёл ужо, колупаю.
     
  14. inlanger

    inlanger Elder - Старейшина

    Joined:
    7 Jan 2007
    Messages:
    985
    Likes Received:
    283
    Reputations:
    27
    h_ttp://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
    вот тут в архиве с демкой есть png файлы, как бы фон тултипа. Но вот как его вставить, я не нашёл :( А очень надо.
     
    1 person likes this.
  15. Cecil B Demented

    Cecil B Demented New Member

    Joined:
    13 Nov 2006
    Messages:
    19
    Likes Received:
    4
    Reputations:
    5
    как бы есть screen.css в нём классы #tooltip.fancy, #tooltip.fancy.viewport-right пользуют фоны.
     
  16. Naydav

    Naydav Elder - Старейшина

    Joined:
    30 Dec 2006
    Messages:
    439
    Likes Received:
    63
    Reputations:
    4
    Блин, ну возьми имя пнгешника и поиском пробегись по файлам (в тотал командере alt+f7)
    А фон прописывается, как уже ответили в css
     
  17. JAH

    JAH Elder - Старейшина

    Joined:
    8 Jan 2008
    Messages:
    22
    Likes Received:
    4
    Reputations:
    0
    Попробуй разметить картинку через map (html), подкрепи к странице jquerry и просто напросто к "<a href .... " добавь " tip=Свое описание " ,так будет намного проще,а внешний вид всплывающей подсказки сам потом настроиш в css