Jump to content
Just nu i M3-nätverket

Javascript i en css.


Affe Byberg

Recommended Posts

Affe Byberg

Hej på er.

 

Jag skulle vilja lägga in ett randomscript för bilder i css:en men jag vet inte om det är möjligt. Jag har randomscriptet men jag vet inte hur det ska skrivas i css:en.

 

Är det någon av er därute som vet om det är möjligt och hur det i så fall ska skrivas?

 

Affe

Link to comment
Share on other sites

Hej på er.

 

Jag skulle vilja lägga in ett randomscript för bilder i css:en men jag vet inte om det är möjligt. Jag har randomscriptet men jag vet inte hur det ska skrivas i css:en.

 

Är det någon av er därute som vet om det är möjligt och hur det i så fall ska skrivas?

 

Affe

 

Vad vill du ska hända, egentligen? Du vill att bilder ska visas slumpmässigt? Det har inte så mycket med CSS att göra och går att göra i javascript som inte behöver ligga i CSSfilen.

Link to comment
Share on other sites

Affe Byberg

Hej, och tack för att du svarar :-)

 

Jag ser nu att jag var väldigt otydlig när jag skrev min fråga.

Jag har lagt in en bakgrundsbild i css:en och skulle vilja att den byttes med en random. Jag skulle - om möjligt - vilja att allt sköttes från css:en istället för att lägga in javascript-anropet på html-sidorna.

Det kanske inte är möjligt, men någon av er därute kanske har provat eller vet mer.

 

Affe

Link to comment
Share on other sites

Du kan inte ha JavaScript i en CSS-fil. Det hör du bara på namnet. En Cascading StyleSheet-fil kan inte köra script.

 

Jag skulle rekommendera att du har en DIV med en bakrundsbild, och att den randomiserat byts ut.

 

Om du vill slippa massa script i HTML-filen kan du göra en extern .js-fil med alla script i och sedan inkludera den.

Link to comment
Share on other sites

document.getElementById("elementMedBakgrundsbild").style.backgroundImage = "url(annanBild.png)";

En Array med bildnamn behövs förstås för att växla mellan olika bilder.

 

Anropa funktionen från onload med setInterval() lagom ofta.

Link to comment
Share on other sites

Du kan använda en php i din css-fil, ungefär såhär:

 

<? 
header("Content-type: text/css")

function random_image() {
$images = array("foo.jpg", "bar.jpg", "baz.jpg");
return $images[rand(0, sizeof($images) - 1)];
}
?>

div.foo {
width: 100px;
height: 100px;
background-image: url(<?= random_image() ?>);
}

Link to comment
Share on other sites

Oj, "du kan använda php", inte "du kan använda en php" :)

Dessutom, om jag var otydlig: tanken är alltså att du sparar filen med .php som ändelse och låter servern exekvera den, men länkar in den som en vanlig css-fil.

Link to comment
Share on other sites

Frågan är väl om det är så att bilden ska växla innan sidan laddats eller om den ska växla medans man tittar på sidan?

 

Alltså:

 

1 - Sidan ska visas med olika bilder beroende på t ex vilket tid på dygnet det är. Då kan man använda php.

 

2 - Bilden ska växla med ett visst intervall efter att sidan laddats. Då behövs Javascript.

 

Vi kanske ska börja med att komma på vad det är vi försöker göra?

Link to comment
Share on other sites

Affe Byberg

Hej igen.

 

Tack till HannesP för ditt svar.

Jag ska förtydliga mig. Jag har en .css och jag har en .js. I css:en har jag lagt in en bakgrundsbild och jag tänkte - om det är möjligt - låta css:en byta bakgrundbild med en randomfunktion varje gång sidan laddas (och bara när den laddas). Om det går att göra med javaScript eller med Php i css:en - det vet jag inte. Jag undrar om någon i forumet vet eller har provat. Ni kanske tycker det är onödigt när jag redan har en .js, men jag är nyfiken på om det går att styra från ett ställe, via css. Om det inte går så blir det javaScript via html-dokumentet.

 

Affe

Link to comment
Share on other sites

Finns ett gäng sätt du kan göra detta på:

 

1) Definiera flera klasser som du ger gemensam CSS, fast olika bakgrundsbilder. Slumpa därefter ett heltal på framsidan:

 

.img1, .img2, .img3, .img4, .img5
{
width: ... px;
}

.img1
{
background-image: url(...);
}

.img2
{
...
}
--
<div class="img<?=rand(1, 5)?>"></div>

 

2) Använd en PHP fil i CSS-filen. Är dock ej säker på hur browser-cachen fungerar då.

.img
{
background-image: url(images/bild_<?=rand(1, 5)?>.png);
}

 

3) Använd java script: (( << jag skrev det där som sammanhängande! ))

document.onload = function()
{
var b = document.getElementByTagName("body")[0];
if (!b)
	return;

b.style.backgroundImage = "url(images/bild_"+Math.floor(Math.random() * 5 + 1)+".png)";
}

 

4) Använd HTML & PHP

<body background="images/bild_<?=rand(1, 5)?>.png">

 

Finns säkert fler sätt, men slutar jobb nu!

Link to comment
Share on other sites

Affe Byberg

Hej igen.

 

Tack Zanathel för dina förslag. Jag har testat en variant av förslag 1 och 2 (jag får det inte att fungera så det går kanske inte att blanda dem).

 

Så här ser det ut i css:en (sparad som .css):

 

.bg_1, .bg_2, .bg_3, .bg_4, .bg_5 { width: 700px; }

.bg_1 { background-image: url(bilder/bg_1.jpg); }

.bg_2 { background-image: url(bilder/bg_2.jpg); }

.bg_3 { background-image: url(bilder/bg_3.jpg); }

.bg_4 { background-image: url(bilder/bg_4.jpg); }

.bg_5 { background-image: url(bilder/bg_5.jpg); }

#main { 
float: left; 
width: 700px; 
background: rgb(255,255,255); 
border-left: solid 1px rgb(200,200,200); 
border-right: solid 1px rgb(200,200,200); 
background-image: url(bilder/bg_<?=rand(1, 5)?>.jpg);  
background-repeat: no-repeat; 
background-position: top right ; 
background-attachment: fixed; z-index: 1; }

 

Som sagt så får jag det inte att fungera :( . Men nu har min semester börjat så jag har lite mer tid att grotta ner mig i era förslag B) .

 

Affe

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...