eckladen24 » Bilder http://eckladen24.de Mon, 04 Jul 2011 13:45:27 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 CSS-TIPP: Einfache Bildvergrößerung http://eckladen24.de/2009/10/css-tipp-einfache-bildvergroesserung/ http://eckladen24.de/2009/10/css-tipp-einfache-bildvergroesserung/#comments Thu, 29 Oct 2009 11:51:11 +0000 alfred http://eckladen24.de/?p=973 Kleine Vorschaubilder machen eine Webseite erst so richtig interessant. Nur sollte der Besucher auch die Möglichkeit haben, die auch vergrößern zu können, damit er diese in ihrer vollen Pracht genießen kann. Das ist sogar ohne den Einsatz voluminöser Skripte möglich, denn dazu ist nur der geschickte Einsatz des overflow-Parameters von CSS notwendig.

Dieser Parameter bestimmt, ob der Inhalt eines Parameters gezeigt werden soll, auch wenn der Container für den Inhalt zu klein ist. Mit dem Wert hidden wird die Anzeige der Objekte gezwungenermaßen auf die vorgegebene Größe des DIVs beschränkt. Wird der Wert visible verwendet ist die Darstellung aller Objekte erlaubt.
Wenn zudem mit einer absoluten Positionierung der DIVs gearbeitet wird, ist es notwendig beim Vergrößern der Bilder einen alternativen Umbruch der anderen Seitenelemente zu verhindern. Hierfür wird das Bild einfach über die bestehenden Inhalte der Seite übergestülpt. Zur besseren Veranschaulichung ein Beispiel:

.bildausschnitt{
position: absolute;
width: 100px;
height: 100px;
overflow: hidden;}

Das Bild wird in einen DIV-Container gesteckt, dem die Klassen zugewiesen sind. Mit onMouseOver und onMouseOut werden die overflow-Parameter der Klasse verändert.
Nachfolgend der Code zum einbinden in die HTML-Datei:

<div onMouseOver=this.style.overflow="visible"
onMouseOut=this.style.overflow="hidden" class=bildausschnitt>
<img src="Bildname.jpg" width="623" height="297" alt="" border="0"/></div>

]]> http://eckladen24.de/2009/10/css-tipp-einfache-bildvergroesserung/feed/ 0 XHTML Grundgerüst http://eckladen24.de/2009/09/xhtml-grundgerust/ http://eckladen24.de/2009/09/xhtml-grundgerust/#comments Fri, 04 Sep 2009 23:11:18 +0000 alfred http://eckladen24.de/blog/?p=340 Ein Beispiel für ein standardkonformes XHTML Grundgerüst. Um das nicht im Raum allein stehen zu lassen gibt es im Anschluss noch einige Erklärungen dazu.


<?xml version="1.0" encoding="ISO-8859-1"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>HTML Grundgerüst</title>
<meta name="keywords" content="keywords, html, aufbau" />
<meta name="description" content="Hier kommt die Beschreibung der Seite hin." />
<meta name="author" content="Max Mustermann" />
<meta name="language" content="de" />
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>

  • Zum DOCTYPE muss ich sicher nichts mehr erklären, zu beachten ist hierbei nur, kein Zeilenumbruch zwischen zwei Anführungsstrichen. Weitere DOCTYPE Deklarationen sind in meiner kleinen DOCTYPE Übersicht zu finden.
  • Das <html>-Tag ist der Rahmen für die HTML-Datei. Alle Weiteren Tags stehen zwischen <html> und </html>
  • Der Head-Tag bietet einen Bereich für zusätzliche Informationen, die von Browser und Suchmaschinen ausgelesen werden können, zum Beispiel den Seitentitel und verschiedene Meta-Tags.
    • Das titel-Tag gehört zwischen den öffnenden und schließenden head-Tags (<head></head>), diese Angaben werden vom Browser in der Titelleiste angezeigt. Im Seitentitel sollten Schlüsselwörter verwendet werden, die in Bezug zum Inhalt der jeweiligen Seite stehen.
    • Die Meta-Tags stehen ebenfalls im Kopf-Bereich des HTML-Dokuments, beim Abrufen der Webseite an den Browser geschickt, aber nicht angezeigt. Mithilfe von Meta-Tag lassen sich Suchroboter von Suchmaschinen steuern. Suchmaschinen indizieren und benutzen die Meta-Angaben, auch wenn die Inhalte, der Meta-Angaben, gegenwärtig nicht zur Bestimmung des Rang herangezogen werden.
  • Das Body-Tag ist der eigentliche Seitenbereich, er enthält alle weiteren Tags und die Texte und Bilder, die auf der Webseite angezeigt werden sollen.
  • Externe Informationen werden mit Hilfe des <link>-Elements eingebunden

