SVG: Im <OBJECT>-Tag anklickbar machen (Teil 2)

Hier noch eine weitere Variante, welche praktikabler bei Funktionsaufrufen ist. Auf die Größenangabe über den DIV-Selektor wurde hier verzichtet, weiterhin wird als Parent-Element der <SPAN>-Tag verwendet, was ein horizontales Aneinanderreihen der Grafiken erleichtert.
Die hier beschriebene Methode (ohne style-Attribut) ist von der Struktur her, etwas sauberer.

Beispiel

<span class="svglink" style="width: 167px; height: 77px;">
  <a href="javascript:alert('Test')" style="width: 167px; height: 77px;"></a>
  <object data="logo.svg" type="image/svg+xml" width="167" height="77">
    <param name="src" value="logo.svg" />
    <param name="wmode" value="transparent" />
    <img src="logo.jpg" alt="http://www.ufz.de/" width="167" height="77" />
  </object>      
</span>

Die CSS-Klasse svglink

.svglink {
  position: relative;
}
span.svglink  {
  display: inline-block;
}
/* IE7-Hack, gleicht das Aussehen etwas an */
*+html .svglink  {
  padding: 0 0.25em 0.25em 0;
}  
.svglink a, .svglink object  {
  position: absolute;
  width: inherit;
  height: inherit;
}  
.svglink a  {
  /* Die (beiden!) Eigenschaften sind wichtig,
  da im IE die SVG sonst nicht anklickbar ist. */ 
  background-image: url(1x1transp.gif);
  background-color: transparent;
  z-index: 2;
}
.svglink object  {
  z-index: 1;
}

Der Unterschied zu der hier beschriebenen Methode, ist die Zuweisung von display: inline-block; bei der Verwendung des <SPAN>-Tags.
Es kann parallel mit dem <DIV>-Tag gearbeitet werden.

komplettes Beispiel

SVG: Im <OBJECT>-Tag anklickbar machen (Teil 2)

Hier noch eine weitere Variante, welche praktikabler bei Funktionsaufrufen ist. Auf die Größenangabe über den DIV-Selektor wurde hier verzichtet, weiterhin wird als Parent-Element der <SPAN>-Tag verwendet, was ein horizontales Aneinanderreihen der Grafiken erleichtert.
Die hier beschriebene Methode (ohne style-Attribut) ist von der Struktur her, etwas sauberer.

Beispiel

<span class="svglink" style="width: 167px; height: 77px;">
  <a href="javascript:alert('Test')" style="width: 167px; height: 77px;"></a>
  <object data="logo.svg" type="image/svg+xml" width="167" height="77">
    <param name="src" value="logo.svg" />
    <param name="wmode" value="transparent" />
    <img src="logo.jpg" alt="http://www.ufz.de/" width="167" height="77" />
  </object>      
</span>

Die CSS-Klasse svglink

.svglink {
  position: relative;
}
span.svglink  {
  display: inline-block;
}
/* IE7-Hack, gleicht das Aussehen etwas an */
*+html .svglink  {
  padding: 0 0.25em 0.25em 0;
}  
.svglink a, .svglink object  {
  position: absolute;
  width: inherit;
  height: inherit;
}  
.svglink a  {
  /* Die (beiden!) Eigenschaften sind wichtig,
  da im IE die SVG sonst nicht anklickbar ist. */ 
  background-image: url(1x1transp.gif);
  background-color: transparent;
  z-index: 2;
}
.svglink object  {
  z-index: 1;
}

Der Unterschied zu der hier beschriebenen Methode, ist die Zuweisung von display: inline-block; bei der Verwendung des <SPAN>-Tags.
Es kann parallel mit dem <DIV>-Tag gearbeitet werden.

komplettes Beispiel

Flash: Audio-Datei in Webseite einbetten

Nachfolgend beschreibe ich Schritt für Schritt das Erzeugen und Einbetten einer Audiodatei als Flash-Objekt in eine Webseite.

1. Die Audiodatei am besten im WAV-Format z.B. mit einem Handy aufzeichnen (wenn möglich gleich als MP3 speichern).
2. Liegt bereits eine MP3-Datei vor, kann dieser Punkt übersprungen werden. Jetzt sollte ein geeigneter MP3-Encoder gefunden werden, hier kann man z.B. den WAV to MP3 Converter benutzen (Herstellerseite).
   Die Bedienung des Tools ist einfach, die gewünschten Dateien über Add hinzufügen und dann Start klicken.
