Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Ha en slumpvald bild i headern?

1
Skriv svar
Permalänk
Medlem
●

Ha en slumpvald bild i headern?

Hej!

Jag undrar om man kan göra en funktion så att jag på min min sida kan ha en header som består av en bild, som slumpvis ändras. Jag antar att det görs i javascript eller php, men kan någon hjälpa mig på vägen?

Vänliga hälsningar

csmannen

Redigera
Citera flera Citera
Permalänk
Medlem
●

<?php
$id = rand(0,1);
$img = ($id == true ? "bild1.jpg" : "bild2.jpg");
echo '<img src="' . $img . '">';
?>

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ett exempel i Javascript, du behöver bara ändra (och lägga till) bilderna i arrayen.

<html>
<head>

<script type="text/javascript">

var pictures = ["http://powder.karlstad.se/rcr220/g2/bilder/night_new_york_117...",
"http://www.res-billigt.se/image/NEWYORK%202.jpg",
"http://dndcollection.blogg.se/images/2009/wall-street-new-yor...",
"http://hheleene.blogg.se/images/2010/new_york_city_92358102.j...",
"http://1.bp.blogspot.com/_810AV-IFWjc/TLl2nbyMybI/AAAAAAAAAFc..."];

function randomPicture(){

	var i = Math.floor(Math.random() * pictures.length);
	document.getElementById('pic').src=pictures[i];
}

window.onload=randomPicture;
</script>

</head>
<body>

<div id="header">
	<img src="" id="pic">
</div>

</body>
</html>
Redigera
Citera flera Citera
Permalänk
Medlem
●

Nu har jag hittat en som ser ut så här:

<img src="http://minsida/l/image_<?php $random = rand(1,3); echo $random; ?>.png" />

Och de tre filerna jag har heter image_1, image_2 och image_3, men det funkar inte, vad gör jag för fel? Jag vet att mitt webbhotell har stöd för php, då jag har ett mailformulär på den.

Den här guiden följde jag: Drop-Dead Easy Random Images via PHP ? Perishable Press

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Chigurh:

Ett exempel i Javascript, du behöver bara ändra (och lägga till) bilderna i arrayen.

<html>
<head>

<script type="text/javascript">

var pictures = ["http://powder.karlstad.se/rcr220/g2/bilder/night_new_york_117...",
"http://www.res-billigt.se/image/NEWYORK%202.jpg",
"http://dndcollection.blogg.se/images/2009/wall-street-new-yor...",
"http://hheleene.blogg.se/images/2010/new_york_city_92358102.j...",
"http://1.bp.blogspot.com/_810AV-IFWjc/TLl2nbyMybI/AAAAAAAAAFc..."];

function randomPicture(){

	var i = Math.floor(Math.random() * pictures.length);
	document.getElementById('pic').src=pictures[i];
}

window.onload=randomPicture;
</script>

</head>
<body>

<div id="header">
	<img src="" id="pic">
</div>

</body>
</html>
Gå till inlägget

Tack, du gjorde min kväll!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av csmannen:

Tack, du gjorde min kväll!

Gå till inlägget

Använd PHP istället, sinnessjukt onödigt med javascript för en sådan enkel funktion.

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av JesperA:

Använd PHP istället, sinnessjukt onödigt med javascript för en sådan enkel funktion.

Gå till inlägget

Håller med dig, var mitt exempel för otydligt eller? Tyckte det var så simpelt och ganska lättförståeligt som möjligt

Ville trådskaparen kanske ha möjlighet att ha n antal bilder? inte bara två?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Vill du göra det i PHP med olika bildnamn (inte 1, 2, 3 o.s.v.) av någon anledning, går det också enligt följande:

$i = rand(0, 2);

switch($i) {
	case 0:
		$img = "ett_exempel.jpg";
		break;
	case 1:
		$img = "en_annan_bild.png";
		break;
	case2: 
		$img = "bakgrund.bmp";
		break;
	default:
		$img = "default_bg.jpg";
}

echo '<img src="images/'.$img.'" alt="'.$img.'">';
Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag vill ocksåååå!!!!!!! 

<?php
	$images = array();
	
	$images[] = "image-1.jpg";
	$images[] = "image-2.jpg";
	$images[] = "image-3.jpg";
?>
<img src="<?php echo $images[rand(0, sizeof($images)]; ?>">

Fast jag hade nog nördat mig lite och gjort någon klass som håller både url och alt-text så image-taggen följer html 4.01 standarden.

Visa signatur

Cat funeral! Cat funeral!
>>> 112383 <<<

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av pscs3:

Jag vill ocksåååå!!!!!!! 

<?php
	$images = array();
	
	$images[] = "image-1.jpg";
	$images[] = "image-2.jpg";
	$images[] = "image-3.jpg";
?>
<img src="<?php echo $images[rand(0, sizeof($images)]; ?>">

Fast jag hade nog nördat mig lite och gjort någon klass som håller både url och alt-text så image-taggen följer html 4.01 standarden.

Gå till inlägget

Fast troligtvis så lär bilderna ligga samlat och alt-texten vara "logo" typ

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av pscs3:

Jag vill ocksåååå!!!!!!! 

