Das ist zwar alter Kram aber weil ich das gerade gemacht habe und das eine oder andere erst Nachschlagen musste, will ich hier mein Ergebnis verposchten, für Andere zum Finden:

Tooltipp mit inline-Script

1. <a onClick="funktion()"
2. onmouseover="this.firstChild.style.display='block';"
3. onmouseout="this.firstChild.style.display='none';" >
4. <spanstyle="position: absolute; width: 200px; height: auto; margin-top: 28px; margin-left: -100px; padding=".5em" border: 1px solid #aaa; color: #494949; background: #efefef; display: none;">
5. Tooltip-Text</span><img src="buttoff.gif" alt="Button-Text"
6. onmouseover="this.setAttribute('src','button.gif');"
7. onmouseout="this.setAttribute('src','buttoff.gif');" /></a>

Und so kann das dann aussehen:

Viel Platz für den Namen der Funktion und Anweisungen .

Nachtrag: ach Gottchen, mein frisch aktualisierter Firefox mag nicht, was ich da gemacht habe. Nur gut, dass ich es nur für den IE brauchte und hier auch keine Rücksicht auf die veralteten Versionen genommen habe. Aber dann … der Firefox nimmt eh gruselige Entwicklung und ich mag ihn immer weniger. Ich weiß wirklich nicht was der FF an diesen simplen DOM-Anweisungen auszusetzen hat. Meine Güte. OK. Der Firefox wollte unbedingt auch noch Javascript blockieren, obwohl ich dafür ein Addon habe … jajaja Javascript ist böse und es macht Sinn es nur von Fall zu Fall zu gestatten. Einstellungen korrigiert — jetzt tut’s auch im FF.

Nachdem ich die Quelle der 8 Vektorgrafiken^[1] erst heute alle abgeklappert habe und dabei nur eine Sammlung für nichtkommerzielle Zwecke außerhalb von Demianart zur Verwertung vorfand, stehe ich ein wenig in der Schuld. Daher hier das Tutorial. Es fängt damit an, dass man ein geeignetes Bild heraussucht. Entweder ein helles Objekt vor dunklem Untergrund oder ein dunkels Objekt vor hellem Untergrund. Um Urheberrechte muss man sich nur bedingt Gedanken machen, da das Endergebnis sehr weit vom Original entfernt ist und es der Fotograf schwerhaben dürfte, der späteren Vektorgrafik anzusehen, dass sein Foto einst die Basis darstellte. Hier im Tutorial sieht das anders aus. Das Foto steht in direktem Zusammenhang mit der Silhouette. Ich nehme daher aus Flickr.com ein Foto aus dem creativ commons by 2.0 des Users officialstarwarsblog.

Die fünf Schritte zur Vektorgrafik:

Zunächst einmal wird die Farbe entfernt: STRG+Shift+U

Da hier ein Bild mit heller Figur ist benötige ich den Zwischenschritt der Invertierung Strg+i:

Nun werden die Kontraste bis zum Anschlag hochgefahren Image/Adjustment/Brightness+Contrast Contrast 100, Brightness je nach Bild hier 35:

Überflüssiges entfernen, Zauberstab und weißer Pinsel:

Mit diesem Zwischenstann könnte man schon leben, doch sind noch zuviele Details besser noch den Rock entfernen udn einige Lichtreflektionen und Kleidungsstücke schwarz auffüllen:

Auch habe ich noch die eine oder andere weiße Linie ergänzt. Damit aus dem schwarz/weißen Bitmap nun eine Vektorgrafik wird, muss zunächst über Select/Color Range die schwarze Figur in die Auswahl genommen werden. Danach wechselt man von der Ebene zu den Pfaden und klickt am unteren Rand die Schaltfläche “Auswahl zu Pfad”. Darauf achten, dass der Pfad aktiv ist und schon kann man über File/Export/Path to Illustrator den Pfad als AI-Vektorgrafik abspeichern und weiter verwursten. Sie erstes Bild.

Ist der Pfad noch zu ingenau, kann man diesen etweder bereits in Photoshop nachbearbeiten oder aber später im Vektorprogramm wie z.B. der Illustrator oder CorelDraw. Und hier ist die Silhouette (AI-Datei) zur freien Verfügung. Wobei ich in diesem Fall zu bedenken gebe, dass die Silhouette mit dem Foto in Verbindung gebracht werden kann und damit man sich u.U. den einen oder anderen Arger einfangen könnte. Besser wird es sein man sucht sich ein anderes Foto.

