Archiv für die Kategorie ‘programmierung’

« Ältere Einträge

Div mit Javascript mittig setzen / auf Bildschirm zentrieren

Donnerstag, 05. August 2010

Die nächste interesante Javascript Programmieraufgabe, mit der wir uns beschäftigen wollen ist eine Div Ebene, abhängig von ihrer Breite und Größe und abhängig von der Auflösung bei dem Benutzer, der die Javascript Funktion ausführt, auf dem Bildschirm zentrieren. Das brauchen wir oft wenn wir beispielsweise schnell eine Tabelle mit Elementen zeigen wollen, die verglichen werden oder allgemein in allen Fällen, wo wir unbedingt den kompletten Inhalt des Divs möglichst übersichtlich dem Besucher zeigen wollen. An der Stelle ist es für uns nicht relevant wo sich die Maus befindet zur Zeit der Öffnung von der Div Ebene, es wird einfach die Javascript Funktion ausgeführt.

Wir gehen davon aus, dass der zu zentrierende Div bereits vorbereitet und voll mit Daten ist. Nun gehen wir hin und zentrieren ihn.

Schritte

1. Die Div Ebene muss erstmal vom linken Rand genau in der Mitte des Bildschirms stehen. Das macht man so (unser Div heißt einfach div):

document.getElementById(div).style.left='50%';

50% bedeutet – setzte die Ebene genau in die Mitte des Bildschirms vom linken Rand her. An der Stelle ist es und noch egal wie breit der Div tatsächlich ist.

2. Ensprechend der Größe der Div Ebene, den Abstand zum linken Rand des Bildschirms verringern und zwar genau die Hälfte von der tatsächlichen Größe des Divs:

function CenterScreenDiv(div) {
    div.style.marginLeft = "-" + parseInt(div.offsetWidth / 2) + "px";
    div.style.marginTop = parseInt(div.offsetHeight / 2) + window.document.documentElement.scrollTop + "px";
}

Und fertig – die Ebene steht mittig wie ein Wunder, cross-browser-fähig!

Zusammenfassung der Funktion

Anbei die Funktion komplett:


document.getElementById('MyDiv').innerHTML = 'Hallo Welt';
CenterScreenDiv(document.getElementById('MyDiv'));

function CenterScreenDiv(div) {
    div.style.left='50%';
    div.style.marginLeft = "-" + parseInt(div.offsetWidth / 2) + "px";
    div.style.marginTop = parseInt(div.offsetHeight / 2) + window.document.documentElement.scrollTop + "px";
}

Die Funktion können Sie bequem nutzen immer, wenn Sie dynamische Inhalte nutzen, auch via AJAX. Es wird auch berücksichtigt, dass das Fenster auch mittig und sichtbar stehen soll, auch wenn der Benutzer nach unten gescrollt hat.

Tags:, ,
Abgelegt in Javascript | Keine Kommentare »

Strings und Substrings mit Javascript teilen

Montag, 02. August 2010

Javascript bietet eine schöne Range an Funktionen, die mit Zeichenketten/Strings arbeiten. Ähnlich zu der PHP Funktion substr, gibt es die Funktion substr() auch in Javascript, die es zulässt, eine Zeichenkette von vorne oder hinten abzuschneiden. Im Kombination mit AJAX wird diese Funktion sehr nützlich und sehr oft benutzt. Wir werden die Funktion vorstellen und später ein sehr interessantes Beispiel einer Javascript Funktion betrachten, die die Anzahl der Zeilen vom Wert einer Textarea zurückgibt.

Funktion

Syntax: ZEICHENKETTE.substr(nStart, nLaenge)

Beispielsfunktion:

var sString = "Hallo Welt!";
alert(sString.substr(6));

Resultat: “Welt!” – es wurde bei der Javascript Funktion vom ersten zum letzten Zeichen geschnitten.

Parameter

