Webboard

Pełna wersja: Mapa CSS jako poddziały
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.
wersja skryptu MyBB:1.8.5
adres forum: www.gitarowo.xaa.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu): Witam! Potrzebuję pomocy!

Chciałbym na swoje forum dodać mapkę CSS, która po kliknięciu w dane województwo będzie przenosiła do danego poddziału na forum.

Chciałem skorzystać z tej mapy:

http://www.krksmg.pl/mapka/

Czy jest możliwość wgrania jej w opis działu?

Jeżeli byłaby taka możliwość prosiłbym o wytłumaczenie, ja osobiście próbowałem się za to zabrać, ale coś nie wychodzi.


Pozdrawiam gorąco! :)
Da się bez problemu, tylko musisz kod html wkleić w opisie działu. Następnie musisz dodać odnośniki do plików js i css w szablonie headerinclude oraz wgrać pliki js i css na serwer FTP. Daj mi linka do tych plików bo na tej stronie ich nie mogę znaleźć to sprawdzę u siebie czy działa.

I wgraj jeszcze wymagane pliki na FTP. Sprawdziłem, działa.
No to skoro tam nie ma, to pewnie nigdzie nie ma. Na szczęście jest też inna fajna i porządna mapka z plikami do pobrania :)

http://winstonwolf.pl/clickable-maps/poland.html

Wiesz może jak zabrać się za tą? :)
Pobierz paczkę i odpal plik index.html. Masz to wszystko wyjaśnione jak zainstalować.

W skórcie:

Dodajesz te 2 linijki do headerinclude:

Kod PHP:
<link rel="stylesheet" type="text/css" media="screen,projection" href="cssmap-poland/cssmap-poland.css" />
<
script type="text/javascript" src="http://cssmapsplugin.com/4/jquery.cssmap.js"></script

Na samym dole headerinclude dodajesz (zależy od rozmiaru mapy, masz tam 5 przykładów w pliku):

Kod PHP:
<script type="text/javascript">
$(function($){

  
// sample usage of the onClick and onHover options (click on the map to run onClick function)
  
$('#map-poland').cssMap({
    
'size'500,                  // set map size to 500px wide;
    
'onClick': function(e){
      var 
link e.children('a').attr('href'),        // get link's URL; 
          
text e.children('a').eq(0).text(),       // get text of the link; 
          
className e.attr('class').split(' ')[0];  // get class name of the list item; 
     
}
   });

});
</
script
Nastepnie wgrywasz cały folder cssmap-poland do głównego katalogu forum i dodajesz kod do opisu działu:

Kod PHP:
<div id="map-poland">
 <
ul class="poland">
  <
li class="pl1"><a href="#dolnoslaskie">Dolnośląskie</a></li>
  <
li class="pl2"><a href="#kujawsko-pomorskie">Kujawsko-pomorskie</a></li>
  <
li class="pl3"><a href="#lubelskie">Lubelskie</a></li>
  <
li class="pl4"><a href="#lubuskie">Lubuskie</a></li>
  <
li class="pl5"><a href="#lodzkie">Łódzkie</a></li>
  <
li class="pl6"><a href="#malopolskie">Małopolskie</a></li>
  <
li class="pl7"><a href="#mazowieckie">Mazowieckie</a></li>
  <
li class="pl8"><a href="#opolskie">Opolskie</a></li>
  <
li class="pl9"><a href="#podkarpackie">Podkarpackie</a></li>
  <
li class="pl10"><a href="#podlaskie">Podlaskie</a></li>
  <
li class="pl11"><a href="#pomorskie">Pomorskie</a></li>
  <
li class="pl12"><a href="#slaskie">Śląskie</a></li>
  <
li class="pl13"><a href="#swietokrzyskie">Świętokrzyskie</a></li>
  <
li class="pl14"><a href="#warminsko-mazurskie">Warmińsko-mazurskie</a></li>
  <
li class="pl15"><a href="#wielkopolskie">Wielkopolskie</a></li>
  <
li class="pl16"><a href="#zachodniopomorskie">Zachodniopomorskie</a></li>
 </
ul>
</
div

Mi wszystko działa:

[Obrazek: h_1440606914_2789005_f3a6b8bfbd.png]
Dzięki za fajną instrukcję :)

Wgrałem wszystko dokładnie tak jak napisałeś, jednak po zrobieniu tego wszystkiego cały czas mam same działy bez mapki. :(

EDIT: Działa :)

A jakbym chciał ją zmniejszyć to gdzie szukać? Bo po zmianie rozmiaru w headerinclude mapka znika.. :(
Edycja mapy pliku polska-500px.psd