Fast schon dachte ich, ich hätte eine dritte Methode entdeckt, wie man aus einem Foto eine Zeichnung macht, aber dann beim Test bedurfte es doch wieder einer der alten Methoden, um die Umrisse hervorzuheben.

Wovon ich spreche? Von einem ziemlich alten Beitrag, bei dem ein Foto in eine Comiczeichnung umgewandelt wird im alten templaterie blog. Dort werden zwei Methoden gegenüber gestellt.

Die neue Methode, die ich nun auf Tutorial-Place.com fand, verwandelt ein Foto 4 Schritten und mittels drei Ebenen in eine Zeichnung. Als ich die Methode am Hirsch von Rainer Storm testete, war das Ergebnis nicht zufriedenstellend. Aber ich konnte mir mit einem der alten Tricks helfen. Und so verwandelt man das Foto vom Hirsch in eine Zeichnung vom Hirsch:

1. Foto 4 mal dublizieren und bis zur vierten Ebene Desaturieren (STRG+U)
2. Ebene 5: Opacity 60%, Ebenen-Filter: Color ODER: Opacity 100%, Ebenen-Filter: Color Burn oder Multiply für kräftigere Farben
3. Ebene 4: Opacity 85%, Ebenen-Filter: Color-Dodge, Invertieren (STRG+I), Gaussian-Blur ca. 3px
4. Ebene 3: Opacity 20%, Filter Artistic Brushes/Crosshatches Default oder ein wenig gespielt mit den Filtern
5. Ebene 2: Opacity 70%, Ebenen-Filter: Multiply, Invertieren, Filerset-Blur/Smart-Blur (Radius 50, Threshhold 100, Quality high, Overlay Edge), invertieren

Wer noch den angefressenen Rand möchte, kann in einer neuen Ebene einen 10-12 Pixel breiten Papierfarbenen Rand erzeugen (STRG+A, Edit/Stroke: ca. 10px Location inside, Filter/Blur/Gaussien blur 3,0, Ebene-Filter: Dissolve).

Bildquelle aboutpixel.de Hirsch von stormpic aka Rainer Storm

1. <?PHP
2. $i = 1;
3. $arrayVariable = array(
4. $i++ => 'Erstes Element',
5. $i++ => 'Zweites Element',
6. $i++ => 'Drittes Element'
7. );
8. echo '<pre>$arrayVariable: ';
9. print_r($arrayVariable);
10. echo '</pre>';
11. ?>

Und bei diesem Script stimmt die Ausgabe mit den Zählerfahrungen aus frühster Kindheit wieder überein:

$arrayVariable: Array
(
    [1] => Erstes Element
    [2] => Zweites Element
    [3] => Drittes Element
)

Für alle, die das erste Mal sich mit PHP beschäftigen und das mit der Null noch ganz neu ist, hier ein paar kleine Erläuterungen zum Skript:

<?php leitet ein PHP-Skript ein. Man kann auch nur <? schreiben, doch nicht alle Server lassen diese Kurzschreibweise zu. Mir ist noch keiner begegnet, der es nicht zugelassen hat, aber dann sind meine Programmierkenntnisse und Erfahrungen nicht unbedingt gigantisch. Im Anschluss in der Zeile zwei wird eine Variable definiert. Variablen in PHP werden mit dem Dollar-Zeichen $ eingeleitet. Variablen sind sensible und reagieren auf Unterschiede in der Groß- und Kleinschreibung. $myVar ist eine andere Variable als $myvar oder $myVAR. Wird der Variablen kein Wert zugewiesen (Die Zuweisung erfolgt über das einfache Gleichheitszeichen “=” ), dann hat die Variable den Wert NULL. NULL ist mit Tucholsky gesprochen das Loch und die Variable ist das etwas, das Nichtloch ohne das das Loch nicht sein kann. NULL ist im Universum der Programmierer das Nichts, während “0” etwas ist, das der Variable dem anderen Etwas (die Variable) zugeordnet, wie der Rand eines Loches und 0 ist der Korken. Gewöhnlich werden Zugewiesene Elemente mit einfachen oder doppelten Hochkommata eingeleitet, wobei in doppelten Hochkommata Variablen und andere Sonderzeichen als Variablen und Sonderzeichen erkannt werden in einfachen Hochkommata nicht. In meinem kleinen Skriptbeispiel für Anfänger fehlen sie die Hochkommata, was ich bei Zahlen machen darf. Da der Zahl ein Komma fehlt, nennt sich das Integer in den Manuals mit ‘int’ abgekürzt und steht für Ganzzahl. Variablen dürfen auch Ausdrücke oder auch Methoden zugewiesen werden, was ich in der nächsten Variablen getan habe und mit dem Ausdruck array() gleich eine ganze Sammlung von Variablen zusammengefasst. In dieser Variablensammlung werden standardmäßig mit dem Komma-Delimiter ‘,‘ eine Variable von der anderen unterschieden, wobei jede Variable noch mit Hochkommatas umschlossen wird, so wie dies auch bei der Zuweisung außerhalb des Arrays geschieht. In meinem Array taucht die erste Variable, der ich die Ganzzahl 1 zugewiesen hatte wieder auf: $i++. Das doppelte Pluszeichen ist die Kurzschreibweise für $i = $i + 1;. Der Wert wird also beim Aufruf um eins erhöht. Und beim nächsten Aufruf in dem Array erneut, und erneut und erneut … Damit man die Variablen im Array ansprechen kann, benötigen diese einen Index. Wenn ich diesen nicht vergebe und einfach nur $meinArray = array('Erstens','Zweitens','Drittens'); schreibe, dann wird der Index automatisch vergeben. Zur Anschauung noch ein kleines Beispiel und diesmal gebe ich den Array nicht mit print_r() aus sondern mit var_dump() aus. Damit erhalte ich nicht nur die Werte der Variablen und den Index sondern auch den Variablen-Typ. Wer es nicht schon erahnt, bevor ich weiter mache noch rasch der handgemachte Index, bei dem ich bestimme, wie der Index (auch als ‘key’ bezeichnet) lautet wird mit => erzeugt.

