WN - Byta bilder

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Byta bilder (https://www.wn.se/forum/showthread.php?t=1046644)

hobbywebbisen

2011-02-19 17:46

Byta bilder

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 17: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 10: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 10: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 11: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 11: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 11: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 13:22

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

P3N	2011-02-20 15:31

Det var så lite så :)

Alla tider är GMT +2. Klockan är nu 14:30.