Ako na takyto sposob "li a:hover"?

Riesim takuto vec, myslim ze by to malo ist spravit cez css, pripadne s javascriptom. ide o to, ze po najdeni myskou na odkaz v <li> by sa nezmenilo pozadie textu, ale zmenil by sa img na uplne inom mieste, asi takto:



cize pri kazdom kraji by sa zobrazil .png obrazok na prislusnom mieste v mapke.
Najlepsie by bolo, ak by niekto poznal nejaky zivy priklad ze by som mohol pozriet ako je to kodovane, pripadne nejaky tutorial, nedokazem nikde najst takyto priklad. cez flash to nechcem robit! dik

Napadol mi niečo, ale je to hack. Vytvor li>a>img a ten img riadne napozicuj. Nebude to asi celkom ono, skús hľadať ďalšie riešenia.

map http://www.w3schools.com/TAGS/tag_map.asp , ale pri tomto by som zvolil radsej js ...

a kde mu tam konkretne pomoze tag <map> ? Ja by som vytvoril 8 krat obrazok Slovenska, pricom vzdy by som vyfarbil iba jeden kraj. Potom by som tie obrazky dal ku kazdemu <li>, defaultne by boli display:none; pri li:hover by sa zobrazili. Potom uz ich len snazi nejako napoziciovat.