Mappet 1.0

Project: Terminated

Blog nie jest już dalej prowadzony ani aktualizowany. Mimo tego, wpisy i komentarze są dalej dostępne. Możesz przeczytać pożegnalny wpis albo przejść do archiwum.

Mappet jest moim narzędziem pozwalającym na bardzo proste tworzenie map obrazków w CSS. Powstał przy użyciu wspaniałej biblioteki jQuery, której się przy okazji trochę poduczyłem na tym projekcie.

Nie będę się rozpisywał jakie są dostępne opcje, wystarczy trochę go poużywać. Błędów mam nadzieję jest jak najmniej, gdyby jakieś się pojawiły, proszę o zgłoszenie. :-) Wsparcia dla Explorera nie ma i nie będzie. Co bynajmniej nie oznacza że wygenerowany kod nie będzie działał na tej przeglądarce.

Zamierzam rozwijać projekt dalej, na liście todo znajdują się:

Usuwanie obszarów.
Ustawianie z-index.
Reset narzędzia (teraz trzeba odświeżać).
Kuliste obszary (da się - tylko Opera nie łapie).
Efekty graficzne (pływające etykietki, kolorowanie teł).

Początkowo chciałem, aby można było ładować obrazek z dysku - lecz zabezpieczenia w JavaScript nie pozwalają na takie manewry online (lokalnie działało). Niczego server-side tam nie będzie, więc najpewniej zostanie tak jak jest. Jeśli wiecie co należy odkomentować po ściągnięciu na dysk - proszę bardzo.

Komentarze? Opinie? Bugi? Pomysły? :)

Tagi wpisu: css, image, jquery, map, mappet, tool

Informacje i hiperłącza

Piotr Petrus 'Riddle'

Blog o projektowaniu zgodnych ze standardami stron internetowych.

Praktyczne przykłady, sztuczki CSS, sposoby obchodzenia błędów przeglądarek, lekki i nieinwazyjny JavaScript, użyteczny design, dostępność i skrypty użytkownika.

RSS

Informacje o wpisie

Napisał riddle 16 listopada 2006 o 17:43

Kategorie: CSS, JavaScript & DOM, Moje dzieła, Narzędzia

Wpisy archiwalne

Archiwum miesięczne

Dzięki!

Komentarze

lauro 1 16 listopada 2006, 17:51

Trochę szkoda, że URL w wygenerowanym kodzie nie pojawia się cała ścieżka do danego pliku, tylko jego nazwa i rozszerzenie…
Riddle 2 16 listopada 2006, 17:52

Kliknij w opcje. ;-)
lauro 3 16 listopada 2006, 17:53

Zwracam honor :)
Pryngiel 4 16 listopada 2006, 18:05

niezłe :)

zazwyczaj z takim czyms recznie sie meczylem…
radzio 5 16 listopada 2006, 18:08

No ciekawe, ciekawe. Na razie tyle bo muszę dokładnie przetestować :D
Speedy 6 16 listopada 2006, 18:34

hej,

Świetne narzędzie! Coś takiego było mi potrzebne.

ps. Czy będzie może udostępniona jakaś paczka z kodem? Byłbym kontent :-).
Wiem, że narzędzie jest w JS, ale jak próbowałem to „na żywca” skopiować na dysk, to nie działało do końca poprawnie… (wstawiało numery obszarów co drugi, tj. 1, 3, 5 itd. oraz podwójne wpisy w generowanym kodzie html i css).

Pozdrawiam.
soon 7 16 listopada 2006, 18:55

ciekawe narzędzie, pewnie się przyda :)
Yano 8 16 listopada 2006, 18:58

Po załadowaniu obrazka i wybraniu strzałki nic więcej się nie da zrobić. Jeśli nie ma stworzonej żadnej mapy strzałka powinna być zablokowana.
Riddle 9 16 listopada 2006, 19:08

Yano: Masz rację, dzięki. :-)
medyk 10 16 listopada 2006, 19:12