nStart - der Parameter ist erforderlich und gibt an ab welchem Zeichen die neue Zeichenkeitte starten soll.
nLaenge – der Parameter ist nicth erforderlich und gibt an wie lang in Zeichen die neue Zeichenkette sein wird. Sollten sie den Parameter nicht angeben – wie auf dem ersten Beispiel oben – so wird die Zeichenkette ab nStart zum Ende abgeschnitten.

Vertiefung der Funktion und Anwendungsbeispiele

Um die Funktionsweise zu vertiefen, werden wir eine Funktion zur Ermittlung der Anzahl der Zeilen einer Textarea betrachten, die wir nutzen, um programmiertechnisch den Wert des Attributes “rows” zu beeinflussen, so dass der in der Textarea eingegebene Text immer sichtbar ist ohne Scrollbalken, Facebook Style. Die Funktion werden wir in den nächsten Artikel näher betrachten.


function BerechneTextAreaHoehe(tarea) {    
    var nCounter = 1;
    var sNeedle = "\n";
    for (var i=0;i< tarea.value.length;i++) {
        if (sNeedle == tarea.value.substr(i,sNeedle.length)) {
            nCounter++;
        }
    }    
    tarea.rows=nCounter;
}

Was passiert in der oberen Funktion?

 - es wird der zur Zeit eingegebene Wert einer als Parameter übergebenen Textarea Zeichen für Zeichen abgeschnitten
 - Sofern ein Abschnitt gleich der Zeichenkette “\n” (weicher Return) ist, so wird der Counter um eins erhöht.
 - Am Ende wird entweder 1 oder die größer 1 Zahl zurückgegeben.

Wenn diese Funktion bei jedem Tastendruck angewendet wird, so kann das Attribut rows manipuliert werden. Dazu aber in unseren nächten Artikeln.

Bei jäglichen Fragen stehen wir gerne zur Verfügung.

Tags:, ,
Abgelegt in Javascript | Keine Kommentare »

Flash Charts professionell gemacht – Open Flash Chart

Mittwoch, 30. Juni 2010

Wir sind neulich auf ein richtig cooles Tool gestolpert – Open Flash Chart. Eigentlich ist es bereits bei Wordpress und anderen breit-benutzten Programme implementiert und dadurch durften wir darüber erfahren. Open Flash Chart erlaubt es durch wenig Aufwand coole Flash Charts auf der eigenen Webseite zu implementieren. Diese können auf wirklich viele Art und Weisen gestyled werden – als Linie, als Balken, Bereiche, Kreise usw. Das Aussehen ist klasse und die Funktion problemlos. Wir haben das Tool mit relativ wenig Aufwand implementieren können – man braucht lediglich JS und PHP, wobei es mittels allen gängigen Sprachen integriert werden kann.

Anbei ein Link zu den Charts:

http://teethgrinder.co.uk/open-flash-chart-2/bar-cylinder-chart.php

Weitere Beispiele gibt es auf der Seite, lesen Sie sich ein.

Funktion

Die Programmierung bei Open Flash Chart ist nicht schwer – das Tool generiert Flash Animationen, in dem es Code im JSON Format ausließt. Da aber nicht jeder das flüßíg schreiben kann, liegen diverse Schnittstellen vor, unter anderem eine PHP Schnittstelle, die Ihre Daten übernimmt, das Styling einstellt und daraus den JSON Inhalt für die Funktion generiert. Dazu müssen Sie die entsprechenden Javascript Dateien inkluden, ein Platzhalter DIV positionieren und ab geht’s..!

Doku

Der Programmierer vom Tool hat auch eine umfassende Dokumentation erstellt und jeder, der ein bisschen PHP kann, könnte den vollen Umfang der Funktionen anwenden. Wir binden gerne die Charts auf Ihrer Seite ein, dazu reicht eine kurze Anfrage Ihrerseits.

Tags:, , ,
Abgelegt in Javascript | Keine Kommentare »

HTML Textarea – automatisch anpassbar in der Anzahl der Zeilen/Höhe mit Javascript

Dienstag, 15. Juni 2010

