Welke programmeertaal voor interactieve inhoud?

Pagina: 1
Acties:

Vraag


Acties:
  • 0 Henk 'm!

  • Djarum
  • Registratie: April 2008
  • Laatst online: 07:07
Hallo Tweakers,

Ik heb jullie advies nodig. Ik wil een soort van interactieve pagina (zie het als een stukje E-learning) aan mijn website toe voegen.

Het doel is dat er een afbeelding in het midden van de pagina staat met daar om heen enkele knoppen en schuiven waarmee je de afbeelding kunt manipuleren. Er staat bijvoorbeeld een knop 'Contrast' met een plus en een min. Zodra je daar op klikt zie je dat de afbeelding direct contrastrijker / -armer wordt. Daarbij ook een schuif 'Belichting' en een knop 'kleur' om zo de afbeelding aan te passen.

Hoe kan ik dit het beste uitvoeren? Ik wil geen grafische 'engine' die echt de afbeelding 'bewerkt' omdat het eindresultaat meerdere doelen dient en er effecten gevisualiseerd moeten worden die buiten grafische bewerkingen vallen.
Omdat ik meerdere opties wil laten uitvoeren, is het beste dat er bij elke optie telkens een nieuwe afbeelding ingeladen wordt, maar zonder vernieuwing van de hele pagina. Eigenlijk wil ik dus met een klik op een knop het verschil in de afbeelding laten zien, zonder dat er een compleet nieuwe pagina in laad, dus gewoon lekker vloeiend.

Als voorbeeld: Zie het als een foto van een auto met de deur open, naast de foto staat een knop: 'Sluit de deur'. Zodra je daar op klikt zie je dat de foto naadloos verandert in dezelfde auto met de deur dicht.

In welke taal kan ik dit het beste schrijven? Javascript of toch Flash? Of een ander alternatief?
Op dit moment ben ik niet geheel onbekend met de beide talen, maar heb nog veel te leren. (echter geen drempel, ik zoek nu gewoon advies over de taal waarin te starten)

Dank voor het adviseren en meedenken!

Beste antwoord (via Djarum op 29-10-2016 22:16)


  • orf
  • Registratie: Augustus 2005
  • Nu online

orf

Met Javascript kan dat prima. Eventueel in combinatie met canvas of zoals je zelf beschrijft met het inladen van een nieuwe afbeelding in een <img> tag.

Eerste hit in Google levert een library op die je eventueel kunt gebruiken:

JavaScript:
1
2
3
4
5
6
7
Caman('#my-image', function () {
    this.brightness(10);
    this.contrast(30);
    this.sepia(60);
    this.saturation(-30);
    this.render();
  });


http://camanjs.com/

Alle reacties


Acties:
  • Beste antwoord
  • +1 Henk 'm!

  • orf
  • Registratie: Augustus 2005
  • Nu online

orf

Met Javascript kan dat prima. Eventueel in combinatie met canvas of zoals je zelf beschrijft met het inladen van een nieuwe afbeelding in een <img> tag.

Eerste hit in Google levert een library op die je eventueel kunt gebruiken:

JavaScript:
1
2
3
4
5
6
7
Caman('#my-image', function () {
    this.brightness(10);
    this.contrast(30);
    this.sepia(60);
    this.saturation(-30);
    this.render();
  });


http://camanjs.com/

Acties:
  • 0 Henk 'm!

  • b2vjfvj75gjx7
  • Registratie: Maart 2009
  • Niet online
JS icm. AJAX.

Acties:
  • 0 Henk 'm!

  • Djarum
  • Registratie: April 2008
  • Laatst online: 07:07
Dank jullie voor het snelle antwoord, ik dacht al dat javascript de beste oplossing hiervoor zou zijn. Ik ga er mee aan de slag!