home | sitemap

HTML aanpassen met javascript

De html in het contentvlak (div#tekst) kan en mag te allen tijde worden gewijzigd. Of een redacteur dit met de hand doet of een stukje javascript maakt voor het cms niet uit. Het staat de vormgever dus vrij om javascript aan de html pagina toe te voegen die de al dan niet door de redacteur ingevoegde tekst, afbeeldingen, tabellen, etc. nader bewerkt (mits dit niet botst met de werking van het cms uiteraard.)

Een aardig voorbeeld is het toevoegen van een roll-over functie aan een afbeelding. Als een redacteur een afbeelding in de tekst invoegt met een bepaalde naam, dan zorgt javascript er voor dat deze afbeelding niet zelf wordt ingevoegd maar als background gaat dienen voor een roll-over effect. Als een redacteur een afbeelding invoegt, dan zal het cms de pagina herladen (met name om eventuele wijzigingen aan korte omschrijvingen van afbeeldingen door te voeren) en op dat moment kan de javascript aan de slag: (De roll-over techniek is ook hier gebaseerd op de sliding door-techniek.)

<script type="text/javascript">
  function fixImg() { 
    // haal alle afbeeldingen op in het contentvlak
    var img = document.getElementById("tekst").getElementsByTagName("IMG");
    // voor elke afbeelding...
    for (var i = 0; i < img.length; i++) {
<!-- TMPL_IF NAME="edit" --> // als in edit mode (= in cms)
      // als de naam van de afbeelding eindigt op '_ro' dan moet er een roll-over gemaakt worden
      if (img[i].src.indexOf("_ro.") != -1) { 
        // onthoud breedte en hoogte, deel hoogte door twee voor sliding door
        var w = img[i].width; 
        var h = parseInt(img[i].height/2); 
        var src = img[i].src;
        // maak de ingevoegde afbeelding transparant
        img[i].src = "gfx/trans.gif";
        img[i].width = w;
        img[i].height = h; // nieuwe hoogte is 0.5x 
        // functies voor roll-over effect
        img[i].onmouseover = imgMouseOver;
        img[i].onmouseout = imgMouseOut;
        // originele afbeelding wordt achtergrond...
        img[i].style.background = "url("+src+") 0 0 no-repeat"; 
      } else if (img[i].style.background.indexOf("_ro.") != -1) { 
        // als we in edit mode zitten en de achtergrond van de afbeelding heet ..._ro, dan
        // alleen de roll-over functies toevoegen
<!-- /TMPL_IF -->
        // niet in edit-mode: gewoon roll-over functies toevoegen
        img[i].onmouseover = imgMouseOver; 
        img[i].onmouseout = imgMouseOut; 
      } 
    } 
  } 
  // voeg functie netjes toe aan de onload van de pagina
  AddToInitArray(fixImg);
  
  // als muis over plaatje hangt, dan achtergrond omhoog schuiven zodat roll-over deel
  // zichtbaar wordt
  function imgMouseOver(evt) { 
    evt = (evt) ? evt : ((event) ? event : null); 
    if (evt) { 
      var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
      if (elem) { 
        elem.style.backgroundPosition = "0 -"+elem.height+"px"; 
      } 
    } 
  }

  // als muis niet meer over plaatje hangt, dan achtergrond weer normaal tonen
  function imgMouseOut(evt) { 
    evt = (evt) ? evt : ((event) ? event : null);
    if (evt) { 
      var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
      if (elem) {
        elem.style.backgroundPosition = "0 0";
      }
    }
  }
</script> 

Zie ook het soortgelijke voorbeeld om een afbeelding van een kader te voorzien.

Default content 

Het cms biedt een vormgever de mogelijkheid om de standaard tekst in een nieuwe pagina te bepalen via een eigen content-sjabloon. De standaard tekst die wordt getoond bij een nieuwe pagina is altijd

<p>Typ hier uw tekst...</p>

Het content-sjabloon is specifiek voor een website en niet voor een vormgeving (al zou dit laatste wel op verzoek te realiseren zijn.) Het content-sjabloon kan elke gewenste html bevatten die in het contentvlak (div#tekst) kan staan. Als het contentvlak bijvoorbeeld altijd uit twee kolommen moet bestaan, dan zou de redacteur steeds een tabel kunnen invoegen. Door deze tabel (of twee DIV's) in het content-sjabloon te zetten krijgt elke(!) nieuwe pagina deze tabel.