Hogyan tudnám HTML-Ben, ha ráviszem az egeret egy képre és automatikusan elindit egy hangot?

[link]

ilyesmit keresel?

Itt egy példa rá:

[link]

pár megjegyzés:

1. A DOCTYPE-ot - 1. sor - ne hagyd el, a HTML-szabvány része

2. Érdemes a képeket tartalmazó linkeket egy blokkba csoportosítani - lásd a 20. sorban levő, "allatok" azonosítójú blokkot.

3. Az ékezetes fájlnevek kerülendőek

4. A képeknél az alt attribútum megadása kötelező

5. A kép mérete CSS-ből állítható

1. Felesleges "id" attribútumot adni a képeknek, ha azokat nem használod fel.

A képeket összefogó blokknak (aminek az "allatok" az azonosítója, id attribútuma), illetve a lejátszónak (aminek "player" az azonosítója, id attribútuma) viszont ne vedd el, mert a Javascript kódban nem tudunk rá hivatkozni.

2. Amikor rámozdítjuk az egérkurzort az adott képre, ekkor bekövetkezik az onmouseover esemény, aminek hatására végrehajtunk egy függvényt. Ebben a függvényben:

2/1. Az általam közölt kódban az "imageSrc" változóba kigyűjtjük az adott kép (az az <img> elem, amire rámozdítottuk az egeret) címét (ami a kép "src" attribútumában van). E helyett te a kép (az az <img> elem, amire rámozdítottuk az egeret) "k" attribútumának tartalmát szednéd ki, feleslegesen (mert olyan nincs).

2/2. A "sound" változó arra szolgál, hogy az adott kép (az az <img> elem, amire rámozdítottuk az egeret) címét (ami a kép "src" attribútumában van és beraktuk az "imageSrc" változóba) átalakítsuk a képhez tartozó hangnak a címévé. Tehát a "kecske.jpg"-ből legyen "kecske.mp3", a "lo.jpg"-ből legyen "lo.mp3" és így tovább...

Te ezt csak egy kép esetén tennéd meg.

Ha a képeket egy kepek, a hangokat egy hangok mappába szervezed ki, akkor:

* cseréld ki a képek forrásában a "kepek"-t "hangok"-ra

* cseréld ki a képek forrásában a "jpg"-t "mp3"-ra

ezt egy sorban:

sound = imageSrc.replace('kepek', 'hangok').replace('jpg', 'mp3');

(tudom, lehetne szebben, reguláris kifejezésekkel, de ebbe ne menjünk bele)

2.3 A player.setAttribute() metódus a lejátszó (a "player" id attribútummal rendelkező <audio> tag) attribútumainak beállítását végzi. Az én kódomban az "src" attribútumát ( [link] ) állítaná be, a te kódodban a "k" attribútumát (aminek nincs).

3. Hasonló a helyzet az egér képről való elmozdulásakor (onmouseout esemény) lefutó függvényben is: a player.removeAttribute() a lejátszó egy adott attribútumát tünteti el. Esetemben az "src"-t, amibe a hang elérhetőségét rakjuk. Esetedben a "k"-t - ami nincs.

Tehát kb. így:

[link]