Ez hogy oldható meg? (térkép)

Nem egymásra teszi a képeket, hanem egy div-nek a hátterét állítgatja, tehát mindegyik egy külön-külön kép.

Részletesebben:

Gondolom ez zavart meg a kódban:

<img src="img/cesko.jpg" class="hidden" />

<img src="img/slovensko.jpg" class="hidden" />

<img src="img/rakusko.jpg" class="hidden" />

<img src="img/hungary.jpg" class="hidden" />

Ez csak azért van, hogy a böngésző az oldallal együtt betöltse az összes képet, de valójában a JavaScript ezekhez hozzá sem nyúl, csak az <div class="overlay"></div>-nek a hátterét cserélgeti.

Minimális JS tudással át lehet szerkeszteni:

$("a.cz").hover(

function () {

$("div.overlay").css("background","url(img/cesko.jpg)");

},

function () {

$("div.overlay").css("background","url(img/home_off.jpg)");

}

);

Ez egy jQuery kód, ami egy egészen más tészta, de röviden:

először megkeresi a kódban az az anchor típusú tag-et, aminek a class mezője cz. Ő az: <a href="http://www.lotia.eu/czech" class="cz"><h1>LOTIA ČESKO</h1></a>

Majd ehhez egy "hover", azaz egér-föléhúzási jQuery eseményt társít, ami belépéskor az első function-t hajtja végre, majd ha kimentél az egérrel, akkor a másodikat.

A funkció:

Megkeresi az a div-et, aminek a class mezője overlay.

Ő az: <div class="overlay"></div>

Ennek a "background" css-attribútumát állítja be a kép elérési útvonalára (esetünkben cesko.jpg).

A másik ugyanezt csinálja a home_off képpel (ez az alap, amikor nincs egyik ország sem kiemelve.

Ergo, ha legyártod magadnak a képeket, pl Photoshoppal és ez a minta alapján megcsinálod az egészet (és nem felejted el betölteni a jQuery-t sem (<script type="text/javascript" src="js/jquery.js"></script>), amit jquery.com-ról töltesz le, akkor kész is vagy.

Ha amit most leírtam nem értetted, akkor hagyd a fenébe :D

Sok sikert