webForumDet fria alternativet

Bild "ovanpå" hela sidan

11 svar · 380 visningar · startad av Dashi

DashiMedlem sedan jan. 2005296 inlägg
#1

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>
Peter SMedlem sedan dec. 20025 483 inlägg
#2

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

DashiMedlem sedan jan. 2005296 inlägg
#3

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)

Peter SMedlem sedan dec. 20025 483 inlägg
#4
<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>
DannyMedlem sedan juli 200412 913 inlägg
#5

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

Peter SMedlem sedan dec. 20025 483 inlägg
#6

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?

DannyMedlem sedan juli 200412 913 inlägg
#7

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

DashiMedlem sedan jan. 2005296 inlägg
#8

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 :)

JAreMANNENMedlem sedan aug. 20002 272 inlägg
#9

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 så förstår du nog :)

DashiMedlem sedan jan. 2005296 inlägg
#10

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

Peter SMedlem sedan dec. 20025 483 inlägg
#11

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.

DannyMedlem sedan juli 200412 913 inlägg
#12

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

132 ms totalt · 3 externa anrop · v20260731065814-full.3ab8d573
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
129 ms — hämta tråd, inlägg och bilagor (db)