Keskustelu: Nettisivujen teko: Javascript mouseover

timodemus [01.12.2009 13:40:58]

Haluaisin tehdä javascriptillä ehtolauseen, jossa on kaksi toimintoa:
Jos hiiren kursori on tietyn kohdan päällä, ajetaan haluttu HTML-koodi,
ja jos hiiren kursori EI OLE tämän kohdan päällä, ajetaan haluttu toinen HTML-koodi (eli siis vain toinen koodi ajetaan, riippuen tilanteesta).

Käytettävyys voisi olla samaa luokkaa kuin tageilla <script> ja <noscript>.

Yritin etsiä Googlella ja myös ohjelmointiputkasta, mutta en löytänyt ratkaisua.
En ole vielä tehnyt javascriptillä mitään, mutta olen koodaillut muutamalla muulla kielellä, joten valmiin koodin lukeminen voisi toimia hyvänä harjoituksena.

Veikkaan, että jollekin kokeneelle Javascript-koodaajalle tämän toteuttaminen ei vaadi paljoa, joten olisin kiitollinen, jos saisin tähän valmiin koodin.

Kiitos etukäteen!

tsuriga [01.12.2009 13:48:39]

jQuery:

$(document).ready(function() {
    $('#elementid').bind("mouseenter", function() {
        // On top of the element
    });
    $('#elementid').bind("mouseleave", function() {
        // Not on top of the element
    });
});

timodemus [01.12.2009 13:53:57]

tsuriga: Tuo näyttää kyllä ajavan halutun koodin hiiren ollessa päällä, mutta sitten pitäisi olla vielä vastaava, joka ajaisi tietyn koodin kun hiiri ei ole päällä.

Edit: kirjoititkin jo lisää, eli tuo näyttäisi toimivan.

Täytyypä kokeilla.
Kiitos.

timodemus [01.12.2009 18:14:14]

Tuo ei toiminut.

Tässä koodi, jonka kirjoitin:

<html>
<head>
<title>Esimerkkisivu | Mouseover</title>
</head>
<body>
<script type="text/javascript">
document.write("Esimerkki:<br>");

$(document).ready(function() {
    $('#elementid').bind("mouseenter", function() {
        // On top of the element
        document.write("Hiiri on tekstin päällä");
    });
    $('#elementid').bind("mouseleave", function() {
        // Not on top of the element
        document.write("Hiiri ei ole tekstin päällä");
    });
});
</script>
</body>
</html>

Tuo ensimmäinen tulostus ("Esimerkki:<br>") toimii, mutta mouseover-toiminto ei toimi. Mitä tein väärin?

Macro [01.12.2009 18:15:55]

En löydä koodistasi elementti id:llä elementid. Lisää ennen bodyn lopetusta <div id="elementid">Siirrä hiiri päälle</div>. Lisäksi sinun pitää laittaa head-osioon script src:ksi sivu jolta löytyy JQuery kirjasto.

map_ [01.12.2009 18:17:13]

Onko jQuery ladattu?

timodemus [01.12.2009 18:22:42]

map_: Ei ole ladattu. Enpä huomannut tuota. Lataan sen ja kirjoittelen sitten saanko toimimaan.

sankari [01.12.2009 18:23:33]

Vai meinaatko hiiren koordinaattien perusteella?

<head>
<script type="text/javascript">
function paivitaHiirenTiedot(evt) {
	var divi = document.getElementById("hiiri"); // haetaan div-elementti nimeltä hiiri
	divi.innerHTML = "(" + evt.clientX + "," + evt.clientY + ")"; // asetetaan ko. elementin sisälle (x,y)
}
</script>
</head>
<body onmousemove="paivitaHiirenTiedot(event)">
<div id="hiiri"></div>
</body>

timodemus [01.12.2009 18:34:57]

sankari: Tuolla saan kyllä kätevästi hiiren koordinaatit, mutta miten sitä pitää muokata, että saan divin sisällä olevan koodin vaihtumaan hiiren mennessä divin päälle?

Macro [01.12.2009 18:39:51]

<script>
function paalle() {
	document.getElementById("elementti").innerHTML = "Hiiri on divin päällä.";
}

function pois() {
	document.getElementById("elementti").innerHTML = "Hiiri ei ole divin päällä.";
}
</script>

<div id="elementti" onMouseOver="paalle()" onMouseOut="pois()">Hiiri ei ole divin päällä.</div>

timodemus [01.12.2009 18:46:41]

Kiitos Macro!
Nyt sain koodin toimimaan juuri niinkuin halusin!

Edit: Pystyykö saman toteuttamaan CSS:llä?

Metabolix [01.12.2009 18:51:03]

On ruma tapa kirjoittaa JS-koodin sekaan HTML:ää. Tässä on Prototype-kirjastolla hieman siistimmin toteutettu versio.

