---
title: "Bild \"ovanpå\" hela sidan"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/154399-bild-ovanpå-hela-sidan"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Dashi"
published: "2006-12-01T10:58:07.000Z"
updated: "2006-12-01T22:11:45.000Z"
replies: 11
views: 393
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/154399-bild-ovanpå-hela-sidan"
---

# Bild "ovanpå" hela sidan

## #1 — Dashi, 2006-12-01T10:58Z

Det jag skulle vilja är att lägga en bild längst ner på sidan och som ska läggas "top" på alla frames och bilder o.s.v, har ett liknande script som har samma princip förutom att dom har lagt snöflingor som faller neråt och som ligger "top" över alla bilder och frames och allt.

Så kollar man scriptet här nedan så ska det vara precis samma i princip fast det endast ska vara en bild och den ska ligga still längst ner på sidan.

Nån som e duktig på javascript som kanske kan göra om koden nedan, skulle vara väldigt tacksam.

```
<SCRIPT LANGUAGE="JavaScript1.2">
 
var no = 50; // snow number
var speed = 0; // smaller number moves the snow faster
var snowflake = "flinga1.gif";
 
var ns4up = (document.layers) ? 1 : 0;  // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp;    // coordinate and position variables
var am, stx, sty;  // amplitude and step variables
var i, doc_width = 1325, doc_height = 80;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i < no; ++ i) {  
dx[i] = 0;                        // set coordinate variables
xp[i] = Math.random()*(doc_width-50);  // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;         // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random();     // set step variables
if (ns4up) {                      // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
   }
} else if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
      }
   }
}
function snowNS() {  // Netscape main animation function
for (i = 0; i < no; ++ i) {  // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}
function snowIE() {  // IE main animation function
for (i = 0; i < no; ++ i) {  // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-24) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()", speed);
}
if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
// End -->
</script>
```

Permalänk: https://www.webforum.nu/p/154399

## #2 — Peter S, 2006-12-01T11:53Z

Hur får du det där att fungera över frames? Kan du visa ett sådant exempel?

Permalänk: https://www.webforum.nu/p/1903717

## #3 — Dashi, 2006-12-01T12:42Z

Jag användar mig av iframes om man ska vara mer exakt, visst det ligger på min sida för tillfället så bara att kolla ([www.eternity.3w.se](http://www.eternity.3w.se))

Permalänk: https://www.webforum.nu/p/1903735

## #4 — Peter S, 2006-12-01T13:23Z

```
<script type="text/javascript">
var div, divHeight = 150;
window.onload = function()
{
  divHeight = 150;
  div = document.getElementById("d");
  div.style.top  = (document.body.clientHeight - divHeight) + "px";
  div.style.left = "0px";
  div.style.visibility = "visible";
  window.setInterval("bl()", 10);
}
function bl()
{
  div.style.top  = (document.body.scrollTop + document.body.clientHeight - divHeight) + "px";
}
</script>
<body>
<div id="d" style="position:absolute; border:1px solid #777; height:150px; width:250px; visibility:hidden">hello world!</div>
<p>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>hej
</p>
</body>
```

Permalänk: https://www.webforum.nu/p/1903744

## #5 — Danny, 2006-12-01T13:51Z

Jag gjorde ett lager med min pippifågel:

```
<div id="Layer1" style="position:absolute; z-index:1; left: 75%; top: 11px;"><img src="bird.gif" width="171" height="139" border="0"></div>
```

ha rätt z-index bara

Permalänk: https://www.webforum.nu/p/1903749

## #6 — Peter S, 2006-12-01T13:54Z

Men den lägger sig inte längst ned till vänster på sidan. Dessutom, vad händer om du scrollar sidan - följer lagret med?

Permalänk: https://www.webforum.nu/p/1903751

## #7 — Danny, 2006-12-01T15:52Z

svarade du på mitt?

Du ändrar ju dessa parametrar:

*left*: 75%; *top*: 11px

där har jag dessutom blandat px och %

*position* kan man ändra också, jag har satt den på absolute... kolla min sida, fågeln där

Permalänk: https://www.webforum.nu/p/1903774

## #8 — Dashi, 2006-12-01T17:37Z

Tack för hjälpen tyckte faktist denna funkade bra och enkelt och den va enkel att anpassa osså så gjorde om den lite som jag ville ha den

```
<div id="Layer1" style="position:absolute; z-index:1; left: 0px; bottom: 0px;"><img src="snow.gif" width="100%" height="40" border="0"></div>
```

Kolla gärna resultatet på sidan det blev faktist väldigt bra :)

En lite sak bara vad har man "z-index:1;" till? för om jag plockar bort det gör det ingen skillnad :)

Permalänk: https://www.webforum.nu/p/1903805

## #9 — JAreMANNEN, 2006-12-01T18:01Z

> **Dashi skrev:**
>
> En lite sak bara vad har man "z-index:1;" till? för om jag plockar bort det gör det ingen skillnad :)

z-index bestämmer prioriteten på dina element.

[Kolla här](http://www.w3schools.com/css/tryit.asp?filename=trycss_zindex1) så förstår du nog :)

Permalänk: https://www.webforum.nu/p/1903810

## #10 — Dashi, 2006-12-01T18:57Z

aha då förstår jag tack för hjälpen :)

Permalänk: https://www.webforum.nu/p/1903819

## #11 — Peter S, 2006-12-01T22:07Z

> **Danny skrev:**
>
> svarade du på mitt?
> 
> Du ändrar ju dessa parametrar:
> 
> *left*: 75%; *top*: 11px
> 
> där har jag dessutom blandat px och %
> 
> *position* kan man ändra också, jag har satt den på absolute... kolla min sida, fågeln där

Japp! Uppenbarligen missförstod jag trådskaparen. Som jag uppfattade det skulle bilden ligga kvar längst ned på sidan - även vid scrollning.

Permalänk: https://www.webforum.nu/p/1903853

## #12 — Danny, 2006-12-01T22:11Z

man kan nog ha den flytande också på nåt vis... kolla här:
<http://www.echoecho.com/csslayers.htm>

Permalänk: https://www.webforum.nu/p/1903855

---

Tråden på webben: https://www.webforum.nu/amne/javascript/154399-bild-ovanpå-hela-sidan