Gå til innhold

Lage et slideshow uten JavaScript, og med et begrensett antall tillatte HTML- og CSS-tags.

Ajaco

Av Ajaco
i Programmering og webutvikling

Anbefalte innlegg

Ajaco

Ajaco

Skrevet
Skrevet

Hei!

 

Jobber for tiden med et skoleprosjekt. Prosjektet går ut på å lage en webløsning med stikkordet "Eventyr".

 

I den sammenheng har vi diskutert mulighetene for et slideshow på en av sidene våres. Problemet her er at vi kun har lov til å bruke et begrenset sett med HTML- og CSS tags.

 

Vi har enda ikke prøvd så veldig hardt for å lage dette slideshowet, men tenkte det kunne vært greit å høre om det finnes noen glupe hoder der ute som har noen gode idéer på hvordan dette problemet kan løses.

 

Å lage et slideshow som utelukkende går på tid, og ikke triggres av noe annet, bør gå helt fint å lagge. Det samme kun med hover og/eller klikk. Problemet blir hvis man skal ha begge deler. Altså at slideshowet endrer seg hvert 20 sekund, med mindre brukeren manuelt triggrer det.

 

HTML- og CSS taggene vi har lov til å bruke er følgende:

 

Tillatte html-tager:

 html

 head

 title

 meta

 body

 link

 div

 header

 section

 footer

 h1-h6

 p

 span

 ul/ol, li

 a

 img

Tillatte css-egenskaper:

CSS 2

 margin

 padding

 border

 float

 position

 top, left, right, bottom

 width og height

 background-image

 background-repeat

 background-color

 color

 font

 overflow

 display

CSS 3

 animation og transition

 transform: rotate()

 transform: scaleX()

 opacity

Alle typer css-velgere er tillatt å bruke! Inkluderer pseudoklasser som f.eks. :hover og :active osv.

Andre krav:

 Html 5 skal benyttes

 All css skal ligge i eksternt stilark

 Løsningen skal tilpasses siste versjon av Chrome eller Safari!

 

Videoannonse

Videoannonse
Annonse
JohndoeMAKT

JohndoeMAKT

Skrevet
Skrevet (endret)

Det bør ikke være et problem.

 

1.html:

 

(html)(!DOCTYPE html)(html)(head)(meta http-equiv="Refresh" content="5; url=2.html")(/head)(body)(img src="1.png"/)(a href="1.static.html")Pause(/a)(a href="2.html")Neste(/a)(/body)(/html)(/html)

 

 

Alle slidene er et eget HTML-dokument og alle slidene finnes i to versjoner, static og vanlig. Static betyr bare at meta-refresh headeren ikke er satt mens den er satt i den vanlige versjonen.

 

EDIT: Teksteditoren her på forumet spiser all HTML jeg skriver.. jeg har byttet ut < med ( og motsatt for å få det inn i posten.

Endret av JohndoeMAKT
Crowly

Crowly

Skrevet
Skrevet

Bruk code tag'ene

 

<!DOCTYPE html><head><meta http-equiv="Refresh" content="5; url=2.html"></head><body><img src="1.png"/><a href="1.static.html">Pause</a><a href="2.html">Neste</a></body></html>

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...