Byta bild på min hemsida.

Forcevision · Inlägg av **Forcevision** » 06 jun 2009, 17:26

Tjabba !

Sitter här och kodar lite på min hemsida. Och nu hoppas jag på hjälp från er. Någon som har en kod eller en sida som kan fixa så jag får mina bilder att bli ett bildspel på min hemsida. Skall förklara lite, har en hemsida som jag vill ha 3st bilder som kommer fram en i taget och så loopas dessa bilderna.

Hoppas på hjälp med detta.

/Force

serialsniffer · Inlägg av **serialsniffer** » 06 jun 2009, 18:05

hmm javascript med en timer på några sekunder och när tiden gått ut körs en funktion som byter bild kanske?

perab · Inlägg av **perab** » 06 jun 2009, 22:41

Hej, Forcevision!

Kan detta vara något för dig? Lösningen bygger på Javascript. Lämpligt är väl att du också låter den viktigaste bilden visas om Javascript är avstängt.
http://wsabstract.com/script/script2/in ... lide.shtml

Per

Edit: Rättat ett stavfel.

ycc · Inlägg av **ycc** » 07 jun 2009, 09:02

perabs länk verkar ju ge en färdig lösning, vad bra.

Själv har jag använt getelementbyid och settimeout. Vi har haft frågan uppe tidigare:
http://ubuntu-se.org/phpBB3/viewtopic.p ... 59#p271791
(fast i den tråden vill jag minnas att man inte skulle ge färdiga lösningar eftersom trådskaparen var student som skulle skriva en egen uppsats/program)

Här står hur man använder getelementbyid för att byta bild:
http://www.w3schools.com/JS/tryit.asp?f ... _image_src

Vill man ha mjuka övergångar kan man lägga bilderna ovanpå varandra och påverka transparens-index med javaskript och settimeout. (Det finns ett bra rutiner för det i ett bibliotek på nätet som heter blendtrans. Håller men på med det så skall man komma ihåg IE-buggen: För att ändra genomskinlighet så måste man ange en storlek (px) på bilden i bildtaggen, annars funkar det inte i IE, vill jag minnas.)

Här roteras bilder/divtaggar på några kända figurer

http://web.telia.com/~u17103363/doc/Ubu ... m#Bakgrund

ycc · Inlägg av **ycc** » 09 jun 2009, 08:20

Jag hittade en bit kod i skafferiet och kopierade in de två första avatarerna i denna tråden. Det behöver alltså inte vara så lång eller komplicerad kod för att växla några bilder. (Sedan skall det ju göras till en riktig web-sida med doctype, header etc. förstås.)

http://web.telia.com/~u17103363/doc/sw_tst.htm

Kod: Markera allt

<script type="text/javascript">
var b = 0;

function changeSrc() {
if (b==1){
document.getElementById("myImage").src="http://ubuntu-se.org/phpBB3/download/file.php?avatar=8465_1220519925.jpg";
b=0;
} else
if (b==0){
document.getElementById("myImage").src="http://ubuntu-se.org/phpBB3/download/file.php?avatar=11255_1229171490.jpeg";
b=1;
}
window.setTimeout("changeSrc()", 4000); // 4 sec
}
</script>

<body onload="changeSrc()">
<img id="myImage" src="http://ubuntu-se.org/phpBB3/download/file.php?avatar=8465_1220519925.jpg" />
</body>

ajja · Inlägg av **ajja** » 09 jun 2009, 09:16

Ytterligare en variant med javascript.
Tids aspekten sätter du vid 'setTimeout'.
Bilderna måste ligga i ordningen, den sista först och den första som andra bild.
'onLoad="rotate()"' i body-taggen är den som talar om för FF (har endast testat med FF) att den ska ladda en rotera-funktion och ankar-taggen lägger du där du vill ha bildspelet i kroppen.

Kod: Markera allt

	<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">

	<!-- Dölj skript för äldre webbläsare



	adImages = new Array("bann/img7.png","bann/img1.png","bann/img2.png","bann/img3.png","bann/img4.png","bann/img5.png","bann/img6.png")

	thisAd = 0

	imgCt = adImages.length



	function rotate() {

		if (document.images) {

			if (document.adBanner.complete) {

				thisAd++

				if (thisAd == imgCt) {

					thisAd = 0

				}

				document.adBanner.src=adImages[thisAd]

			}

		  	setTimeout("rotate()", 4 * 1000)

	  	}

	}



	// Sluta dölj skript -->

	</SCRIPT>


	<BODY onLoad="rotate()">


	<A HREF="javascript:newLocation()"><IMG SRC="bann/img1.jpg"     WIDTH=150 HEIGHT=160 NAME="adBanner" BORDER=0></A>

P.Forsberg · Inlägg av **P.Forsberg** » 09 jun 2009, 12:11

Några tips finns även att hämta hos:

http://www.dyn-web.com/code/rotate_images/

LJ

Ubuntu Sverige

Byta bild på min hemsida.

Byta bild på min hemsida.

Re: Byta bild på min hemsida.

Re: Byta bild på min hemsida.

Re: Byta bild på min hemsida.

Re: Byta bild på min hemsida.

Re: Byta bild på min hemsida.

Re: Byta bild på min hemsida.