Terve,
Minulla on php:llä generoitu taulukko, jossa muutama kymmenen riviä.
Tarkoitus olisi, että kun hiiri tuodaan rivin päälle niin tietokannasta haetaan riviä vastaava kuva, joka näytettäisiin erillisessä div:ssä taulukon oikealla puolella. Kuinka tuon saa tehtyä niin, että kuva ladataan vasta sitten, kun hiiri on rivin päällä eikä niin, että kaikki kuvat ladataan sivunlatauksen yhteydessä?
Ihan samanlaisella img-tagilla kuin muutenkin, mutta se vain pitää luoda JS:llä oikeaan aikaan.
<script type="text/javascript">
function hoax(){
document.getElementById("lol").src = "http://temu92.bluefoxgames.org/gallery/vortex.png";
}
function haox(){
document.getElementById("lol").src = "http://temu92.bluefoxgames.org/gallery/thumbs/thumb_vortex.png";
}
</script>
<img src="http://temu92.bluefoxgames.org/gallery/thumbs/thumb_vortex.png" id="lol" onmouseover="hoax()" onmouseout="haox()" alt="lol" />Nopeasti kirjoittamani esimerkki josta kyllä varmaan ainakin selviää jutun juoni, eli se miten vaihdetaan se kuva :)
Ja vaikka temun esimerkkiin muutos, eli kuvien urlit ja id:t funktioiden parametreiksi, niin toimii kaikissa kohdissa.
Ihan vaan erilaisten vaihtoehtojen tarjoamiseksi:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">/*<![CDATA[*/
#kuva { position: absolute; right: 10px; top: 10px; }
/*]]>*/</style>
<script type="text/javascript">/*<![CDATA[*/
window.onload = function() {
var kuvat = document.getElementById('kuvat');
if( kuvat ) {
var li = kuvat.getElementsByTagName('li');
for(var i = 0, maxi = li.length; i < maxi; i++) {
var a = li[i].getElementsByTagName('a');
if( a ) {
li[i].onmouseover = function() {
var i = this.getElementsByTagName('img');
if( i ) {
var kuva = document.getElementById('kuva');
if( kuva ) { kuva.removeAttribute('id'); kuva.src = ''; }
i[0].src = this.getElementsByTagName('a')[0].href;
i[0].setAttribute('id', 'kuva');
}
}
}
}
}
}
/*]]>*/</script>
</head>
<body>
<ul id="kuvat">
<li>Hiiri <a href="hiiri.jpg"><img alt="Näytä kuva" src="" /></a></li>
<li>Kissa <a href="kissa.jpg"><img alt="Näytä kuva" src="" /></a></li>
<li>Lehmä <a href="lehma.jpg"><img alt="Näytä kuva" src="" /></a></li>
</ul>
</body>
</html>En ole koskaan pitänyt JavaScript-attribuuttien (saati koodin!) ymppäämisestä HTML:n puolelle.
Yllä olevaa esimerkkiä voi/saa yksinkertaistaa mikäli käytössä on jokin JS-kirjasto (esim. jQuery).
Aihe on jo aika vanha, joten et voi enää vastata siihen.