Byta bilder

hobbywebbisen · 2011-02-19, 18:46

Om jag har en bild på ett ställe på t. ex index-sidan - men vill att bilden skiftar till 2 alt 3 andra bilder löpande utan att använda Flash - hur går jag då tillväga?

Alla bilderna har exakt samma storlek.

tnek · 2011-02-19, 18:53

Isåfall låter Easy Slider som något för dig: http://cssglobe.com/post/5780/easy-s...-jquery-slider

P3N · 2011-02-20, 11:45

Görs enkelt med javascript. Lägg bilden som en bakgrund i en div. Gör en timeout som skiftar bild på bakgrunden på din div. Krävs rätt lite kod för det. Inget behov av jquery för en sådan liten funktion.

hobbywebbisen · 2011-02-20, 11:47

Nja, det var ingen "Slider" jag var ute efter - nåt som gör att den "fasta" bilden på sidan byter till en annan på samma plats. Gör man nån sorts länk till en annan bild då eller?

P3N · 2011-02-20, 12:12

exempel:

*edit* Ändrade lite i precachen för att slippa skriva bild länkarna mer än en gång

Kod:

<html>
<head>
<script type="text/javascript">

var myArrayPic= new Array();

myArrayPic[1] = "Bilder/bild1.jpg";
myArrayPic[2] = "Bilder/bild2.jpg";
myArrayPic[3] = "Bilder/bild3.jpg";

img1 = new Image();
img1.src = myArrayPic[1];
img2 = new Image();
img2.src = myArrayPic[2];
img3 = new Image();
img3.src = myArrayPic[3];

var MyCurrentPic = 1;
var MilliSecBetweenPicChange = 2000;

function NextBgPic(){
document.getElementById("MyPictureDiv").style.backgroundImage = "url('" + myArrayPic[MyCurrentPic] + "')";
	if (MyCurrentPic != 3){
		MyCurrentPic = MyCurrentPic + 1;
	}
	else {
		MyCurrentPic = 1;
	}
	setTimeout("NextBgPic()", MilliSecBetweenPicChange);
}
</script>
</head>
<body>
<div id="MyPictureDiv" style="background-image: url('Bilder/bild1.jpg'); width:300px; height:400px;">

<div>
<script type="text/javascript">
NextBgPic();
</script>
</body>

</html>

hobbywebbisen · 2011-02-20, 12:44

Tack! Då lägger jag bara in dne här koden där bilden är, right?
Å där du skrivit img1, img2 osv - där ska det stå bildens namn??

P3N · 2011-02-20, 12:54

Ja, ändra bildnamnen där det i dag står "Bilder/bild1.jpg", "Bilder/bild2.jpg", "Bilder/bild3.jpg". Det skall stå den relativa vägen till dina bilder från sidan med detta scriptet.

Tänk på att lägga det som är mellan <head></head> taggarna mellan DINA head taggar och det i <body> taggarna i mellan DINA body taggar.

Sen måste du sätta rätt width och height enligt dina bilder på diven där det nu står 300px och 400px. Samt positionera diven med bilden så att bilden hamnar på rätt ställe på sidan. Exempelvis:

Kod:

<div id="MyPictureDiv" style="background-image: url('Bilder/bild1.jpg'); position:relative; top:300px; left: 200px; width:300px; height:400px;">

Justera de måtten ovan till var du vill ha diven/bilderna.

hobbywebbisen · 2011-02-20, 14:22

Ok - stort tack P3N!
Då ska jag testa å lägga in varje JPG-image så.

P3N · 2011-02-20, 16:31

Det var så lite så

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

Byta bilder