Keskustelu: Nettisivujen teko: Liikkuva kuva JavaScript

Eli pitäisi saada sellainen JavaScript että:
Kun klikkaa hiirellä niin kuva siirtyy siihen kohtaan mistä viimeksi klikkasi, jne, jne.

Onnistuuko tuollainen JavaScriptillä?

Kiitos. :)

// Tuota.. Eikös tuon scriptin eteen pidä laittaa <script type="javascript">?

Kyllä siihen kuuluu (Itseasiassa language?), eli

<script language="javascript">
window.onclick = function (e) {
  if (!e) e = window.event;
  var x = document.getElementById("x");
  x.style.left = e.clientX + "px";
  x.style.top = e.clientY + "px";
  x.style.display = "block";
}
</script>

Hmm... jostainsyystä ei toimi. :I
Pitääkö 'px' tilalle laittaa jokin numero?

Minusta skriptit on selkeintä pitää omissa tiedostoissaan eikä HTML:n seassa.

Mitähän selainta mahdat käyttää? IE:llä on vakavia asenneongelmia position: fixed -määreen kanssa ja joudut kehittelemään sitä varten erilaisen koodin. Käsittääkseni img-tagi pitää sijoittaa suoraan body-elementin sisään, fixed pitää vaihtaa absoluteksi ja e.clientX:ään ja e.clientY:hyn pitää lisätä vastaavasti document.body.scrollLeft ja document.body.scrollTop. En kuitenkaan ole IE:n sielunelämään tässä asiassa perehtynyt, joten voisit harrastaa hieman omatoimisuutta mm. tämän sivun ja muiden sivuston ohjeiden tuella.

Lisäksi kaikki selaimet eivät tue window.onclick-tapahtumaa, joten kannattaa ehkä käyttää myös document.body.onclickia.

Juu. :P
Käytän Firefoxia..

Firefoxilla toimi kyllä alkuperäinenkin koodi. Seuraava versio kuitenkin kelpaa sen lisäksi myös IE:lle.

document.body.onclick = function (e) {
  if (!e) e = window.event;
  var x = document.getElementById("x");
  x.style.left = document.body.scrollLeft + e.clientX + "px";
  x.style.top = document.body.scrollTop + e.clientY + "px";
  x.style.display = "block";
}

<img id="x" src="x.png" alt="" style="position: absolute; display: none" />

Juu toimii.
Olin pistänyt väärän kuvan nimen '-.-
:D
Kiitos.

(pystyykö tuosta tekeen sellaista että kuva liikkuu klikattuun kohtaan, ettei vain ilmestyisi siihen)

Pähkinä kirjoitti:

Kiitos. :)

// Tuota.. Eikös tuon scriptin eteen pidä laittaa <script type="javascript">?

Script-elementti (<script>) vaatii tosiaan type-attribuutin, joka ilmoittaa media- eli MIME-tyypin. Javascriptille tämä olisi application/javascript, tosin myös text/javascript kelpaa. Javascriptin erottaminen merkintäkielestä omaan tiedostoonsa on suotavaa.

Pähkinä kirjoitti:

(pystyykö tuosta tekeen sellaista että kuva liikkuu klikattuun kohtaan, ettei vain ilmestyisi siihen)

Pystyy.

Juu tää toimii hyvin. :)

Pähkinä kirjoitti:

(pystyykö tuosta tekeen sellaista että kuva liikkuu klikattuun kohtaan, ettei vain ilmestyisi siihen)

Jollei ole välttämätöntä laittaa JavaScriptillä, niin voisiko sen laittaa cursoriksi CSS:llä? (Ei liiku sinne kylläkään, vaan hiiren kuvana)

body {
cursor: url("cursor.ico");
}

Tässähän haluttiin, että kuva liikkuu klikattuun kohtaan. Eli ei noin.

Pähkinä kirjoitti:

(pystyykö tuosta tekeen sellaista että kuva liikkuu klikattuun kohtaan, ettei vain ilmestyisi siihen)

Tuo on helppo toteuttaa esimerkiksi jqueryllä.

Kas näin

$(document).click(function(event){
	$("#kuva").animate({
		left: event.pageX + "px",
		top: event.pageY + "px"
	}, "fast" );
});

Ja sitten

<img id="kuva" src="naama.png" style="position: absolute" />