[HTML5/CSS] Naniesienie na responsywny obraz o dużej powierzchni punktów "klikalnych"

Witam serdecznie,

Nie mogę sobie poradzić z pewnym zadaniem, a mianowicie ogranicza mnie chyba wiedza :/ Tworząc stronę konkursową do szkoły, w jednej z podstron umieściłem jako obszerną, dopasowującą się do elementu grafikę (panoramę). Na niej zaznaczone są również pewne obiekty ze zdjęciem i opisami, które chciałbym zamienić w hiperłącza do poszczególnych podstron o tych miejscach. Z góry zaznaczam, że próbowałem mapowania grafiki, a po umieszczeniu wygenerowanego kodu w pliku html, wszystko się ładnie wczytuje poza tym "skordowanym?!" elementem. Znajduje się on po za stroną, a jego rozmar to "0px na 0px" Czy istnieje jakiś sposób, niekoniecznie banalny, do stworzenia takich pkt. przy pomocy css?  

Dodaję wycinek panoramy:

Panorama jest przesuwana przy pomocy suwaka w poziomie. Jeśli ktoś zna jakieś rozwiązanie dla mojego problemu, lub chętnie mnie naprowadzi, będę bardzo wdzięczny

Pozdrawiam, Karol

A w jaki sposób masz zrobione te linie prowadzące do punktów? To jest od razu na zdjęciu, a Ty chcesz ustalać tylko pozycje tych kółek ze zdjęciami?

Na razie widzę tutaj rozwiązanie w postaci absolutów.

 

div{
  position: absolute;
  top: 40%;
  left: 37%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

Chociaż markery też można zrobić jako SVG... Hmmm Zobaczymy co inni zaproponują. Ja się muszę zastanowić.

Jest to naniesione na obrazek, lecz mam projekt, wiec stworzenie wszystkiego oddzielnie nie będzie problemem I tak, myslałem właśnie, żeby nanieś na to zdjęcie jakoś hiperłącza

Edited by DobryKarol, 25 August 2015 - 15:23 .

Tak jak Zonic nadmienił, ustawiasz pozycje opierając się na pozycjonowaniu absolutnym, przy użyciu % jednostek.

 

Możesz też odwołać się do JS. Albo poprzez gotowe rozwiązania https://github.com/d...age-map-resizer albo wyznaczając własne punkty przełamania i zmieniając wartości elementów poprzez JS, w zależności od rozmiaru widocznego okna.

 

ps. poniższe demo rozwiąże chyba wszelkie wątpliwości

http://www.cssplay.c...-image-map.html

Dzieki wielkie za odpowiedzi!
Poradziłem sb troszkę w inny sposób, otóż program w którym stworzyłem aplikacje panoramy umożliwiał opcję utworzenia hotspotów i to ułatwiło mi pracę, oraz rozwiązało mój problem.
Dla zainteresowanych, program Pano2VR Opcja wyprowadzenia skryptu w HTML5, co umożliwia naniesienie linków