Ganz bestimmt hat jeder, insbesondere bei Facebook, die sich automatisch anpassbaren Textareas gesehen, die nach jedem Zeilenumbruch automatisch durch eine Zeile erhöht werden. Die Funktion ist besonders nützlich, da bei der HTML Programmierung mit Textareas keine festen Flächen auf der Seite besetzt werden. Das bedeutet, das Formular kann immer mit Textarea mit einer Zeile anfangen und sich erhöhen je nach dem welche Angaben ins Feld gemacht werden. Das was noch die Nutzung dieser sich automatisch anpassbaren Felder bequemer macht, sind die fehlenden Scrollbalken, die die Textarea unschön und unübersichtlich machen. Diese Eigenschaften der Textarea werden durch die Javascript Funktion gewährleistet, die wir nachfolgend vorstellen möchten.

Die JS Funktion


function CheckTextAreaHeight(tarea) {
   var nCounter = 1;
   var sNeedle = "\n";
   
   for (var i=0;i< tarea.value.length;i++) {
      if (sNeedle == tarea.value.substr(i,sNeedle.length)) {       
         nCounter++;
      }
   }

   tarea.rows=nCounter;

}

Funktionsaufschlüsselung

Nachfolgend die Erläuterung darüber wie diese Funktion, die automatisch die Höhe Ihrer Textarea anpasst und der Text in der Textarea / die Textarea selber als Parameter erhält:

1. Es wird von einer Zeile vorausgegangen
2. Es wird nach Umbrüche in der Text gesucht – “\n”
3. Sofern der Umbruch beim Durchsuchen des Textes in einer JS Schleife gefunden wird, wird unser Zähler um 1 erhöht.
4. Am Ende wird der Parameter “rows” (Anzahl der Zeilen) auf den Zählerwert gesetzt.

Diese Javascript Funktion erfordert keine PHP Programmierung und ist eine Client-Side Funktion, die Sie “zu Hause” in einer Text-HTML Datei austesten können.

Einsatz der Funktion

Um die Javascript Funktion zur automatisierten Anpassung einer Textarea in der Anzahl der Zeilen einzusetzen, benötigen Sie vor allem eine Textarea:

   <textarea onkeyup="CheckTextAreaHeight(this);" rows="1">Geben Sie hier Ihren weiteren Text</textarea>

Es wird nach dem Loslassen einer Taste jedes Mal die Höhe angepasst und somit können Sie schreiben, ohne nachzudenken, ob Sie das sehen, was Sie schreiben und ohne scrollen zu müssen.

Lesen Sie hier nach weiteren Javascript Funktionen, die wir hier vorgestellt haben.

Tags:, , ,
Abgelegt in Javascript | Keine Kommentare »

Javascript Programmierung – Seite ausdrucken mit Javascript

Freitag, 21. Mai 2010

Als Zusatz zu unserem letzten Artikel über das Hinzufügen von einer Webseite zu den Favoriten über eine Javascript Funktion, wollen wir die Programmierung vom dem Ausdrucken der aktuell betrachteten Webseite wiederum als Javascript Funktion vorstellen. Diese Funktion löst einen Browserbefehl aus, den man ansonsten über das Menü des Browser hätte betätigen müssen. Wenn Sie an bestimmten Stellen den Besuchern Ihrer Webseite die Möglichkeit schaffen möchten den aktullen Inhalt auszudrucken, so können Sie diese kleine Javascript Funktion zum Ausführen mit einem Textlink oder Button einbauen.

Implementation

Sie sollten vor allem ein Textlink oder ein Button (Input) erzeugen, der entsprechend die Funktion auf Mausklick ausführt.

Textlink:

<a href="#" onclick="javascript:self.print();">Diese Seite ausdrucken</a>

Button (<input> Feld):

<input type="button" value="Diese Seite ausdrucken" onclick="javascript:self.print();" />

Besonderheiten