3. Verringern Sie die Bit- und Samplerate (max.160kbs/44100Hz) wie im Screenshot dargestellt, sonst kann es später Probleme beim Import nach Flash geben.

Erforderliche Einstellungen im MP3-Encoder

1. Ist die MP3-Datei erzeugt geht es im Adobe Flash, mit der im unten angehängten Download enthaltenen FLA-Datei, weiter. Öffnen Sie die FLA-Datei und wählen Datei->Importieren->In Bibliothek importieren....
   Anschließend sollte Ihre MP3 in der Bibliothek (Bibliothek evtl. mit STRG + L oder Fenster->Bibliothek öffnen) sichtbar sein. Im Kontextmenü (rechte Maustaste) der Datei wählen Sie Eigenschaften und nehmen die im Screenshot dargestellten Einstellungen vor (sind die gezeigten Einstellungen nicht sichtbar klicken Sie auf die Schaltfläche Erweitert).

var soundToLoad:Sound = new Sound();
startSound_btn.onRelease = function() {
  var song = songName_txt.text;
  soundToLoad.attachSound("mp3");
  soundToLoad.start(0,1);
};

In der FLA-Datei integriertes Actionscript, welches die MP3-Datei beim Klick
auf das Symbol abspielt.

Aktivieren Sie die Checkbox Export für Actionscript
und tragen Sie unter Bezeichner "mp3" ein.

1. Sollte die endgültige Soundqualität nicht ausreichen, können Sie im oben gezeigten Dialogfeld unter dem Dropdown Komprimierung->MP3 weitere Einstellungen vornehmen.
2. Anschließend wird das Projekt mit den Standardeinstellungen über Datei->Veröffentlichen veröffentlicht, dabei sollte am Speicherort der FLA-Datei eine SWF- und eine HTML-Datei entstehen.
3. Jetzt muss die SWF-Datei auf den Webserver hochgeladen werden. Am UFZ benutzt man dazu das Bild- und Filearchiv im administrativen Intranetbereich. Man lädt hier die SWF-Datei hoch und erhält eine ID (z.B. 123456).
4. Jetzt muss man die hochgeladene Datei noch in der HTML-Datei referenzieren. Entweder die beim Veröffentlichen entstandene HTML-Datei verwenden oder den unten stehenden Quelltext (am UFZ wird für die Dateireferenz das Makro getfiler verwendet).

HTML-Quelltext zur Verwendung auf der eigenen Webseite