<link type="text/css" rel="stylesheet" href="style.css" />

  • Das Attribut rel gibt an, in welcher Beziehung die Information zu der XHTML-Datei steht. In diesem Beispiel wird ein Sylesheet eingebunden, also wird der Wert “stylesheet” verwendet. Durch einen relativen Link (href) wird auf die Externe CSS-Datei (style.css) verwiesen.
]]> http://eckladen24.de/2009/09/xhtml-grundgerust/feed/ 0 Der 1 Terabyte USB Stick http://eckladen24.de/2009/08/der-1-terabyte-usb-stick/ http://eckladen24.de/2009/08/der-1-terabyte-usb-stick/#comments Mon, 31 Aug 2009 10:48:14 +0000 alfred http://eckladen24.de/blog/?p=280 Ok, im Laden ist der USB Stick noch nicht zu haben. Ebenso handelt es sich dabei um keinen USB-Speicherstick im eigentlichen Sinne. Es ist jedoch kinderleicht den FRITZ! WLAN USB Stick per Software zu einem AVM Streaming Stick upzudaten. Somit lassen sich Bilder, Musik und Videos kabellos an die HIFI-Anlage, den DVD Player, den Fernseher oder andere Mediengeräte mit USB-Anschluss übertragen.

Egal, ob MP3-, WMA-, MPEG-, AVI- oder JPEG-Dateien, der AVM Streaming Stick überträgt alle Formate. Die FRITZ!Box bekommt die Daten für das Streaming aus einem lokalen
Speicher (z.B. Festplatte), über UPnP (z.B. Media-Server) oder von einem Online-Speicher aus dem Internet und
überträgt diese mittels WLAN an den FRITZ!WLAN USB Stick v1.1. Zukünftig soll auch der Abruf von Radiostreamingangeboten im Internet möglich sein. Bei der Einrichtung wird die kostenlose FRITZ! Labor-Firmware auf den FRITZ! WLAN USB Stick v1.1 übertragen, in Folge dessen wird beispielsweise ein digitaler Bilderrahmen den Stick fortan als USB-Speicherstick erkennen. Bedienung, Steuerung und Abruf der Inhalte erfolgen weiterhin durch die Bedienoberfläche,  in der Regel geschieht dies mit Hilfe der Fernbedienung, des Abspielgeräts.

Wie gehe ich vor:

  1. Einstellungen sichern,
  2. die FRITZ! Labor-Firmware herunterladen,
  3. die Firmware-Datei auf die FRTZ!Box Fon WLAN 7270 updaten,
  4. AVM_FRITZ!_WLAN_Stick_Control_Setup.exe auf dem PC installieren und den Anweisungen zur Umprogrammierung des FRITZ!WLAN USB Sticks folgen
  5. anschließend den USB Stick in die FRITZ!Box stecken,
  6. hat das blinken der FRITZ!Box aufgehört, den USB Stick wieder abziehen,
  7. abschließend Spaß bei der Nutzung des USB Stick und einen Mediengerät haben.Cool