Die Funktion ist besonders nützlich, wenn Sie kleine Inhalte in einem neuen Fenster aufmachen lassen, wo Sie sicherstellen können, dass der Inhalt richtig ausgedruckt wird. Das Ereignis onclick muss immer mit kleinen Buchstaben ausgeschrieben sein (W3C Richtlinien). Theoretisch können Sie die Javascript Funktion überall einbauen, wo onclick gültig ist.

Tags:,
Abgelegt in Javascript | Keine Kommentare »

Javascript Programmierung – Zu Favoriten hinzufügen – eine JS Funktion

Mittwoch, 19. Mai 2010

Der Einsatz von Javascript ist heuzutage in jeder Webseite ein Muss. Vor allem wird Javascript von jedem herkömmlichen Browser unterstützt und man kann sich darauf verlassen, dass die mit JS erstellten Inhalte und Funktionen beim Besucher korrekt dargestellt werden. Unter anderem sind viele Ajax Funktionen im Einsatz, die sich auf die Javascript-Kompatibilität der Besucherbrowser verlassen.  Javascript integriert sich sehr komfortabel mit jedem Browser und bietet ein Paar nützliche Funktionen, die der User ansonsten selber hätte über die Browsersteuerung betätigen müssen. Eine solche Funktion ist das Hinzufügen der aktuell betrachtete Webseite zu den Favoriten von dem jeweiligen Browser.

Was brauchen Sie, um diese Funktion zu implementieren?

Sie sollten vor allem ein Textlink oder eine Grafik, die jeweils Links sind, die beim Anklicken die Javascript Funktion zum Hinzufügen zu den Favoriten ausführt. Anbei die Funktion, die Erklärung folgt:

Textlink:

<a href="javascript:window.external.AddFavorite(self.location,document.title)">Zu Favoriten hinzufügen</a>

Verlinktes Bild:

<a href="javascript:window.external.AddFavorite(self.location,document.title)"><img src="FavoritenGrafik.jpg" alt="Zu Favoriten hinzuf&amp;amp;uuml;gen" title="Zu Favoriten hinzuf&amp;amp;uuml;gen" border="0" /></a>

Was macht die Funktion?

Es wird beim Anklicken des Links die aktuelle Adresse (URL) (self.location) und den Titel der aktuellen Adresse (document.title) an die Funktion AddFavorite übergeben. Somit kommt das Standardfenster von Ihrem Browser und es wird vorgeschlagen die Seite zu den Favoriten hinzuzufügen, mit dem jeweiligen Titel Ihrer Seite. Sie können statt der Funktion document.title Ihren eigenen Text eingeben, so etwa wie ‘Meine Geschäftswebseite’, dann blicken aber die Besucher nicht mehr durch die eigenen Favoriten durch. Wenn Sie eine Grafik verlinken, achten Sie auf den Pfad der Grafik und auf das Attribut border=”0″, weil ansonsten der Browser die Grafik mit einem Standardrahmen umfassen wird – das ist etwas unschön.

Tags:, ,
Abgelegt in Javascript | 3 Kommentare »

PHP Programmierung – Zahl formatieren mit PHP

Montag, 17. Mai 2010

Als Zusatz zu der von uns vorgestellten Javascript Funktion zur Formatierung von Zahlen, wollen wir heute die Programmierung einer Funktion zur Formatierung von Zahlen mit PHP näher erklären. Nach wie vor ist das Problem mit den auf das U.S. Zahlensystem formatierten Zahlen aktuell. PHP bietet eine sehr komfortable Funktion zur Formatierung von Zahlen mit tausender Gruppierung.  Vor allem können Sie Zahl auf die Deutsche Schreibweise umwandeln. Diese Funktion nennt sich number_format. Diese erwartet entweder zwei oder vier Paramater:

Die zu formatierende Zahl – so etwa wie 29.5
Anzahl von Nachkommastellen
Optional: Trennzeichen für die Nachkommastellen
Optional: Trennzeichen für die Tausenderstellen

Da man immer wieder die gleichen Parameter nimmt, wenn man die Zahlen auf die Deutsche Screibweise formatiert, so schreiben wir uns eine kleine und einfache Funktion, die number_format anwendet:

