Sivustolla on mahdollista saada automaattisesti esiin auki olevan sivun ID-numero. Tätä hyödyntämällä yritän saada div-laatikon taustakuvan vaihtumaan erilaiseksi eri ID:n omaaville sivuille.
Olen koettanut tällaista yksinkertaista ratkaisua:
js-tiedoston sisältö
var ID;
function funktio()
{
if(ID == 3)
{
document.write("<div id=\"box\" style=\"background: url(../i/background.jpg) no-repeat; width: 960px; height: 240px;\">");
// laatikon sisältö
document.write("</div>");
}
}xhtml-sivun sisältö:
<script type="text/javascript"> ID = x; funktio() </script>
Jossa siis x on sivun ID-numero, jonka saan paikoilleen automaattisesti.
Onko tuo hyvä ratkaisu vai löytyykö parempi/helpompi toteutustapa? Jostain syystä taustakuva ei kuitenkaan näy. Kaikki div-laatikon sisällä oleva materiaali näkyy ja toimii oikein sekä laatikon koko on haluttu 960*240 eli taustakuva on ainoa, joka ei toimi. Missä mahtaa mennä pieleen?
Mainittakoon vielä, että PHP:tä ei voi käyttää, joten tuo pitää toteuttaa Javascriptillä. Olen vielä melko vasta-alkaja Javascriptin käytössä, joten toivoisin 'rautalangasta väännettyä' vastausta. Kiitos.
backgound-image: (url: 'kuva.jpg')
pelkkä background pitäisi toimia yhtälailla, sillä se on pikakirjoite, jolla voidaan samalla kertaa määritellä background-image, background-repeat, background-attachment ja background-position. Kokeilin tästä huolimatta myös pelkkää background-image:a ja sekään ei (odotetusti) toiminut.
Miksihän minusta tuntuu, että virheeni, jonka vuoksi tuo ei toimi, on kuitenkin loppuenlopuksi yhtä yksinkertainen (ja nolo) kuin "background -> background-image".. Ei olisi ollenkaan epätavallista minulle.
1. Tarkista onko kuva olemassa.
2. Tarkista onko id 3 vai joku muu
3. Jos ei auta, tee style.css tiedosto jonne määrittelet vaikka seuraavaa:
div {
background-image: url('../i/background.jpg') no-repeat;
width: 960px;
height: 240px;
}Ihan en suosittelisi document.writen käyttöä, vaan ennemminkin:
<html>
<head>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var ID = 3;
funktio();
function funktio()
{
if(ID == 3) {
document.getElementById("box").style.background="url(../i/background.jpg) no-repeat";
document.getElementById("box").style.width = "960px";
document.getElementById("box").style.height = "240px";
}
}
</script>
</body>
</html>Kokeile ees...
edit.Paratiisipojan viestiin... (kohta 1): Jos kuvamuuttuja ei ole dynaaminen niin minne ihmeeseen häviäis se tiedosto sieltä kesken kaiken? Jos on niin alert-juttua olen tällaisissa erikoisissa tapauksissa yleensä käyttänyt debuggausvaiheessa... (kohta 2): Jos divin sisältökin asetetaan if-rakenteen sisällä niin ei auta mitään, muussa tapauksessa sinänsä ihan hyvä neuvo että jos epäilet näitä perus-sähellysvirheitä niin lisää esim kohta else {alert "virheellinen id";}... (kohta 3): miten vaihtaisit sit kätevästi css-tiedostoa per eri id-sivut?
1. en ymmärtänyt
2. en ymmärtänyt
3. en tiedä. ymmärsin juuri ja juuri.
Niin nämä Paratiisin poika:n kohdat ovat perusjuttuja. Osaan xhtml:ää ja css:ää varsin hyvin, joten tuollaiset virheet olisivat todellakin sellaisia huolimattomuusvirheitä..
Kommenttia raakalihan kohtien 1-3 antamiin vastauksiin:
1. Minäkään en ymmärtänyt mitä tarkoitit tuolla, mutta kuva on kyllä olemassa.
2. En ymmärtänyt miksi ei auta mitään, jos divin sisältö on asetettu if-rakenteen sisällä, mutta muun osan tajusin. ID on kyllä oikein, joten siitäkään tämä ei voi johtua.
3. Ymmärsin ja samaa itsekin mietin kohdan luettuani. Ei tulisi tässä tapauksessa toimimaan kätevästi.
document.getElementById.. Arvasin itsekin, ettei document.write ole paras mahdollinen tapa tehdä tuota, mutta parempaakaan en osannut. Kokeilen tuota neuvoasi ja ilmoittelen kohta miten kävi.
edit. Noilla eri sivuilla myös laatikon sisältö täytyy vaihtua. Tällä tavalla ei taida vaihtua? Tuota ei varmaan paljoa tarvitsisi muuttaa, jotta myös sisältö vaihtuisi sivun vaihdon mukana (sisältö olisi siis Javascriptin sisällä, kuten ensimmäisessä esimerkissäni)? Jostain syystä en vain silti osaa..
Funktio document.write kannattaa unohtaa saman tien, käytännössä kaikkeen on parempikin tapa.
JS:n kannalta yksinkertaisin ratkaisu olisi kyllä erillisen CSS-tiedoston käyttö joka sivulle.
<!-- HTML (head) -->
<link href="tyyli0.css" rel="stylesheet" type="text/css" id="tyyli" />
<script type="text/javascript">
var id = 123;
document.getElementById("tyyli").href = "tyyli" + id + ".css";
</script>Tai:
<script type="text/javascript">
var id = 123;
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "tyyli" + id + ".css";
document.getElementsByTagName("head")[0].appendChild(link);
</script>Tyylitiedoston vaihtaminen link-elementin href:iä muuttamalla ei toimi luotettavasti kaikissa (uusissakaan) selaimissa. Varmempi tapa on luoda uusi link-elementti.
Erillisen css-tiedoston käyttö eri sivuilla taitaa olla liian vaikeaa, sillä joutuisin tekemään jo tässä vaiheessa 10 eri css-tiedostoa ja tulevaisuudessa ehkä lisää. Helpompihan olisi muuttaa vain yhtä ja samaa js-tiedostoa, jossa olisi jokaisen sivun laatikon taustat ja sisällöt.
Kokeilisin tuota raakalihan neuvomaa tapaa, jos osaisin vaihtaa jokaiselle sivulle taustan lisäksi myös sisällön. Tuossa esimerkissähän laatikon sisältö ei vaihdu? Olisiko neuvoja miten tuota koodia pitäisi muuttaa?
Jos ymmärsin kysymyksesi oikein, niin laatikon sisältö vaihdetaan document.getElementById("box").innerHTML = "teksti";
AkeMake kirjoitti:
Erillisen css-tiedoston käyttö eri sivuilla taitaa olla liian vaikeaa, sillä joutuisin tekemään jo tässä vaiheessa 10 eri css-tiedostoa ja tulevaisuudessa ehkä lisää. Helpompihan olisi muuttaa vain yhtä ja samaa js-tiedostoa, jossa olisi jokaisen sivun laatikon taustat ja sisällöt.
Olisikohan mahdollista laittaa joka sivulle tuolle diville eri id? Sitten voisit laittaa yhteen CSS-tiedostoon nuo spessukuvat yms. En keksi, mihin ratkaisussa tarvitaan javascriptiä. Se id on joka tapauksessa laitettava jonnekin kohtaa sivulla. Samalla vaivalla sen pistää jonkun HTML-elementin class- tai id-attribuutiksi.
HTML:
<div class="kuvaloota" id="pageid_XXX"> </div>
CSS:
div.kuvaloota {
width: 960px;
height: 240px;
}
/* lista taustakuvista */
div#pageid_3 {
url('../i/background.jpg') no-repeat;
}
div#pageid_1 {
url('jokumuu.jpg') no-repeat;
}Id:n ei ole pakko olla tuossa samassa elementissä. Ihan hyvin sen voi laittaa johonkin ylemmän tason elementtiin ja käyttää sitä sitten näin:
#pageid_3 div.kuvaloota {
url('../i/background.jpg') no-repeat;
}
#pageid_1 div.kuvaloota {
url('jokumuu.jpg') no-repeat;
}Aihe on jo aika vanha, joten et voi enää vastata siihen.