Achten Sie bitte darauf, dass die SWF-Datei zweimal referenziert werden muss, hier mit Hilfe des Makroaufrufs [§fgetfiler_123456§] (UFZ-Beispiel, ansonsten ohne das Makro z.B. http://www.foo.com/data/sample123456.swf).

Symbol anklicken um den Sound zu hören

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="37" height="41" id="erste_sahne" align="middle">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="movie" value="[§fgetfiler_123456§]" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#ffffff" />
  <embed src="[§fgetfiler_123456§]" quality="high" bgcolor="#ffffff" width="37" height="41" name="erste_sahne" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

komplettes Beispiel

Flash: Audio-Datei in Webseite einbetten

Nachfolgend beschreibe ich Schritt für Schritt das Erzeugen und Einbetten einer Audiodatei als Flash-Objekt in eine Webseite.

1. Die Audiodatei am besten im WAV-Format z.B. mit einem Handy aufzeichnen (wenn möglich gleich als MP3 speichern).
2. Liegt bereits eine MP3-Datei vor, kann dieser Punkt übersprungen werden. Jetzt sollte ein geeigneter MP3-Encoder gefunden werden, hier kann man z.B. den WAV to MP3 Converter benutzen (Herstellerseite).
   Die Bedienung des Tools ist einfach, die gewünschten Dateien über Add hinzufügen und dann Start klicken.
3. Verringern Sie die Bit- und Samplerate (max.160kbs/44100Hz) wie im Screenshot dargestellt, sonst kann es später Probleme beim Import nach Flash geben.

Erforderliche Einstellungen im MP3-Encoder

1. Ist die MP3-Datei erzeugt geht es im Adobe Flash, mit der im unten angehängten Download enthaltenen FLA-Datei, weiter. Öffnen Sie die FLA-Datei und wählen Datei->Importieren->In Bibliothek importieren....
   Anschließend sollte Ihre MP3 in der Bibliothek (Bibliothek evtl. mit STRG + L oder Fenster->Bibliothek öffnen) sichtbar sein. Im Kontextmenü (rechte Maustaste) der Datei wählen Sie Eigenschaften und nehmen die im Screenshot dargestellten Einstellungen vor (sind die gezeigten Einstellungen nicht sichtbar klicken Sie auf die Schaltfläche Erweitert).

var soundToLoad:Sound = new Sound();
startSound_btn.onRelease = function() {
  var song = songName_txt.text;
  soundToLoad.attachSound("mp3");
  soundToLoad.start(0,1);
};

In der FLA-Datei integriertes Actionscript, welches die MP3-Datei beim Klick
auf das Symbol abspielt.

Aktivieren Sie die Checkbox Export für Actionscript
und tragen Sie unter Bezeichner "mp3" ein.

1. Sollte die endgültige Soundqualität nicht ausreichen, können Sie im oben gezeigten Dialogfeld unter dem Dropdown Komprimierung->MP3 weitere Einstellungen vornehmen.
2. Anschließend wird das Projekt mit den Standardeinstellungen über Datei->Veröffentlichen veröffentlicht, dabei sollte am Speicherort der FLA-Datei eine SWF- und eine HTML-Datei entstehen.
3. Jetzt muss die SWF-Datei auf den Webserver hochgeladen werden. Am UFZ benutzt man dazu das Bild- und Filearchiv im administrativen Intranetbereich. Man lädt hier die SWF-Datei hoch und erhält eine ID (z.B. 123456).
4. Jetzt muss man die hochgeladene Datei noch in der HTML-Datei referenzieren. Entweder die beim Veröffentlichen entstandene HTML-Datei verwenden oder den unten stehenden Quelltext (am UFZ wird für die Dateireferenz das Makro getfiler verwendet).

HTML-Quelltext zur Verwendung auf der eigenen Webseite

Achten Sie bitte darauf, dass die SWF-Datei zweimal referenziert werden muss, hier mit Hilfe des Makroaufrufs [§fgetfiler_123456§] (UFZ-Beispiel, ansonsten ohne das Makro z.B. http://www.foo.com/data/sample123456.swf).

Symbol anklicken um den Sound zu hören

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="37" height="41" id="erste_sahne" align="middle">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="movie" value="[§fgetfiler_123456§]" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#ffffff" />
  <embed src="[§fgetfiler_123456§]" quality="high" bgcolor="#ffffff" width="37" height="41" name="erste_sahne" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

komplettes Beispiel

HTML/Javascript: Framegröße an Inhalte anpassen

Das folgende Beispiel kann genutzt werden, wenn man die Framegröße automatisch an wechselnde Inhaltgrößen anpassen möchte. Ein Anwendungsfall wären die UFZ-Adventskalender, welche sich als Popup öffnen und Kalender unterschiedlicher Größe zeigen. Frames sind hier deshalb eingesetzt weil sich das Menü zum Wechseln der Kalender in einem solchen befindet (siehe Screenshots).

komplettes Beispiel

HTML/Javascript: Framegröße an Inhalte anpassen

Das folgende Beispiel kann genutzt werden, wenn man die Framegröße automatisch an wechselnde Inhaltgrößen anpassen möchte. Ein Anwendungsfall wären die UFZ-Adventskalender, welche sich als Popup öffnen und Kalender unterschiedlicher Größe zeigen. Frames sind hier deshalb eingesetzt weil sich das Menü zum Wechseln der Kalender in einem solchen befindet (siehe Screenshots).

komplettes Beispiel

PHP: File Upload

<?php
$message = "";

if(isset($_FILES["file_name"])) 
{
  $upload_dir = "/www/data/";
  $file_name  = $_FILES['file_name']['name'];
  $file_temp  = $_FILES['file_name']['tmp_name'];
  
  move_uploaded_file($file_temp,
                     $upload_dir.$file_name);

  $message = "
$file_name 
              ($file_size Byte) nach
              $upload_dir hochgeladen!
";
}

$html = <<< HTML
<form action="{$_SERVER['PHP_SELF']}"
      enctype="multipart/form-data"
      method="post">
<input type="file" name="file_name" />
<input type="submit" value="Kopieren" />
</form>
HTML;

echo $html.$message;
?>