<?php
	$images = array();
	
	$images[] = "image-1.jpg";
	$images[] = "image-2.jpg";
	$images[] = "image-3.jpg";
?>
<img src="<?php echo $images[rand(0, sizeof($images)]; ?>">

Fast jag hade nog nördat mig lite och gjort någon klass som håller både url och alt-text så image-taggen följer html 4.01 standarden.

Gå till inlägget

Du menar img-elementet?

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av You:

Du menar img-elementet?

Gå till inlägget

Image, img, element, tagg.. tomato tomato!
Objects, Images, and Applets in HTML documents

Edit: Missade att två svarat

Skrivet av dEnnA:

Fast troligtvis så lär bilderna ligga samlat och alt-texten vara "logo" typ

Gå till inlägget

Det beror givetvis på, men jag hade gärna haft valet att visa något annat. Ex. om det är en byggfirma kanske jag hade beskrivit en bild såhär:
"Andersson Bygg lägger taket på huset vi byggde på Köpgatan 2 i Vår-stad"

Om du har runt 7-900 pixlars längd och 40-80 pixlars höjd att fylla så blir "logo" inte särskilt roligt eller informativt om inte bilden kan visas.

Senast redigerat
Visa signatur

Cat funeral! Cat funeral!
>>> 112383 <<<

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av pscs3:

Image, img, element, tagg.. tomato tomato!
Objects, Images, and Applets in HTML documents

Gå till inlägget

Nej, element och tagg är två distinkt skilda saker.
HTML tags vs. elements vs. attributes | 456 Berea Street

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av You:

Nej, element och tagg är två distinkt skilda saker.
HTML tags vs. elements vs. attributes | 456 Berea Street

Gå till inlägget

Du får utveckla lite, "nej" följt av en länk som förklarar det uppenbara är knappast ett bra argument.
Img-taggen måste innehålla både en url och alt-text, att taggen i sig utgör hela elementet ändrar knappast att img-taggen måste innehålla attributen. Det blir väldigt mycket nitpicking att nödvändigtvis kalla img-taggen för element när taggen måste innehålla exakt samma sak.

Jag håller fast vid att det är tomato tomato.

Visa signatur

Cat funeral! Cat funeral!
>>> 112383 <<<

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av pscs3:

Du får utveckla lite, "nej" följt av en länk som förklarar det uppenbara är knappast ett bra argument.
Img-taggen måste innehålla både en url och alt-text, att taggen i sig utgör hela elementet ändrar knappast att img-taggen måste innehålla attributen. Det blir väldigt mycket nitpicking att nödvändigtvis kalla img-taggen för element när taggen måste innehålla exakt samma sak.

Jag håller fast vid att det är tomato tomato.

Gå till inlägget

Huruvida en tagg måste ha attribut eller inte är odefinierat i HTML4.01 (och övriga versioner av HTML), det är alltid elementen som specifieras. En "tagg" är helt enkelt något som börjar med "<" eller "</", följs av sitt namn och kanske några attribut, och avslutas av ">". Inte någonstans i standarden (som du själv länkade till) står det någonting om taggar. Det står att IMG-elementet måste ha ett alt-attribut etc, men ingenting nämns om taggen (den är ganska irrelevant i sammanhanget). Hade du läst artikeln jag länkade till så hade du redan hört det här en gång. Perfection Kills har också en bra artikel i samma anda.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av You:

Huruvida en tagg måste ha attribut eller inte är odefinierat i HTML4.01 (och övriga versioner av HTML), det är alltid elementen som specifieras. En "tagg" är helt enkelt något som börjar med "<" eller "</", följs av sitt namn och kanske några attribut, och avslutas av ">". Inte någonstans i standarden (som du själv länkade till) står det någonting om taggar. Det står att IMG-elementet måste ha ett alt-attribut etc, men ingenting nämns om taggen (den är ganska irrelevant i sammanhanget). Hade du läst artikeln jag länkade till så hade du redan hört det här en gång. Perfection Kills har också en bra artikel i samma anda.

Gå till inlägget

Fast nu börjar du diskutera element och taggar i helhet, vilket blir ännu mer orelevant.
<!ELEMENT IMG - O EMPTY -- Embedded image -->
Var menar du att attributen skulle placeras annars?
Nitpicking, tomato, tomato.

Visa signatur

Cat funeral! Cat funeral!
>>> 112383 <<<

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ok för att jag hoppar in i diskussionen, men det hela började med

Citat:

...både url och alt-text så image-taggen...

när det heter image-element, inte image-tagg.

Det är det enda detta handlar om! Varför tar du upp attribut hela tiden?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Cloudburst:

när det heter image-element, inte image-tagg.

Det är det enda detta handlar om! Varför tar du upp attribut hela tiden?

Gå till inlägget

Då det inte får finnas någon sluttagg och elementet inte får ha något innehåll så måste img-taggen innehålla både url och alt-text (attributen src och alt).

Jag tycker fortfarande att det är tomato tomato att säga img eller image, tagg eller element i den meningen jag skrev. Hur jag än vrider och vänder på det så blir det samma sak.

Visa signatur

Cat funeral! Cat funeral!
>>> 112383 <<<

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara