Bildbearbeitung

Eine Homepage lebt nicht nur vom Text, sondern auch von Bildern und Fotos.

Digitale Kameras speichern die gemachten Fotos meist mit Großbuchstaben ab. Damit es bei der Bereitstellung von Bildern auf Servern und der Darstellung in den unterschiedlichen Browsern nicht zu Problemen kommt, sollten Sie einige (manche mögen das für antiquiert halten) Regeln beachten:

Alle Buchstaben werden klein geschrieben, auch und gerade die der Extensions.

Es werden kurze Dateinamen verwendet (und bitte keine "Romane").

Wenn es viele Dateien mit gleichem Namen sind, benennen Sie diese entweder um, oder kopieren sie zusammengehörende in einen eigenen Ordner.

Image Map 2

Ich hätte gerne eine Deutschlandkarte, auf der man mit der Maus über einzelne Bereich fährt und dann dort bestimmte Informationen angezeigt bekommt; z.B.: Wie das Bundesland heißt.

Noch einen Schritt weiter: Mit einem Klick auf sein Bundesland wird man sofort auf die dazugehörige Seite geleitet.

Das realisiert man mit dem Freeware-Programm Programm Fast Image Map 2  (aktuelle Version: 2.2.1 [funktioniert auch noch unter Windows 11]).

Vorgehensweise beim Programm Fast Image Map 2.

  Vorgehensweise
1) Datei → Neu; neues Fenster öffnet sich.
2) Name der Image-Map eingeben.
3) Bilddatei für die Image Map aussuchen.
4) Beschreibungstext eingeben.
5) OK anklicken.
6) Auf die entsprechende Verweisfläche klicken: Kreis, Rechteck, Polygon (vieleckig).
7) Bei polygoner Verweisfläche mit vielen Klicks diese 1x umrunden. Es reicht ein Klick an der Stelle, an der die Richtung sich ändern soll.
8) Beschreibungstext in das Fenster unten links in die Zeile "alt, title" eingeben.
9) Reiter Image Map "in neue HTML-Datei einfügen" auswählen und dann im neuen Fenster zuerst "Speichern unter ..." auswählen und
entsprechenden Namen vergeben.
10) Fenster schließen (sonst geht es nicht weiter).
11) Bei (6) geht es weiter bis zu (8).
12) Statt (9) nun nur noch "Speichern" drücken und das Fenster schließen. Nun passiert etwas Interessantes: alle bisherigen Koordinaten sind
weiterhin vorhanden, solange die Image-Bearbeitung nicht unterbrochen (d.h. das Programm nicht beendet wird).
So geht es weiter, bis alle Verweisflächen aufgenommen wurden.
13) Die blauen Daten (im Fenster) bitte markieren und kopieren.
14) Die Seite in CMSimple_XH aufrufen und dort im Editormodus das HTML-Fenster öffnen.
15) Mit <Strg> + <V> diese Daten an der Stelle einfügen, an der das Bild hin soll.
16) Nun muss zuerst gespeichert werden. Anschließend bekommen Sie eine Fehlermeldung, dass das Bild nicht vorhanden sei. Das ist richtig.
Rufen Sie nochmals den HTML-Modus auf und suchen Sie "scr". Ändern Sie nun den richtigen Pfad zum Bild
( CMSimple_XH = ./images/dateiname.jpg ). Nach dem Speichern wird nun auch das Bild korrekt angezeigt.
17) Loggen Sie sich nun aus, damit die Contentdatei gespeichert und auch ein BAK-Up angelegt wird.

Meine 1. Realisierung 

 im Juli 2013 für die Anfrage von roze  aus dem CMSimple_XH Forum.

 

Als Kopiervorlage freigegeben: © 2013, Michael Zajusch

Free Imagemapper V2.0

Ich hätte gerne eine Deutschlandkarte, auf der man mit der Maus über einzelne Bereich fährt und dann dort bestimmte Informationen angezeigt bekommt; z.B.: Wie das Bundesland heißt.

Noch einen Schritt weiter: Mit einem Klick auf sein Bundesland wird man sofort auf die dazugehörige Seite geleitet.

Das realisiert man mit dem Freeware-Programm Programm Free ImageMapper 2  (aktuelle Version: 2.0 [funktioniert auch unter Windows 11 und liegt sowohl für 32- als auch 64-bit vor]).

Vorgehensweise beim Programm Free ImageMapper 2.

  Vorgehensweise
1) File→ Create new Map;
neues Fenster öffnet sich. 
2) Name der Image-Map eingeben. 
3) Bilddatei für die Image Map aussuchen. 
4) OK anklicken.
5)

Auf die entsprechende Verweisfläche 
unter Shapes klicken:

Kreis, Rechteck, Polygon (vieleckig).

6)

Es gibt einen Anfangsklick am Startpunkt
und mit der Maus wird das Feld (Rechteck / Kreis)
entsprechend aufgezogen. Am Endpunkt wird durch
den Klick das Feld markiert. Dann muss noch etwas 
im nächsten Fenster ausgewählt werden (ist in 
CMSimple_XH nicht wichtig, weil diese Angaben aus dem
Quellcode entfernt) und dann entsprechend rot
schraffiert dargestellt.

 
7) Bei polygoner Verweisfläche diese mit vielen Klicks diese 1x umrunden. Es reicht ein Klick an der Stelle, an der die Richtung sich ändern soll.
8) Beschreibungstext in das Fenster unten links in die Zeile "alt, title" eingeben.
9) Reiter Image Map "in neue HTML-Datei einfügen" auswählen und dann im neuen Fenster zuerst "Speichern unter ..." auswählen und
entsprechenden Namen vergeben.
10) Fenster schließen (sonst geht es nicht weiter).
11) Bei (6) geht es weiter bis zu (8).
12)
Statt (9) nun nur noch "Speichern" drücken
und das Fenster schließen.
Nun passiert etwas Interessantes: alle
bisherigen Koordinaten sind weiterhin 

vorhanden, solange die Image-Bearbeitung nicht unterbrochen (d.h. das Programm nicht beendet wird). So geht es weiter,
bis alle Verweisflächen aufgenommen wurden.

13) Die Daten (im unteren Fenster) markieren und kopieren.
14) Die Seite in CMSimple_XH aufrufen und dort im Quellcode-Modus das HTML-Fenster öffnen.
15) Mit <Strg> + <V> diese Daten an der Stelle einfügen, an der das Bild hin soll.
16) Nun muss zuerst gespeichert werden. Anschließend bekommen Sie eine Fehlermeldung, dass das Bild nicht vorhanden sei. Das ist richtig.
Rufen Sie nochmals den HTML-Modus auf und suchen Sie "scr". Ändern Sie nun den richtigen Pfad zum Bild
( CMSimple_XH = ./images/dateiname.jpg ). Nach dem Speichern wird nun auch das Bild korrekt angezeigt.
17) Loggen Sie sich nun aus, damit die Contentdatei gespeichert und auch ein Bak-Up angelegt wird.

 

Als Kopiervorlage freigegeben: © 2025, Michael Zajusch

 

 

 

Als Kopiervorlage freigegeben: © 2013, Michael Zajusch