Für Fragen, Anregungen oder Ergänzungen nutzt bitte die Möglichkeit einen Kommentar zu schreiben.

]]> http://eckladen24.de/2009/08/der-1-terabyte-usb-stick/feed/ 0 1. Bilder verkleinern und herunterrechnen http://eckladen24.de/2007/07/1-bilder-verkleinern-und-herunterrechnen/ http://eckladen24.de/2007/07/1-bilder-verkleinern-und-herunterrechnen/#comments Fri, 13 Jul 2007 21:27:18 +0000 Baumschubbser http://eckladen24.de/blog/?p=411 Letztens wollte ich Bilder per Email verschicken. Natürlich hatten sie Posterformat und waren viel zu groß für den Anhang.

Lösung: Installiere Imagemagick im Terminal mit dem Befehl

sudo apt-get install imagemagick

danach solltest Du die zu bearbeitenden Bilder in einen neuen Ordner verschieben und mit dem Befehl

mogrify -resize 1024×768 *.jpg

bearbeiten.

Der Befehl

mogrify -quality 50 -resize 1024×768 *.jpg

verändert die Bilder in Größe und Qualität.

Sollte es nicht funktionieren, könnte es daran liegen, daß die
Dateiendungen nicht .jpg, sondern .JPG heißen. Linux unterschiedet
nämlich Groß- und Kleinschreibung. Aber vielleicht wusstest Du das ja
eh schon. L&auml;chelnd

Nachzulesen unter:

http://www.modi-art.de/webdesign/howto-bilder-verkleinern

[adrotate group="3"]

]]> http://eckladen24.de/2007/07/1-bilder-verkleinern-und-herunterrechnen/feed/ 0 IrfanView http://eckladen24.de/2007/01/irfanview/ http://eckladen24.de/2007/01/irfanview/#comments Mon, 08 Jan 2007 11:44:47 +0000 alfred http://eckladen24.de/blog/?p=3 IrfanView ist ursprünglich als “einfacher” Grafik-Viewer für Bildformate wie Joint Photografic Experts Group (Jpeg), Device-independent Bitmaps (Bmp) und den Webstandard Graphics Interchange Format (Gif) vorgesehen.
Dank Erweiterungen (Plugins) ist es möglich auch andere Bildformate wie Canonformate oder Rohe Bilddateien von einer Digital Kamera zu öffnen und zu konvertieren. Außerdem ist es möglich Videos wie Audio Video Interleave (Avi) oder Moving Picture Experts Group (Mpeg) abzuspielen. In der neuesten Version ist es außerdem möglich zu zoomen.

Als weitere wichtige Feautures von IrfanView erweist sich zum Beispiel die Batch- Konvertierung bzw. –Umbenennung. Hierbei ist es möglich mehrere Dateien auf einmal zu bearbeiten, sprich in ein anderes Format zu bringen, Größe zu verändern etc. oder “einfach” nur mehreren Dateien eine bestimmte Nummer als Dateinamen zu vergeben. Desweiteren hat das Programm eine Slideshow Funktion mit der sich Bildervorführungen individuell gestalten lassen. Zum Beispiel lässt sich Musik einfügen oder ein bestimmter Text erscheint oder die Sortierung der Dateien nach bestimmten Kriterien. Das Ergebnis der DiaShow kann dann als ausführbare Datei gespeichert werden, oder – sofern Nero vorhanden ist – als Daten oder als Video- CD gespeichert werden, die dann auf jedem DVD- Spieler abgespielt werden kann.

Irfan View schließt mit der aktuellen Version 3.99 die Lücke zwischen Grafik Viewer und Movie Player und wird somit zur einer Leistungsstarken Multimediaanwendung, welche noch dazu kostenlos ist und – gemäß ihren großen Funktionsumfang – trotzdem noch leicht zu bedienen ist!

]]> http://eckladen24.de/2007/01/irfanview/feed/ 0