Pilna pomoc przy mapce Opcje

[SpiJay]

Witam !

Potrzebuję nadać zachowania po najechaniu muszką na jeden z kontynentów.
Np. Najeżdżam na Europę i pojawia się DIV o ID #box_europa i tak dalej z każdym państwem,

Moja strona http://spijay.com/demo/corp/?page_id=4

Pozdrawiam,
Patryk

[Mayka]

Ja bym to podzielił na konkretne czesci i funkcja .mouseover() powinno wystarczyć, http://api.jquery.com/mouseover/

[SpiJay]

Tylko, że tutaj jest mnóstwo span-ów.. :/
W dokumentacji było coś takiego:

[JAVASCRIPT] pobierz, plaintext 
// custom events
'onHover' : function(e){}, // Callback: function(listItem) - Fires when the mouse pointer enters a region and passing a current list item element;
[JAVASCRIPT] pobierz, plaintext 

I to działa, ale dla każdego z kontynentów, jak więc określić aby np. onHover #europa działało tylko po najechaniu na Europe ?

[d3ut3r]

Fires when the mouse pointer enters a region and passing a current list item element;

a co jest w tym listItem ? być może na podstawie którejś z właściwości dasz radę odróżniać kontynenty.

[Kshyhoo]

Coś w tym stylu?

[Pawel_W]

Coś w tym stylu?

to jest ten sam skrypt (IMG:style_emoticons/default/smile.gif)

[kamil4u]

Nie znam tego skryptu.Ty podałeś minimum informacji. Żadnej informacji jak to używasz, jak to działa itd. Możliwe, że twórca tego skryptu wymyślił eleganckie rozwiązanie, ale trudno to stwierdzić bez dokładnie opisanego kodu lub API. Daj link do dokumentacji jak chcesz dowiedzieć się jak to zrobić porządnie.

Dlatego podam rozwiązanie "na około":
1. Masz tam div-a w którym trzymasz wszelkie mapy: <div id="map-continents" class="css-map-container m850">
2. Div ten zawiera listę: <ul class="continents css-map">
3. Ta lista zawiera <li>, które po najechaniu na nie zmieniają swoją klasę na "focus"

I to wszystko. Teraz wystarczy dobrać się do tego div-a, znaleźć element o klasie focus, sprawdzić co to za element i na tej podstawie wyświetlić odpowiednie informacje.

----
Prawdopodobnie to co podałeś zastępuje to co napisałem wyżej.
Jeżeli chcesz użyć tego 'onHover' to prawdopodobnie działa to tak:

Kod

'onHover': function( li ){ alert(li.innerHTML); }

Dzięki temu po najechaniu na dowolny element dostaniesz alert-a z konkretnym li. Zmienna li będzie zawierała referencję do konkretnego elementu listy( li ), czyli tego z punktu 3.

Myślę, że się domyślisz o co chodzi, ale to zależy na jakim poziomie JS jesteś.

Powodzenia w razie czego pytaj.

[Winston_Wolf]

Witam !

Potrzebuję nadać zachowania po najechaniu muszką na jeden z kontynentów.
Np. Najeżdżam na Europę i pojawia się DIV o ID #box_europa i tak dalej z każdym państwem,

Moja strona http://spijay.com/demo/corp/?page_id=4

Pozdrawiam,
Patryk

Nie łatiwej było od razu do mnie pisać?

Jest tam opcja 'List of addresses'. Tworzysz diva z listą, w której każdy element ma ID taki jak odnośnik (hash) w mapie:

Kod

<div id="addresses">
<ul>
  <li id="albania">
  <!-- Albania -->

  </li>
  <li id="andorra">
  <!-- Andorra -->

  </li>
  <li id="bosnia-and-herzegovina">
  <!-- Bosnia and Herzegovina -->

  </li>
</ul>
</div>

Oczywiście do każdego elementu listy możesz wrzucić dowolny kod.

..a następnie wywołujesz funkcję mapy:

Kod

$('#map-europe').cssMap({
  size: 810,
  agentsListId : '#addresses'
  agentsListOnHover : true
});

Ten post edytował Winston_Wolf 3.12.2012, 20:34:45