Mapowanie obrazka

Witam,

Mam pytanie odnośnie mapowania obrazka przy zmianie jego rozmiaru na urządzeniach mobilnych.  Problem wygląda tak, że mam obrazek na którym jest 5 odnośników,  odnośniki umieszczone są  po kole i wszystko działa dobrze do momentu, kiedy nie zmienię rozmiaru obrazka - to znaczy przy zmianie wielkości okna przeglądarki mapowania nachodzą na siebie i nie spełniają swojej funkcji. Czy któś ma pomysł jak to ogarnąć?

 

Chcesz zmienić rozmiar tekstu odnośników względem np. rozdzielczości/szerokości ekranu? To może zainteresuje Ciebie media queries?

Przykład:

@media only screen and (min-width: 480px) and (max-width: 800px) {
nazwa.obiektu {font-size: 8px;}
}

Powyższe ma działać na “ekran” w podanych widełkach szerokości, czyli rozmiar fontu dla obiektu będzie miał 8 pikseli gdy szerokość okna przeglądarki będzie między 480, a 800px.

Chcę zrobić tak, żeby  wielkość obszaru zmapowanego (czyli odnośników do poszczególnych podstron) zmianiała się razem ze zmianą wielkośći obrazka a tym samym ze zmianą rozdzielczości/szerokości ekranu . Ponieważ obrazek główny ma 884x883px - w  dużej rozdzielczości jest ok (obszary zmapowane działają), problem jest kiedy zmniejszam rozdzielczość. Może podam kod jaki mam dla tego obrazka to będzie jaśniej

<map name=“Map” id=“Map”>

A możesz podać pełny kod razem z obrazkiem?

Z obrazkiem wygląda to tak

<p><img style=“display: block; margin-left: auto; margin-right: auto;” src=“images/korzysci.jpg” alt=“DAJEMY KORZYŚCI” usemap="#Map" width=“884” height=“883” border=“0” /></p>

<map name=“Map” id=“Map”>

Chętnie pomogę, ale dalej nie mam obrazka - bez niego będzie trudno sprawdzić czy działa to co chciałbym uczynić, bo na chwilę obecną na ślepo próbuję klikać i wyobrażać sobie omawiane koło.

no tak przepraszam nie pomyślałam :wink:post-275615-0-59933900-1426104033_thumb.

Zacznijmy od tego że twoja grafika ma inne rozszerzenie niż ta do której odnosisz się w kodzie.

Skoro masz rozmiary zadeklarowane na sztywno to ta grafika nie ma prawa się zmniejszać. Nie rozumiem o co ci chodzi. Podaj więc kod którym zmieniasz ten rozmiar. Albo jakąś przykładową sytuację.

 

Jeśli chcesz by obszary zmieniały się wraz z rozdzielczością skorzystaj z  https://github.com/stowball/jQuery-rwdImageMaps

Dzięki zadziałało :slight_smile: rozwiązanie idealne, jeszcze raz wielkie dzięki