<?xml version="1.0" encoding="utf-8"?>
<!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" lang="fi">
<head>
	<title>Esimerkki</title>
	<script type="text/javascript" src="http://prototypejs.org/assets/2009/8/31/prototype.js"></script>
	<script type="text/javascript">
		/* <![CDATA[ */
		Event.observe(window, "load", function() {
			// Näytetään alussa info.
			var info = $("info");
			info.show();

			// Piilotetaan muut osaset.
			$$(".osa").each(function (osa) {
				osa.hide();
			});

			// Laitetaan linkkilistan linkeille toiminnot.
			$$("#linkit a").each(function (a) {
				// Linkin osoitteen #-merkin jälkeinen osa
				// on näytettävän laatikon ID, ks. XHTML.
				var id = a.href.replace(/.*#/, '');
				a.laatikko = $(id);

				// Kun hiiri tulee linkin päälle, piilotetaan
				// infolaatikko ja näytetään tämän laatikko.
				a.observe("mouseover", function (e) {
					info.hide();
					this.laatikko.show();
				});
				// Hiiren poistuessa palautetaan vanha tilanne.
				a.observe("mouseout", function (e) {
					this.laatikko.hide();
					info.show();
				});
			});
		});
		/* ]]> */
	</script>
</head>
<body>
	<h1>Esimerkki</h1>
	<ul id="linkit">
		<li><a href="#juurekset">Juurekset</a></li>
		<li><a href="#leivokset">Leivokset</a></li>
	</ul>

	<div id="info">
		<h2>Info</h2>
		<p>Tällä sivulle on hieno valikko.</p>
	</div>

	<div class="osa" id="juurekset">
		<h2>Juureksia</h2>
		<ul>
			<li>Peruna</li>
			<li>Porkkana</li>
			<li>Lanttu</li>
			<li>Nauris</li>
		</ul>
	</div>

	<div class="osa" id="leivokset">
		<h2>Leivoksia</h2>
		<ul>
			<li>Suklaaleivos</li>
			<li>Mansikkaleivos</li>
		</ul>
	</div>
</body>
</html>

Jonkinlainen toteutus on tietyissä rajoissa mahdollista myös CSS:llä, mutta luultavasti aika moni käyttää niin vanhaa selainta, ettei niin hieno CSS toimi siinä. :)

Macro [01.12.2009 18:53:22]

timodemus kirjoitti:

Edit: Pystyykö saman toteuttamaan CSS:llä?

Ei tekstiä voi muuttaa CSS:llä, mutta voit laittaa #elementti:hover css-määritteitä, jotka ovat käytössä kun hiiri on elementin päällä.

Metabolix. Se oli nyt vaan siinä, koska en jaksanut kirjoittaa niitä erikseen.

timodemus [01.12.2009 18:59:07]

Metabolix: Ihan hieno efekti, tuosta kun saisi vielä toiminnaltaan samanlaisen kuin Macron esimerkki.

Metabolix [01.12.2009 19:02:55]

Et ilmeisesti sisäistänyt vinkin ydintä. Tee kummastakin tekstistä erillinen div ja hiiren liikkuessa piilota yksi ja näytä toinen. Voit laittaa ne vielä ylimääräisen elementin sisään ja liittää hiiren liikkeen tarkkailun tähän ympäröivään elementtiin.

timodemus [01.12.2009 19:35:49]

Kiitos Metabolix!

Tarkoititko näin:

<body>
    <h1>Esimerkki</h1>
<div id="linkit">
        <a href="#juurekset">

    <div id="info">
        <p>Hiiri ei ole elementin päällä</p>
    </div>

    <div class="osa" id="juurekset">
		<p>Hiiri on elementin päällä</p>
    </div>

    </a>
</div>

</body>

Toimii muuten hyvin, mutta entä jos en halua sen näkyvän linkkinä?

vehkis91 [01.12.2009 20:04:57]

Jos vaikka ottaisit ton <a href="#juurekset"> Poist tolta?

timodemus [01.12.2009 20:08:16]

vehkis91: Ei se ihan niin yksinkertaista ole.
Jos sen <a> -tagin ottaa pois eikä tee muutoksia muuhun koodiin niin koko efekti ei enää toimi (kysyin siis sitä, että mitä lisämuutoksia täytyy tehdä).

Metabolix [01.12.2009 20:10:32]

En tarkoittanut noin. Ei a-elementin sisällä saa olla div- ja p-elementtejä. Tarkoitin, että siirrä ne tapahtumankäsittelijät tuolle (sinun koodissasi) linkit-nimiselle elementille, poista href-kikkailut ja muuta vain suoraan $("info")-elementtiä ja $("juurekset")-elementtiä.

Tässä ollaan taas siinä ikävässä tilanteessa, että kysyjä yrittää tehdä jotain omat taitonsa pahasti ylittävää. >_>

timodemus [01.12.2009 20:24:38]