function ZahlFormatieren($dZahl, $nAnzahlNachkommastellen=2) {
     return number_format($dZahl, $nAnzahlNachkommastellen, ",", ".");
}

Die Funktion formatiert die Zahl 28,000.4 als 28.000,40 mit Zwei Kommastellen. Man kann gerne die Anzahl der Kommastellen über den Parameter von dem Standardwert von 2 auf eine andere Anzahl erweitern oder minimieren.

Einsatz

Wenn Sie beispielsweise ein Formular haben, das Zahlen in Textfelder automatisch ausfüllt, die auch korrekt dargestellt werden sollen, so können Sie die Funktion auf folgender Art und Weise in HTML einbetten:

<input type="text" name="MeineZahl" value="<?php echo ZahlFormatieren($dMeineZahl) ?>" />

Tags:,
Abgelegt in PHP | Keine Kommentare »

Javascript Programmierung – Zahl formatieren mit Javascript

Dienstag, 11. Mai 2010

Bei der Programmierung mit Javascript (JS), müssen wir oft mit Zahlen arbeiten. Diese Zahlen werden aber vom System automatisch auf die U.S. Schreibweise angepasst. Das bedeutet, dass das Komma zur Gruppierung der Tausenderstellen benutzt wird, wobei der Punkt als Trennzeichen für die Nachkommastellen gilt. Eine solche Zahl würde so aussehen:

1000.00 – U.S. Schreibweise

Wir möchten aber, dass die Zahl nach der deutschen Schreibweise generiert wird, und zwar:

1000,00 – deutsche Schreibweise

Oft müssen wir mit Javascript zahlen “on-the-fly” formatieren, wenn wir beispielsweise buchhalterische Rechnungen mit JS/Ajax machen, wo die Seite nicht neu aufgerufen und somit vom Server nicht generiert wird. Wir könnten mit PHP die Zahlen formatieren, manchmal aber brauchen wir eine einfache Funktion, die die Zahl so verarbeiten kann, dass sie der deutschen Schreibweise entspricht und das Webdesign konform behält. Anbei eine solche Funktion, geschrieben in Javascript:

function ZahlFormatieren(x) {
  var k = (Math.round(x * 100) / 100).toString();
  var sEnding;
  var sReturn;
  if (k.indexOf('.') == -1)
    sEnding = '.00';
  else
    sEnding = '00';
 
  k = k + sEnding;
 
  var p = k.indexOf('.');
  sReturn = k.substring(0, p);
  sReturn = sReturn + ',';
  sReturn = sReturn + k.substring(p+1, p+3);
  return sReturn;
}

Was macht die Funktion?

Die Javascript Funktion zur Formatierung von Zahlen übernimmt lediglich die vom System generierte Zahl, z.B. von einer Berechnung von anderen Zahlen. Zunächst wird geprüft, ob die Zahl bereits Nachkommastellen hat und wenn nein, werden automatisch die .00 am Ende der Zahl angehängt. Dann wird der Punkt durch ein Komma ersetzt und die Zahl wird zurückgegeben.

Implementierung der Funktion

Sie können die Funktion auf ein Ereignis setzen, so etwa wie onclick. Beispielsweise können Sie ein Feld haben, wo Sie eine Zahl eingeben und ein Button haben, der die Zahl in dem Feld formatiert:

<input type="text" value="24.5" id="FieldToFormat" />
<input type="button" value="Zahl formatieren" onclick="document.getElementById('FieldToFormat').value=ZahlFormatieren(document.getElementById('FieldToFormat').value);" />

Natürlich muss die Funktion bereits per Include oder im Head per <script></script> der Seite zur Verfügung stehen, um aufgerufen werden zu können.

Erweiterungen

Man kann relativ einfach noch den Punkt zur Gruppierung von Tausenderstellen einfügen, sowie diverse Währungszeichen anhängen, z.B. €. Diese müsste man als Parameter übergeben. Wenn Sie eine dynamische Aktualisierung eines Warenkorbs oder Positionen in einer Rechnung programmieren, so hilft Ihnen diese Funktion die Zahlen der deutschsprachigen Nutzer korrekt darzustellen und eine Irritation zu vermeiden.

