Avatar billede plippert Nybegynder
08. marts 2006 - 11:19 Der er 9 kommentarer og
1 løsning

skiftende baggrund i tabel

Jeg har lavet mig en side hvor et billede skifter i en tabel celle. Det virker fint. Problemet er, at jeg vil have billedet til at være baggrund og ikke et billede indsat på siden.

Er der nogen der gider hjælpe mig?


Se eventuelt projektet på southpawsite.com (der er ikke så meget endnu ;-)

dele af kildekode:

i head:

<script type="text/javascript">

<!--
    // JavaScript to interpolate random images into a page.
    var ic = 12;    // Number of alternative images
    var xoxo = new Array(ic);  // Array to hold filenames
   
xoxo[0] = "/img/random/001.jpg";
xoxo[1] = "/img/random/002.jpg";
xoxo[2] = "/img/random/003.jpg";
xoxo[3] = "/img/random/004.jpg";
xoxo[4] = "/img/random/005.jpg";
xoxo[5] = "/img/random/006.jpg";
xoxo[6] = "/img/random/007.jpg";
xoxo[7] = "/img/random/008.jpg";
xoxo[8] = "/img/random/009.jpg";
xoxo[9] = "/img/random/0010.jpg";
xoxo[10] = "/img/random/0011.jpg";
xoxo[11] = "/img/random/0012.jpg";

 
function pickRandom(range) {
if (Math.random)
return Math.round(Math.random() * (range-1));
else {
var now = new Date();
return (now.getTime() / 1000) % range;
}
}
// Write out an IMG tag, using a randomly-chosen image name.
var choice = pickRandom(ic);
// -->
</script>


Tabel hvori billedet skal være baggrund.

<table width="500" height="100%" border="0">
          <tr>
            <td align="left" valign="top">
                <script type="text/javascript">
document.writeln('<TD'+'><img src="'+xoxo[choice]+'" height=500 width=500 border=0 ><'+'/TD>');</script>
            </td>
          </tr>
        </table>
Avatar billede softspot Forsker
08. marts 2006 - 11:40 #1
Den direkte metode kunne være:

<script type="text/javascript">
  document.writeln('<table width="500" height="100%" border="0" background="'+xoxo[choice]+'">');
</script>
  <tr>
    <td align="left" valign="top">
    </td>
  </tr>
</table>
Avatar billede softspot Forsker
08. marts 2006 - 11:45 #2
En anden lidt kønnere (synes jeg) kunne være:

<script type="text/javascript">
<!--
// JavaScript to interpolate random images into a page.
var ic = 12;    // Number of alternative images
var xoxo = new Array(ic);  // Array to hold filenames
   
xoxo[0] = "/img/random/001.jpg";
xoxo[1] = "/img/random/002.jpg";
xoxo[2] = "/img/random/003.jpg";
xoxo[3] = "/img/random/004.jpg";
xoxo[4] = "/img/random/005.jpg";
xoxo[5] = "/img/random/006.jpg";
xoxo[6] = "/img/random/007.jpg";
xoxo[7] = "/img/random/008.jpg";
xoxo[8] = "/img/random/009.jpg";
xoxo[9] = "/img/random/0010.jpg";
xoxo[10] = "/img/random/0011.jpg";
xoxo[11] = "/img/random/0012.jpg";

 
function pickRandom(range) {
  if (Math.random)
    return Math.round(Math.random() * (range-1));
  else {
    var now = new Date();
    return (now.getTime() / 1000) % range;
  }
}

// Write out an IMG tag, using a randomly-chosen image name.
var choice = pickRandom(ic);

window.onload = function() {
  var tbl = document.getElementById("tbl1");
  if(tbl) {
    tbl.style.backgroundImage = "url(" + xoxo[choice] + ")";
    // hvis billedet ikke skal gentages i baggrunden...
    tbl.style.backgroundRepeat = "no-repeat";
  }
}
// -->
</script>


Tabel hvori billedet skal være baggrund.

<table id="tbl1" width="500" height="100%" border="0">
  <tr>
    <td align="left" valign="top">&nbsp;</td>
  </tr>
</table>
Avatar billede plippert Nybegynder
08. marts 2006 - 17:44 #3
Det kunne ikke være mere perfekt!!!!!
Send et svar og point er dine!

Tak.
Avatar billede softspot Forsker
08. marts 2006 - 17:57 #4
Velbekomme :)
Avatar billede softspot Forsker
08. marts 2006 - 18:06 #5
Hvis dine filnavne er så regelrette som dem du har illustreret her, kan du i princippet undlade at definere et array til dem og bare lægge stien ind i onload-funktionen. Således:

<script type="text/javascript">
<!--
// JavaScript to interpolate random images into a page.
var ic = 12;    // Number of alternative images
 
function pickRandom(range) {
  if (Math.random)
    return Math.round(Math.random() * (range-1));
  else {
    var now = new Date();
    return (now.getTime() / 1000) % range;
  }
}

// Write out an IMG tag, using a randomly-chosen image name.
var choice = pickRandom(ic) + 1;

window.onload = function() {
  var tbl = document.getElementById("tbl1");
  if(tbl) {
    tbl.style.backgroundImage = "url(/img/random/00" + choice + ".jpg)";
    // hvis billedet ikke skal gentages i baggrunden...
    tbl.style.backgroundRepeat = "no-repeat";
  }
}
// -->
</script>
Avatar billede plippert Nybegynder
08. marts 2006 - 18:49 #6
så går jeg ud fra at filerne bare alle skal starte med 00**.jpg.

Pissegodt. Tak igen.
Avatar billede softspot Forsker
08. marts 2006 - 22:52 #7
Det er korrekt og de skal ligge i folderen /img/random
Avatar billede softspot Forsker
08. marts 2006 - 22:56 #8
Tak for point i øvrigt :)
Avatar billede plippert Nybegynder
09. marts 2006 - 08:10 #9
Hvor meget ændring skulle der til for at gøre det til et regulært galleri?
Måske med en funktion der gøre at den skifter billede måske hvert 3. sek og en funktion der giver brugeren mulighed for at selv klikke frem og tilbage?
Og så med links der hedder slideshow on/off...

Jeg opretter selvfølgelig nyt spørgsmål med nye point ;-)
Avatar billede softspot Forsker
09. marts 2006 - 09:53 #10
Tjaa, det er jo en lidt anden opgave end denne her, da brugerens ønsker skal serviceres (og når de bliver blandet ind i sagen bliver den straks mere kompleks :)).
Det er absolut ikke umuligt, men der er bare noget tilstandshåndtering som du ikke har i den nuværende version.

Jeg har desværre ikke lige noget funktionel kode ved hånden, men mon ikke 5 minutter på Google kan give dig det du søger...
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester