Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: cursorin kuva vaihtoon ikkunassa

Sivun loppuun

Paulus M [09.02.2010 21:09:10]

#

Eli olisi sellainen kysymys, että miten voisi vaihtaa hiiren kursorin kuvaketta siten, että vaihdettu kursorin näkyisi sellaisenaan koko selaimessa(lukuunottamatta yläpalkkia), eikä vai kohdissa, joissa on jotain elementtejä.

Eli voitte testata, lause document.body.style.cursor = "pointer"(tai css: body{cursor: pointer;}) ei vaihda kursoria, jos kursorin sijainti on taustalla, eli vain kuin liikutetaan jonkun elementin yli, niin vaihdos tapahtuu.

Onko tekniikkaa, miten vaihdos voisi näkyä myös taustalla?

Metabolix [09.02.2010 21:18:33]

#

Kyllä se minulla ainakin vaikuttaa kaikkeen (sivulla tietenkin, ei sen ulkopuolella). Jos haluat säännön pätevän myös niihin elementteihin, joilla on normaalisti muu kursori (kuten tekstilaatikoilla), laita CSS-valitsimeksi bodyn tilalle *. Voit myös listata elementtityypit erikseen (body, div, p, ...).

Paulus M [10.02.2010 05:19:12]

#

Hmmmm...mites voi olla, ei ainakaan tämä testi versioni toimi kuten sanoit internet 8:lla(eikä tainnut toimia aiemmin firefoxillakaan´):

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//ENö

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdö>
<html lang="fi" xmlns=öhttp://www.w3.org/1999/xhtmlö>
<head>
<title>kursori testi</title>


</head>

<body>
<script language="javascript">
document.body.style.cursor = "pointer";
</script>


<div>
täälläpä sitten toimii ja kursori on tosiaan pointteri. Muuallapa ei näyttäis.
</div>
</body>
</html>

Metabolix [10.02.2010 12:07:48]

#

Jos nyt alkajaisiksi korjaisit lainausmerkit normaaleiksi "-merkeiksi DOCTYPE- ja html-riveiltä.

Veikkaan, että IE:llä toimimattomuus johtuu ainakin joiltain osin puutteesta CSS-tuessa:

http://www.w3schools.com/CSS/pr_class_cursor.asp:

Note: No versions of Internet Explorer (including IE8) support the property value "inherit".

Miksi yrität asettaa kursorin JS:llä, kun kyseessä on selvästi CSS-ominaisuus?

* {
  cursor: pointer;
}

Jos haluat vaihdella kursoria, voit tehdä joka kursorille CSS-luokan ja vaihtaa JS:llä body-elementin luokkaa (body.className) tarpeen mukaan.

.pointer, .pointer * {
  cursor: pointer;
}
<body class="pointer">

Paulus M [10.02.2010 14:50:41]

#

No nyt tein muutoksia, mutta vieläkään ei IE:llä, eikä myöskään Firefoxilla toimi(taitaa olla 3.6 versio).

Eli koodi näyttää tältä:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fi" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Medieval Tournament</title>
<link rel = "stylesheet" type = "text/css" href = "testi.css">
</head>

<body class="pointer">
<div>
täällä toimii
</div>
</body>
</html>

.....PLUS CSS
.pointer
{
	cursor: pointer;
}

Sen takia vaihdan Javascriptillä kursoria, koska joudun vaihteleen sitä pitkin poikin kesken ohjelman suorituksen.

Macro [10.02.2010 15:23:43]

#

=-merkin ympärille ei kuulu välejä.

Paulus M [10.02.2010 15:45:15]

#

Joo, ei tosiaan tuukkaan, kiitti huomiosta. Mutta ei silti vaikuta lopputulokseen...

Metabolix [10.02.2010 16:33:42]

#

Hukkaan menevät hyvät neuvot, kun ei niitä näköjään lueta kunnolla. Ei ole kovin monta riviä, joten lue vaikka kaikki uudestaan.

Paulus M [10.02.2010 18:13:19]

#

Pahus, en kyllä millään keksi, että mitä olen tehnyt väärin ja miksi ei toimi.
Olen kokeillut nyt kaikki mahdolliset läpi ja lukenut monen kertaan ohjeet, laittanut CSS:ään: *{cursor:pointer;}
ja noi kaikki muutkin mahdollisuudet mitä olet pistänyt ja en saa vieläkään tuota kursoria näkymään kuin vain elementeissä. Ja kuitenkaan ei toimi edes Firefoxilla....

En sitten tiedä onko bodyBackground sitten joku erillinen elementtityyppi, jota voisi jotenkin säädellä.

Metabolix [10.02.2010 18:33:53]

#

Koodisi, ole hyvä. Punaisella on merkitty body-elementin raja, ja kursori on kuin onkin sen sisällä pointer. Millä tavalla tämä ei toimi? Entä mitä ongelmia on ehdottamassani *-versiossa?

Minulla itse asiassa kummatkin versiot toimivat sekä Fx:llä (3.6) ja IE:llä (6.0).

Jos ongelmasi onkin koko ajan ollut, että body-elementin koko on väärä (kuten noilla esimerkkisivuilla), mikset ole testannut ja kertonut asiaa? Siihen taas ratkaisuksi sopii koon määrittäminen:

html, body {
  width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0;
}

Jos tästä seuraa ongelmia sivun reunojen kanssa, voi olla helpointa sijoittaa sivun kaikki sisältö ylimääräisen div-elementin sisään.

Paulus M [12.02.2010 02:19:18]

#

Ai joo sori Metabolix, testailin tuota mutta en huomannut, että oli kysymys vain tuosta body elementin koosta. Jotenkin oli vaan alitajunnassa, että body elementti on aina ikkunankokoinen - taas tuli virheitä tiedon puutteesta, pitäisi enemmän lukea teoriaa. Sori ku joudun vaivattaa sua näin paljon.

Mutta hullut kiitokset tästä vaivasta, mitä näet! Jätkä on fiksu kaveri ja sun pitäisi jakaa oikeasti noita arvokkaita neuvojasi 40 euron tuntipalkalla, pääsit vissiin toiseksi tuossa pomppis tekoäly kilpailussakin hyvin pienellä koodirivi määrällä.


Sivun alkuun

Vastaus

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

Tietoa sivustosta