Metabolix: On totta, että tämä asia ylittää tämänhetkiset taitoni (enhän sitä muuten olisi täältä kysellyt), mutta kun saan tämän valmiiksi niin olen jo oppinut jotain. Ongelmana tässä vain on se, että tämä on ensimmäinen JavaScript-koodi, jota yritän väsätä. Monesti opin parhaiten käytännön esimerkkien avulla ja mielestäni tämä on javascript-puolella yksinkertaisimmasta päästä toteuttaa.

Juhko [01.12.2009 20:27:33]

document.write("Hello world!");

= yksinkertainen esimerkki

Metabolix [01.12.2009 20:30:28]

Tämä on aika iso pala ensimmäiseksi JS-koodiksi, kun perusasiatkin ovat ihan hukassa.

JS:llä tässä tapauksessa on helpointa vaikuttaa CSS:ään. Esimerkiksi Prototypen show- ja hide-funktiot asettavat elementeille sopivat CSS-tyylit. Tee siis ensin tuosta sivusta kaksi versiota (ne haluamasi kaksi tilaa), jossa on identtinen HTML mutta erilaiset CSS-tyylit. Sitten lisää sopivan elementin mouseover- ja mouseout-tapahtumiin JS-funktiot, jotka vaihtavat tarvittavat CSS-tyylit.

timodemus [01.12.2009 21:11:21]

Sain koodin toimimaan kun laitoin span -elementin linkin tilalle.

<!-- <?xml version="1.0" encoding="utf-8"?> -->
<!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" lang="fi">
<head>
    <title>Esimerkki</title>
    <script type="text/javascript" src="http://prototypejs.org/assets/2009/8/31/prototype.js"></script>
    <script type="text/javascript">
        /* <![CDATA[ */
        Event.observe(window, "load", function() {
            // Näytetään alussa info.
            var info = $("info");
            info.show();

            // Piilotetaan juurekset
            var juurekset = $("juurekset");
            juurekset.hide();

            $$("#linkit span").each(function (span) {

                // Kun hiiri tulee linkin päälle, piilotetaan
                // infolaatikko ja näytetään tämän laatikko.
                span.observe("mouseover", function (e) {
                    info.hide();
                    juurekset.show();
                });
                // Hiiren poistuessa palautetaan vanha tilanne.
                span.observe("mouseout", function (e) {
                    juurekset.hide();
                    info.show();
                });
            });
        });
        /* ]]> */
    </script>
</head>
<body>
    <h1>Esimerkki</h1>
<div id="linkit">
        <span id="#juurekset">

    <div id="info">
        <p>Hiiri ei ole elementin päällä.</p>
    </div>

    <div id="juurekset">
	<p>Hiiri on elementin päällä.</p>
    </div>

    </span>
</div>

</body>
</html>

Ei ehkä ole ihan kaikkien taiteen sääntöjen mukainen, mutta toimii...

Edit: Tietysti id:t voisi vielä muuttaa eri nimisiksi...

Edit2: ...ja osasin myös poistaa tekemäni span elementin niin, että koodi toimii edelleen

Metabolix [01.12.2009 21:40:16]

Jos vielä tekisit neuvon mukaan ja ottaisit sen ylimääräisen a-elementin (nyk. span-elementin) pois ja liittäisit nuo tapahtumat sen sijaan ympäröivään diviin.

timodemus [01.12.2009 21:43:42]

Metabolix: Tein juuri tuon. Meni vähän aikaa, mutta sain pienellä miettimisellä koodin toimimaan...

<!-- <?xml version="1.0" encoding="utf-8"?> -->
<!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" lang="fi">
<head>
    <title>Esimerkki</title>
    <script type="text/javascript" src="http://prototypejs.org/assets/2009/8/31/prototype.js"></script>
    <script type="text/javascript">
        /* <![CDATA[ */
        Event.observe(window, "load", function() {
            // Näytetään alussa info.
            var info = $("info");
            info.show();

            // Piilotetaan juurekset
            var juurekset = $("juurekset");
            juurekset.hide();

            $$("#linkit").each(function (span) {

               // Kun hiiri tulee linkin päälle, piilotetaan
                // infolaatikko ja näytetään tämän laatikko.
                span.observe("mouseover", function (e) {
                    info.hide();
                    juurekset.show();
                });
                // Hiiren poistuessa palautetaan vanha tilanne.
                span.observe("mouseout", function (e) {
                    juurekset.hide();
                    info.show();
                });
            });
        });
        /* ]]> */
    </script>
</head>
<body>
    <h1>Esimerkki</h1>
<div id="linkit">

    <div id="info">
        <p>Hiiri ei ole elementin päällä.</p>
    </div>

    <div id="juurekset">
		<p>Hiiri on elementin päällä.</p>
    </div>

</div>

</body>
</html>

Metabolix [01.12.2009 21:50:15]