1. <?php
2. $var;
3. $emptyVar = '';
4. $defVar = 7;
5. $myARRAY = array(NULL,0,1, '2','drei',"3,5",4.5, 'NULL', null,'5.5, 6',$var, $emptyVar, $defVar,"$defVar","\$defVar",'$defVar',',',);
6. echo '<pre>$arrayVariable: ';
7. var_dump($myARRAY);
8. echo '</pre>';
9. ?>

$myARRAY: array(17) {
  [0]=>
  NULL
  [1]=>
  int(0)
  [2]=>
  int(1)
  [3]=>
  string(1) "2"
  [4]=>
  string(4) "drei"
  [5]=>
  string(3) "3,5"
  [6]=>
  float(4.5)
  [7]=>
  string(4) "NULL"
  [8]=>
  NULL
  [9]=>
  string(6) "5.5, 6"
  [10]=>
  NULL
  [11]=>
  string(0) ""
  [12]=>
  int(7)
  [13]=>
  string(1) "7"
  [14]=>
  string(7) "$defVar"
  [15]=>
  string(7) "$defVar"
  [16]=>
  string(1) ","
}

Dem aufmerksamen Beobachter ist nun aufgefallen, dass da ein float(4.5) ist, das entspricht der Fließkommazahl 4,5 im Deutschen. Der aufmerksame Beobachter sieht auch die Unterschiede zwischen mit und ohne Hochkommata und einfachen und doppelten Hochkommata und wie man mit einem Backslash ‘\‘ verhindern kann, dass in doppelten Hochkommata der Wert der Variablen ausgegeben wird und statt dessen das Dollarzeichen samt Variablenname ausgegeben wird. Und dem aufmerksamen Beobachter ist die eckige Klammer nicht entgangen. Die eckige Klammer enthält den Schlüssel. Will man ein gezieltes Element aus seinem Array herauspicken, dann erreicht man das mit der folgenden Schreibweise: $arrayVariable["key"]. Ist der Schlüssel (=key = index) eine Ganzzahl (=int = integer), dann kann man die Anführungszeichen weglassen. Für die Variablen in einem Array gilt, was für ganz normale Variablen gilt. Ein Element in einem Array kann ein Array sein. Ich kann Arrays schachteln. $myArray = array(array(element1, element2, ...), array(element1, element2, ...), ...). Um nun das Element 1 im ersten Array anzusprechen muss ich erst das Array-Element über den Schlüssel in der eckigen Klammer ansprechen und dann über die nächste eckige Klammer das erste Element im ersten Array-Element über den entsprechenden Schlüssel des Array-Elementes: $myArray[key][key].

Nach all der trockenen Theorie noch ein kleines Praktisches Anwendungsgebiet, um viel Schreiberei zu sparen und Daten kompakt an einem Ort zu listen und nicht zwischen dem HLMT-Gewusel suchen zu müssen. Den Array in einer ungeordnete Liste in XHTML überführen:

