Skocz do zawartości

Zdjęcie
* * * * * 1 głosy

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

html5 css panorama hiperłącza

4 odpowiedzi w tym temacie
  • Zaloguj się, aby dodać odpowiedź
DobryKarol
0
Neutralna

Napisano 25 sierpnia 2015 - 14:13

#1

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:

Przechwyt_sppwwpp.png

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


  • 0

zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 25 sierpnia 2015 - 14:31

#2

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ć.


  • 1

DobryKarol
0
Neutralna

Napisano 25 sierpnia 2015 - 15:21

#3
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 ;)

Użytkownik DobryKarol edytował ten post 25 sierpnia 2015 - 15:23

  • 0

Zimistrz

    Stary wyjadacz

  • 465 postów
    • Czas spędzony online: 14d 2h 42m 38s
116
Znakomita!

Napisano 26 sierpnia 2015 - 21:31

#4

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


  • 1

DobryKarol
0
Neutralna

Napisano 09 września 2015 - 07:57

#5

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 :)


  • 0





Podone tematy Collapse


Również z jednym lub większą ilością słów kluczowych: html5, css, panorama, hiperłącza

Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych