Billed egenskaber

Fra Kommunikation-IT Holstebro HTX
Skift til: navigering, søgning

Et billed-objekt har en del egenskaber, som man selvfølgelig kan indstille i HTML-koden eller hvis man vil have det mere struktureret, så i sin CSS. Man kan finde en beskrivelse af de specielle billed-egenskaber på w3school.com[1]

Grundlæggende billedegenskaber

For at det giver mening at indsætte et billede i et HTML-dokument, så skal det være en henvisning til billedet som vist her:

<img src="logo.png" alt="El-Teknik logo" />

src egenskaben angiver hvad billed-filen hedder, og man kan også angive hvor den er placeret.

For at opfylde w3c standarden skal man have en alt-egenskab på, der beskriver billedets indhold - det er med til at understøtte at man kan søge på billeders indhold.

Manipulering med billedets grundlæggende indhold

For at vi kan arbejde med billedets indhold definerer vi en event-handler der er knyttet at klikke på billedet, som det vises i HTML-koden her:

<img src="logo.png" onClick="changeBillede(this)" alt="Husk at billederne skal ligge i samme mappe" />

For at kunne rette på billedets indhold definerer vi et array med navnene på de billeder vi vil anvende, og en nummer, så vi kan holde styr på hvilket billede der er vist.

var billedNavn = new Array("logo.png", "logo-kit.png", "logo-ny.png");
var billedNr = 0;

Herefter defineres den funktion der foretager skiftet af billedets indhold - det sker ved at henvisningen til billedet tages med som parameter i funktionen. Det næste billednummer udregnes, og navnet på det næste billede bliver skrevet ind i img-Taggets egenskab src, så billedet på den måde skiftes:

function changeBillede(obj) {
	billedNr = (billedNr + 1) % billedNavn.length;
	obj.src = billedNavn[billedNr];
}

Koden med det viste eksempel kan findes i Zip-filen som billed.html.

Mere specielle egenskaber ved billeder

Der er selvfølgelig en del egenskaber man kan manipulere med ved et billede, men det er faktisk style-egenskaberne[2] der er giver nogle af de sjovere effekter, selvom det er alle objekter der kan have disse egenskaber (det er dog ikke alle hvor det giver mening).

Manipulering med billedets opacity

For at vi kan arbejde med billedets gennemsigtighed placerer vi 3 billeder oven i hinanden - dette er også gjort med styles, hvor det er position der sættes til absolute, for at vi kan placere billedet frit, og stylene left og top, der styrer positionen af billedet.

Koden laves med dette lille javascript, hvor vi anvender arrayet fra før til at definere billednavnene med.

var billedNavn = new Array("logo.png", "logo-kit.png", "logo-ny.png");

for (n in billedNavn) {
	document.write('<img src="' + billedNavn[n] + '" id="billed' + n + '" width="300px" style="position:absolute; left:20px; top:120px;" alt="Husk at billederne skal ligge i samme mappe" />');
}

Koden sætter desuden et id på de hver af de 3 billeder, så man kan henvende sig til dem.

For at kunne holde styr på hvor vi er i processen omkring fade-funktionen vi laver med opacity[3], så defineres et par variabler, og der defineres to konstanter der dels angiver (i ms) hvor lang tid billedet skal stå fast, og tiden i ms mellem hvert skift i opacity (der laves 100 skift, så det giver samlet 1000 ms eller 1 sekund for at fade ind og ud).

var sekvens = 0;  // Variabel der styrer hvad der sker
var gennemsigtighed = 100;

// Konstanter der bestemmer tiderne
const ventFast = 3000;
const skiftDel = 10;

Herefter defineres en funktion der foretager skiftet i billedernes gennemsigtighed. Funktionen kaldes en gang fra opbygningen af koden, men definerer hver gang et timeout, der kalder den igen efter et vist delay, så det ser ud til at fungere automatisk.

Koden er opdelt i 4 dele, hvor de to bare holder billedet som det er, mens de to andre sørger for at fade billederne ud fra toppen af, og fade dem ind igen fra bunden af. Dette veksler frem og tilbage, så der dannes et fornuftigt slideshow.

function changeBillede() {
	switch (sekvens) {
		case 0:	// Vent med billedvisning
			setTimeout("changeBillede();", ventFast);
			sekvens = 1;
			break;
		case 1: // Lav en udtoning af billedet med gennemsigtighed
			document.getElementById("billed" + billedNr).style.opacity = gennemsigtighed/100;
			gennemsigtighed--;
			if (gennemsigtighed == 0) {
				if (billedNr == 0) {
					sekvens = 2;
				} else {
					billedNr--;
					gennemsigtighed = 100;
					sekvens = 0;
				}
			}
			setTimeout("changeBillede()", skiftDel);
			break;
		case 2: // Lav en indtoning af billedet med gennemsigtighed
			gennemsigtighed++;
			document.getElementById("billed" + billedNr).style.opacity = gennemsigtighed/100;
			if (gennemsigtighed == 100) {
				if (billedNr == (billedNavn.length - 1)) {
					sekvens = 0;
				} else {
					billedNr++;
					gennemsigtighed = 0;
					sekvens = 3;
				}
			}
			setTimeout("changeBillede()", skiftDel);
			break;
		case 3:	// Vent med billedvisning
			setTimeout("changeBillede();", ventFast);
			sekvens = 2;
			break;
	}
}

Koden med det viste eksempel kan findes i Zip-filen som billed2.html.

Manipulering med billedets position

For at vi kan arbejde med billedets indhold definerer vi en event-handler der er knyttet at klikke på billedet, som det vises i HTML-koden her:

<img src="logo.png" onClick="skiftPosition(this)" style="position:absolute; left:20px; top:120px;" alt="Husk at billederne skal ligge i samme mappe" />

Som det kan ses er billedet stylet til position absolute, og der er sat en position på billedet.

Der defineres så en funktion skiftPosition, der ser ud som følger:

function skiftPosition(billede) {
	if (! gameRunning) {
		return;
	}
	nyX = Math.floor(800 * Math.random());
	nyY = 100 + Math.floor(500 * Math.random());
	antalKlik++;
	billede.style.left = nyX + "px";
	billede.style.top = nyY + "px";
}

Den grundlæggende ide er at rette på style-egenskaberne[2] top[4] og left[5], der angiver hhv. y og x-positionen af billedets placering i browservinduet.

I funktionen laves et tilfældigt tal til både X (0-799) og Y (120 - 619), så billedet flytter sig hver gang der klikkes på det.

For at lave lidt sjov med det, så er der etableret en tidsbegrænsning på hvor længe man kan klikke på billedet, så det fungerer som et lille behændighedsspil. Tidsbegrænsningen er lavet med følgende kode:

// Variabler der billedets opførsel
antalKlik = 0;
gameRunning = true;

// Konstant der bestemmer tiden
const klikTid = 3000;

function stopBillede() {
	gameRunning = false;
	alert("Du nåede at klikke " + antalKlik + " gange");
}

Koden med det viste eksempel kan findes i Zip-filen som billed3.html.

Referencer

  1. http://www.w3schools.com/jsref/dom_obj_image.asp Beskrivelse af de specielle egenskaber der kan arbejdes med i javaScript
  2. 2,0 2,1 http://www.w3schools.com/jsref/dom_obj_style.asp Style egenskaber - har mange generelle egenskaber, men faktisk en del der virker godt på billeder
  3. http://www.w3schools.com/cssref/css3_pr_opacity.asp definitionen af opacity
  4. http://www.w3schools.com/cssref/pr_pos_top.asp style egenskaben top
  5. http://www.w3schools.com/cssref/pr_pos_left.asp style egenskaben left