1. <?php
2. $i = 1;
3. $myGallery = array(
4. $i++ =>array(
5. imgData => $imgUrl.'img1',
6. imgExt => 'png',
7. imgAlt => 'Bildbezeichnung1',
8. imgZiel => $artikelPath.'Bildkritik1'
9. ),
10. $i++ =>array(
11. imgData => $imgUrl.'img2',
12. imgExt => 'png',
13. imgAlt => 'Bildbezeichnung2',
14. imgZiel => $artikelPath.'Bildkritik2'
15. ),
16. etc. ...
17. $i++ =>array(
18. imgData => $imgUrl.'img[n]',
19. imgExt => 'png',
20. imgAlt => 'Bildbezeichnung[n]',
21. imgZiel => $artikelPath.'Bildkritik[n]'
22. )
23. );
24. $j = count($myGallery);
25. ?>
26. <ul>
27. <?php
28. for($x=1; $x<=$j; $x++){
29. echo "<li><a href='".$myGallery[$x]['imgZiel']."' ><img src='".$myGallery[$x]['imgData'].$myGallery[$x]['imgExt']."' alt='".$myGallery[$x]['imgAlt']."' /></a></li>";
30. }
31. ?>
32. </ul>

Was ist nun noch neues dazugekommen?

Zeile 5: imgData => $imgUrl.'img[n]', beachten die den schnuckeligen kleinen Punkt. Mit ihm klebt man Strings zusammen und kann so diese nach einander Reihen. Hier spare ich mir die Wiederholdung des Pfades zum Bildordner, der immer gleich ist.

Zeile 24: $j = count($myGallery);. Das ist eine interne PHP-Funktion, die die Elemente in einem Array zählt. Bei unserem verschachtelten Array zählt er die Arrays nicht aber was in dem Array ist. Erst $n = count($myGallery['1']); würde zählen was in dem Array mit dem Schlüssel (=key = index) '1! ist und käme auf den Wert '4'.

Zeile 25-27: PHP arbeitet immer zwischen seinem Anfang und seinem Ende. Ich kann jederzeit rein und raus springen, d.h. fast immer. Innerhalb von PHP-Klassen darf ich das nicht, aber das kommt erst viel später, wenn man sich mit objektorientierten PHP beschäftigt. Davor, dazwischen und danach kann ich ganz profanes (X)HTML schreiben.

Zeile 28: Die for-Schleife for(Startbedingung,Schlußbedingung,Forwärtsbewegung){Funktion};. Zunächst einmal habe ich mit $x=1; die Startbedingung festgelegt. Das erste Mal, wenn die Schleife in die geschweifte Klammer hineinspringt und die darin befindlichen Anweisungen (=Funktionen, Methoden) ausführt, hat die Variable $x den Wert '1' und da die Variable $x den Schlüssel (= key = index) bestimmt $myGallery[$x] schnappt sich das Programm den Wert des entsprechenden Array-Elementes in unserem Fall einen Array, weswegen gleich noch ein zweiter Schlüssel angehängt wird, für den wir zur leichten Erkennung und Zuweisung einen String-Index wählten, der uns verrät was dahintersteckt. Mit diesen Bausteinen bauen wir unsere HTML-Zeile zusammen. Und weil in einer for-Schleife der Vorgang solange wiederholt wird, bis die Schlußbedingung erfüllt ist, also wie in unserem Falle Unsere Variable $x der Anzahl unserer Arrays mit den Bilddaten entspricht.

Natürlich kann man das ganze noch kompakter gestalten und auf den Gag mit der 1 verzichten, dann liest sich der Array wie folgt:

1. $myGallery = array(array(img1,ext1,Bez1,Url1),array(img2,ext2,Bez2,Url2), etc.)

Die for-Schleife verändert sich dabei ebenfalls etwas:

1. $j = count($myGallery);
2. for($x=0; $x<$j; $x++){ ... };

Count() zählt vier Elemente, der Index aber geht nur bis drei. Also bleibt darunter und ist damit nicht kleiner gleich sondern eben nur kleiner.

Ebenso verändert sich der Zusammenbau der Quelltextbausteine:

1. echo "<li><a href='".$myGallery[$x][3]."' ><img src='".$myGallery[$x][0].$myGallery[$x][1]."' alt='".$myGallery[$x][2]."' /></a></li>";

Man beachte das 0, 1, 2, 3 ... man stelle sich einfach vor, dass als man noch ganz klein war und der große Bruder auf geheiß der Mutter die Tüte Gummibärchen teilen musste, dass er als er die Bärchen in das kleine Händchen zählte, er mit der Zahl 0 das erste Bärchen knurrend übergab. Dann klappts schon irgendwie.

Viel Spaß mit dem ersten eigenen tatsächlich nützlichen PHP-Programm. Eine erste Lektion beinah ohne echo 'Hallo Welt.';

]]>