u mnie nie działa (FF2 win XP).. jak wyżej u Yano, jedyne co mogę zrobić to wybrać strzałkę i rozwinąć menu options.. a dalej to mogę sobie jedynie poklikać bez żadnych efektów.
Nic się nie rysuje i wkółko mam błędy JS od urchin trackera (być może ten tracker wywala JS) lepiej wywal ten google’oski JS, bo jest coś nie dopracowany.. ja już dawno to zrobiłem :)
Riddle 11 16 listopada 2006, 19:13

Wybierasz obrazek, klikasz prostokąt, rysujesz po obrazku… Mam Fx2 na XP i mi działa.
ludwik 12 16 listopada 2006, 20:12

kolejny świetny bajer od Riddle’a :)
kłaniam się nisko i gratuluję
medyk 13 16 listopada 2006, 20:27

tak działa.. :) nie mając instrukcji obsługi na początku klikałem w strzałke.. no a potem nie da się już nic zrobić.. warto to poprawić albo wyłączyć strzałkę na początku
Riddle 14 16 listopada 2006, 20:40

Ok, poprawiłem…
Yano 15 16 listopada 2006, 20:56

Super. No to kolejne zadanko, tym razem z gatunku pomysłów:

* Riddle, sam używasz Photoshopa. Może by tak zaczerpnąć skróty, co? Dla przypomnienia: V – select/move tool, M – marquee tool itp.

* Wyłączanie przycisków jest nieintuicyjne. Po wybraniu istniejącego obszaru oba narzędzia gasną. Trzeba się doszukać maciupeńkiego _Cancel, żeby wyjść z trybu edycji. Niech będą aktywne, umożliwiając przechodzenie z jednego do drugiego narzędzia.

* Brak możliwości usunięcia obszaru. Jeśli w trakcie stwierdzimy, że coś jest jednak zbędne, całą zabawę trzeba zaczynać od nowa.

* Przesuwanie obszarów przy pomocy myszy.

* Zmiana rozmiarów przy pomocy myszy.

* Przy kilku mapach na jednej stronie wystąpi konflikt ID. Przydałaby się możliwość dodania prefiksu do tworzonych identyfikatorów.

* Po skończonej zabawie z jednym obrazkiem wolałbym zacząć od nowa bez przeładowania strony.

* i na koniec może podgląd na żywo wygenerowanej mapy? Np. w nowym oknie… ;)

To z gatunku łatwych. Teraz coś hardcore:

* Zamiast kreskować aktywny obszar, co na niektórych obrazkach może być mało widoczne, proponuję przyciemnić całość obrazka a zostawić rozjaśniony tylko obszar aktualnie edytowany.

Na razie tyle. Potem może podrzucę jeszcze parę. ;)

Ha, jeszcze jeden mały ale upierdliwy błąd: wprowadzenie 0 jako wartości skutkuje kilkoma alertami. Czy to zamierzona zemsta na użytkowniku? Zamiast alerta wolałbym dyskretną informację pod formularzem + ew. podświetlenie błędnie wypełnionych pól.
Riddle 16 16 listopada 2006, 21:11

Yano, czytasz mi w myślach. ;-) Dzięki za wyczerpujący komentarz.
Ktos 17 17 listopada 2006, 09:32

Fajniutkie.
Szkoda, że nie używam map obrazów w CSS – żadnych innych zresztą też ;-)
zwierzak 18 17 listopada 2006, 11:54

Wielokąty, to przecież też jest potrzebne
Riddle 19 17 listopada 2006, 12:10

Za wolne i zbyt skomplikowane.
blue 20 17 listopada 2006, 14:47

A <map> już nie jest trendi?
Riddle 21 17 listopada 2006, 14:53

Nie jest dostępne, a nie trendi.
Tom Sieron 22 17 listopada 2006, 19:25

Moglbys sie pochwalic na grupie dyskusyjnej jQuery (archiwum jej : http://www.nabble.com/JQuery-f15494.html ). Jedna z wiekszych zalet jQuery jest wlasnie bardzo aktywne community, duzo przykladow i dokumentacji, dorzuc swoje trzy grosze:) bo Twoj Mappet jest ciekawy.
Riddle 23 17 listopada 2006, 19:33

Dzięki, tak zrobiłem. :-)
blah 24 17 listopada 2006, 21:16