Tags:,
Abgelegt in Javascript | 2 Kommentare »

PHP Programmierung – PHP Funktion zur Generierung von transparenten Spacer

Mittwoch, 05. Mai 2010

Wir hatten in unserem letzten Artikel darüber informiert, wie man mittels einer PHP Funktion die Generierung von <img /> Tags erleichtern kann. Diese Funktion spart Zeit, sichert eine einheitliche Schreibweise aller <img /> Tags und erlaubt Änderungen in der Schreibweise, sollte diese sich durch Richtlinien oder Suchmaschinenoptimierung ändern sollen. Heute werden wir präsentieren wir man mit Hilfe dieser Funktion die sehr oft benutzten Spacer (transparente 1×1 Pixel Bilder) generieren kann.

Die PHP Funktion zur Erstellung von Spacer wir ein Aufruf der Funktion CreateImage sein, dass bestimmte Parameter immer wieder nutzt. Anbei die Funktion:

function CreateSpacer($nWidth=1, $nHeight=1) {
    return CreateImage(IMAGES_PATH."trans.gif","","width: ".$nWidth."px; height: ".$nHeight."px; border: 0px","");
}

Was macht die Funktion?

Es wird die Funktion CreateImage aufgerufen, wobei der Pfad zu der 1×1 Pixel Grafik (trans.gif) vorgegeben ist und explizit keinen Rahmen angezeigt wird. Die Konstante IMAGES_PATH kann in einer Konfigurationsdatei als der Pfad zu dem Ordner definiert werden, wo sich Ihre Grafiken befinden. Die Funktion übernimmt die übergebenen Parameter Breite und Höhe, die die meistbenutzen Parameter bei der Erstellung von Spacer <img /> sind. Diese können auch nicht angegeben werden zwecks einer einfacheren Ausführung der Funktion, dann wird das Bild mit 1px Höhe und 1px Breite erstellt.

Beispiel der Nutzung

Normalerweise hätten Sie mit HTML eine solche Schreibweise zur Erstellung eines Spacers nutzen sollen:

<td><img src="<?php echo IMAGES_PATH;?>trans.gif" style="width: 200px; height: 20px; border: 0px;" alt="" title="" /></td>

Mit unserer Funktion geht das einfacher:

<td><img src="<?php echo CreateSpacer(200,20);?></td>

Somit vererbt die CreateSpacer Funktion die Funktion CreateImage auf eine einfache Art und Weise. Die Grundfunktion kümmert sich bei diesem Aufruf um den alternativen Text, korrekte Schreibweise des Tags usw.

Tags:, , , ,
Abgelegt in PHP | Keine Kommentare »

PHP Programmierung – PHP Funktion zur Generierung von W3C-konformen img Tags

Montag, 03. Mai 2010

Die PHP Programmierung kann auf sehr vielen Art und Weisen in der Optimierung der HTML Programmierung eingesetzt werden. Das beinhaltet die Automatisierung von HTML Routinen, die sich immer wieder wiederholen und eine aufwändige Schreibweise mit sich bringen. Die Erstellung von korrekten und W3C-konformen <img> Tags erfordert das Ausfüllen von mehreren Attributen dieses Tags, was man auch gerne vergisst, da die Browser die Bilder nur mit dem source (src) Attribut auskommen und das Bild korrekt darstellen. Jedoch gibt es ein Paar Probleme, die man durch die Automatisierung der Erstellung von <img> Tags vermeiden kann:

1. Wenn ein Bild verlinkt wird, wird automatisch einen Rahmen erstellt – wenn das Bild ohne den Attribut style=”border: 0px”; erstellt wird, macht der Browser automatisch einen Rahmen um das Bild, um zu zeigen, dass man darauf klicken kann.

