Keskustelu: Nettisivujen teko: Miten yhdistän js ja php koodit?

Hei kaikki,
teen nettisivuston, jossa etusivulla yhdellä div:illä toimii js koodinpätkä, joka arpoo aina sivun latautuessa uuden bannerin:

<script type = "text/javascript">
      function banneri() {
      var bannerit=new Array();
      bannerit[1]="pic";
      bannerit[2]="pic2";
      bannerit[3]="pic3";
      bannerit[4]="pic4";
      var rand=Math.round(Math.random() * (bannerit.length -2) + 1);
      var arvottu='<a  class="'+ bannerit[rand] + '"></a>';
      document.write(arvottu);
      }
      banneri();
</script>

Mutta samaan div:iin haluan php koodin, jonka sisältö toimii toiminnallisina linkeinä muualle. Ongelmana on se, että en pysty keksimään, miten teen edellä mainitut kuvat taustana, joiden päällä voisi näkyä php koodi? Onko se edes mahdollista? Kaikki vinkit ovat tervetulleita!

p.s. sorry kirjoitusvirheistäni, suomen kieli on mulle vieräs kieli :)

Miksi teet tuon JavaScriptillä? Sitä käytetään sivun latautumisen jälkeen tapahtuviin juttuihin, mutta HTML:n tulostamiseen PHP on paljon parempi. En osaa antaa valmista koodia, kun jäi aika epäselväksi, mitä olet tekemässä. Jos vaikka antaisit esimerkin siitä, miltä skriptin tulostaman HTML:n pitäisi näyttää.

Viilataan vielä pilkkua tuosta JavaScriptistä. Tässä parempi tapa arpoa satunnainen merkkijono:

// Taulukon saa luotua kätevämmin näin. Ensimmäisen alkion indeksi on 0 eikä 1.
var bannerit = ["pic", "pic2", "pic3", "pic4"];
// Math.floor eikä Math.round -- jälkimmäinen antaa epätasaisen jakauman.
var rand = Math.floor(Math.random() * bannerit.length);
var merkkijono = bannerit[rand]:

2 funktio:

funktio kirjoitti:

... Jos vaikka antaisit esimerkin siitä, miltä skriptin tulostaman HTML:n pitäisi näyttää.

yritän selittää:

etusivu.php:lla on <div id="left"> jossa on edellä mainittu js- koodi. sitten seuraa php koodi:

<?php
if(isset($_SESSION['logged'])){
$viesti="Tervetuloa " . $_SESSION['etunimi'] . " " . $_SESSION['sukunimi']. " " . $_SESSION['organisaatio']. "!";
echo "$viesti";

ja sitten tulee muutama jos:

<?php
if (($_SESSION['ryhma'] !="kayttaja")){
}
else {
echo '<a href="index.php?sisalto=dokumentit"> Dokumentit</a>'; }

if ($_SESSION['ryhma'] !="admin"){
}
else {
echo '<a href="index.php?sisalto=dokumentit">Dokumenttien hallinta</a>';
echo '<a href="index.php?sisalto=kayttajat"> Käyttäjien hallinta</a>';
...
?>

Jos katson sivun selaimella, banner vaihtuvilla kuvilla on sivun "ylhalla" ja sitten seuraavat ne php koodin linkit echo ''; eli kaikki tulostuu sarakkeelle. Mutta minä haluan, että php koodin tulostus tulee päällekkäin js koodin tulostukselle eli ne kuvat ovat taustakuvina echo ''; linkkeille! Ei onnistu niitä yhdistää...

Ymmärsitkö nyt, mitä minä teen? :)

Mikäli minä nyt oikein tajusin, niin tuo ei ole mahdollista, koska kuvat ovat omia elementtejään, eikä toisen elementin päälle sijoittaminen ole mahdollista ilman css-asettelua. Joudut siis laittamaan noille teksteille sopivat top ja left arvot, jotta ne asettuvat sopivasti kuvan päälle.

Toinen vaihtoehto on muokata js:ä kyseisen divin taustakuvaa. backgroud-image ominaisuutta, joka voisi olla semanttisestikin oikeampi tapa vs. kuvan asettaminen? Tämä lienee jo enämpi makuasia.

Yeees!
minua autoi z-index!

2 Teuro: minulla on monta kuvaa, joita js-koodilla pistin vaihtoon kun sivun päivitetään, onko mahdollista asettaa niitä backgroud-image:ksi???

Tietenkin on mahdollista

javascriptillä:

ImgPath = "kuva.jpg"; // satunnaisesti valittu kuva

var ImgURL = "url(" + ImgPath + ")";
var elementti = document.getElementById("haluamasi_elementti_id");
elementti.style.backgroundImage = ImgURL;

Itse kyllä laittaisin tuon mieluummin silti php:lla, koska haluat tuon päivittymään vain sivun latauksessa.

Inline-stylellä:

<?php
$kuvaUrl = "kuva.jpg"; // satunnaisesti valittu kuva
echo '<div class="cssluokka" style="background-image: url('.$kuvaUrl.');">...</div>';
?>

Tai kuvat määriteltynä css-tiedostoon (esim. cssluokka_1, cssluokka_2, ...):

<?php
$kuvaUrl = 3; // satunnaisesti valittu kuvan numero

echo '<div class="cssluokka_'.$kuvaUrl.'" >...</div>';
?>

Eli jos halutaan kuvan muuttuvan vain kun sivu päivitetään, niin PHP on mielestäni paras vaihtoehto:

<?php
//Luodaan array kuvatiedostoille.
$kuvat = array('kuva1.gif', 'kuva2.gif', 'kuva3.gif');
//Arvotaan kuva: Arrayn minimi on 0, ja maksimi arrayn kenttien määrä - 1, koska array alkaa nollasta.
$kuva = rand(0, sizeof($kuvat) - 1);
//Tulostetaan kuva
echo "<div id='id' style='background-image: url('$kuvat[$kuva]')'>...</div>";
?>

Edit. Lyhensin koodia

Korvaa nyt ihmeessä rivi

$kuva = rand(0, sizeof($kuvat) - 1);

rivillä:

$kuva = array_rand($kuvat);

Sillä ei ole kyllä kovin paljon eroa, mutta onhan tuo muutaman merkin lyhyempi.

Ps. En tiennyt tuollaisesta funktiosta.

Kiitoksia kaikille vastanneille,
Ongelmani on ratkaistu!