BTW: co znaczy, że Opera nie łapie, jak łapie?

Chyba, że co innego autor wpisu miał na myśli.
Jak rozumiem na tej stronie testowej ma się „dać kliknąć” w kółko, tak?
Riddle 25 17 listopada 2006, 21:18

Ma się dać kliknąć w kółko, ale już nie poza. Tylko że mi teraz w ogóle to nie działa, mimo że pamiętam że działało (właśnie częściowo).
blah 26 18 listopada 2006, 09:14

no, właśnie u mnie działa dokładnie jak opisujesz(Opera 9.02).

Klikalny jest jedynie obszar w kółku i nic poza tym.
eeyore 27 21 listopada 2006, 00:17

* Accessible CSS Image Map Generator Mappet helps generating accessible css image maps. Just point to your picture and it wil generate the code. Didn’t work in Safari but was fine in Camino. November 20 at 06.00 pm
http://veerle.duoh.com/
liviopl 28 26 listopada 2006, 00:29

Fajne narzędzie :).
linux 29 02 grudnia 2006, 22:36

nie działa w konquerorze, a to jedyna przeglądarka którą posiadam.

ff uruchamia się zbyt długo, a opera wymaga qt.
proszę coś z tym zrobić. pozdrawiam.
zwierzak 30 06 grudnia 2006, 11:55

Konqueror też jest na Qt, tylko po drodze ma KDElibs. Choć muszę przyznać, że Opera nie specjalnie się integruje ze środowiskiem.
miedziak 31 15 grudnia 2006, 09:41

sorki za byc moze trywialne pytanie, ale co stoi na przeszkodzie uzywac zwyklego <map> z html-a ? jakie sa korzysci tego samego efektu za pomoca css-ow ?
Riddle 32 15 grudnia 2006, 11:12

Po wyłączeniu stylów i obrazków dostajesz standardowe linki i nie musisz się martwić, że nie da się kliknąć w obszar na zdjęciu, którego nie ma. Jest to lepiej indeksowalne przez wyszukiwarki. Możesz dorobić efekty na tych obszarach. I wreszcie – nie należy pytać jakie korzyści płyną z rozwiązania CSS tylko jakie wady z rozwiązania HTML.
liviopl 33 08 stycznia 2007, 13:20

Ja ostatnio zacząłem bawić się jQuery – zobacz http://livio.i64.pl/xhtml/jq/jq.html
wzs 34 26 maja 2007, 12:51

Faktycznie przydatne – ręczne klepanie wszystkiego było trochę frustrujące

Już się przyzywczaiłem do niedziałania skryptów pod Operą – ale może warto wspomnieć ;)
Poza tym przydałoby się usunąć jeden z trzech slashy po http:
Marcin 35 28 maja 2007, 12:58

Czy to tylko ja tak mam, że linki nie działają pod IE 7? Pod Fx, Operą, IE 6 wszystko gra, a pod IE 7 wybrane obszary są „nieklikalne”. Co ciekawe linki można wybrać przy pomocy klawiatury (kilka razy Tab i Enter), wtedy widać że <a /> znajduje się tam gdzie trzeba. Taki sam efekt mam na stronie z krową i okrągłym obszarem.
Marcin 36 05 czerwca 2007, 10:59

Oto moje masta-haka rozwiązanie:
IE7 najwyraźniej nie łapie się na _background, to mu zamiast tego sprokurowałem 1×1px przeźroczystego gifa (spacer gif forever!) i dałem normalne do background, już bez podkreślenia. Działa.
Agustin 37 24 stycznia 2008, 22:34

I noticed some padding & margin issues with the mappet. It would be helpful to add this CSS code to the generated version:

<code> #imgmap ol {
list-style:none;
margin:0;
padding:0;
}</code>
jan 38 31 stycznia 2008, 14:54

Hi, sorry for using english. I am your neighbour though, I am from Czech Republic!

Great piece of software, but the code does not work in ie 7! Several people reported this.
It works in ie6, which is good. It does not work in ie 5.0, but i don’t care about that much.

Informacje i hiperłącza

Informacje o wpisie

Wpisy archiwalne

Dzięki!

Komentarze

Dodaj komentarz