2. Wenn man keine genauen Maße angibt, wird das Bild beim Aufrufen der Seite erstmal auf der Breite des alternativen Textes gespannt – da der Browser beim Laden des Bildes nicht weiß, wie breit und hoch es ist, muss das Bild erstmal geladen werden und dann analysiert werden. Bis das erfolgt, wird der Platzhaltern vom Bild automatisch auf die Breite des angegebenen Alternativtextes gespannt, was mit vielen Bildern eine deutliche Unruhe beim Laden der Seite bereitet.

3. Der alternativ Text wird nur angezeigt, wenn das “title” Attribut benutzt wird.

Wir präsentieren an der Stelle eine PHP Funktion, die <img > Tags mit den entsprechenden Attributen je nach Aufruf in HTML generiert.

function CreateImage($sSrc="", $sAlt="", $sStyle="", $sId="") {
 
 if(is_file($sSrc)){
  $arImageInformation = getimagesize($sSrc);
  $nImageWidth = $arImageInformation[0];
  $nImageHeight = $arImageInformation[1];

  $PrintId="";
  if ($sAlt!="" &amp;&amp; $sId!="") $PrintId = ' id="'.$sId.'"';
  
  if(!strstr($sStyle, "width") &amp;&amp; !strstr($sStyle, "height") &amp;&amp; $sStyle!= ""){
   $sImageInfo = 'style="width: '.$arImageInformation[0].'px; height: '.$arImageInformation[1].'px;'.$sStyle.'"';
  }
  elseif(!strstr($sStyle, "width") &amp;&amp; !strstr($sStyle, "height") &amp;&amp; $sStyle== ""){
   $sImageInfo = 'style="width: '.$arImageInformation[0].'px; height: '.$arImageInformation[1].'px; border: 0px;"';
  }
  else {
   $sImageInfo = 'style="'.$sStyle.'"';
  }
  $sImage =  '<img src="'.$sSrc.'" '.$sImageInfo.' alt="'.$sAlt.'" title="'.$sAlt.'" '.$PrintId.'/>'; 
   return $sImage;
 }else{
  return "Pfad ".$sSrc. " not correct";
 }
}

Was macht die PHP Funktion und welche Parameter übernimmt sie?

1. Funktion – es wird zunächst geprüft, ob der angegebene Pfad zum Bild (übers src Attribut) existiert. Wenn nicht, wird einfach ein Text mit dem Falschen Pfad zurückgegeben. Wenn der Pfad existiert, werden die Maße des Bildes mittels der Funktion getimagesize ausgelesen. Dann wird das style Attribut, das alle nicht mehr als einzelne Attribute zu nutzende Attribute vereiningt, generiert. Das entspricht auch die W3C Richtlinien. In das style Attribut werden width, height, (die automatisiert ermittelt werden) border und weitere durch den User anzugebenden Eigenschaften reingeschrieben. Je nach dem, ob der User die Eigenschaften selber angibt, wird die border Eigenschaft automatisiert dazu geschrieben. Eventuellen id und alt werden ergänzt, wobei der title Tag wird automatisch wie der alt hinzugefügt. Das stellt sicher, dass der Besucher immer den alternativ Text wahrnehmen kann.

2. Parameter

 - $sSrc – der Pfad zum Bild
 - $sAlt – der alternativ Text des Bildes – hierüber kann man über PHP automatisiert Texte nutzen, die für die gesamte Seite relevant sind.
 - $sStyle – die durch den User definierten Style-eigenschaften wie width, height, border, margin etc.
 - $sId – die ID vom Bild, falls es durch Javascript Funktionen manipuliert werden wird.

Diese Funktion stellt eine konforme Art der Schreibweise von den <img /> Tags dar und erlaubt das Vermeiden der kleinen Fehler bei der täglichen Programmierung mit HTML. Sie lässt sich mit weiteren Parameter beliebig erweitern, es lässt sich beispielsweise die URL per Parameter übergeben, wohin das Bild verlinken soll.

Tags:, , , , ,
Abgelegt in PHP | Keine Kommentare »

« Ältere Einträge