Keskustelu: Nettisivujen teko: Js / onmouseover

Cartter [09.02.2009 13:38:33]

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ä?

Metabolix [09.02.2009 13:40:45]

Ihan samanlaisella img-tagilla kuin muutenkin, mutta se vain pitää luoda JS:llä oikeaan aikaan.

temu92 [09.02.2009 14:44:24]

<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 :)

Lebe80 [09.02.2009 16:55:09]

Ja vaikka temun esimerkkiin muutos, eli kuvien urlit ja id:t funktioiden parametreiksi, niin toimii kaikissa kohdissa.

Merri [09.02.2009 17:36:02]

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).

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen

Haku

Tehtävät