Html - Bilder über Foto positionieren

[Sayphong]

:calim:
Wer kann helfen : Ich habe auf eine Webseite ein Gruppenfoto (mehrere Personen). Habe jede Person rauskopiert und als .gif Transparenter Hintergrund gespeichert. Die möchte ich nun in der Webpage an der jeweiligen Stelle auf das Foto plazieren. Durch anklicken der Personen soll nun dessen Seite geöffnet werden. Kann man das in HTML - und wie geht das mit der genauen Positionierung?

danke sayphong

 

[www-dualdisk-de]

Re: Html - Bilder über Foto positionieren

Hallo Sayphong,

du schreibst dass du danach das Bild als transparentes .gif gespeichert hast und als Hintergrundbild (Background Image) verwendet hast.

Auf die jeweilige Person zu klicken, ist so nicht möglich, da es ja "nur" ein Hintergrundbild ist.

Lösung:

Öffne dein Transparentes Bild , oder besser: hast du die einzelnen Personen die Du rauskopiert hast, als frei bewegliche ebene noch vorliegen ?

Dann ein "Image-Map" erstellen, das heisst: jedem Umriss der jeweiligen Person, wird ein Link zu der besagten Seite zugeordnet.

Welche Programme benutzt du ?
Kommerzielle oder Freeware/Opensource?
Photoshop/Fireworks/Ulead PhotoImpact oder das kostenlose Gimp ?

Was für'n HTML Editor benutzt du ?
Dreamweaver,GoLive und Co oder die kostenlosen Notepad / Phase 5 ???

 

[Sayphong]

Re: Html - Bilder über Foto positionieren

Danke, dualdisk,
bisher habe ich meine Programme immer nur von Hand geschrieben, habe kein spezielles Prog für Html. Meine Fotos bearbeite ich mit Corel Photopaint 12. Die Einzelbilder mit transparenten Background kann man wieder zu einem Gruppenfoto zusammenschieben. Ich wollte sie über das Hintergrundbild legen und dass sie beim Anklicken evt. die Farbe verändern und dann eine bestimmte Seite aufrufen. Ich kann sie aber im Html scipt nicht positionieren.
Was für ein Prog kann das und welches schlägst Du vor?

 

[andreaskf]

Re: Html - Bilder über Foto positionieren

Hallo Sayphong.

Du möchtest einzelne Positionen auf einem Bild mit verschiedenen Seiten verlinken. Dazu benötigst Du im HTML die Funktion <map>.

Das setzt sich dann in etwa so zusammen:
<map name="XYZ">
<area href="zielseite.htm" shape="rect" coords="Wert1, Wert2, Wert3, Wert4">
</map>
<img src="bildname" usemap="XYZ">

Dieses würde dann eine rechteckige "Maske" erzeugen, die als Link auf einer Grafik liegt. In Deinem Beispiel könnte dieses ja ein Kopf sein.

Der Bereich <map> </map> kurz erklärt:
name="XYZ" = hier einen Namen zur eindeutigen identifizierung einsetzen
<area... = Für jeden Link mußt Du eine solche Zeile erstellen, und vor </map> einsetzen
href="zielseite.htm" = die URL zur entsprechendnen Seite
shape="rect" = definiert einen rechteckigen Linkbereich
coords=" Wert1, ......." = Hier werden die eckpunkte des Rechtecks eingetragen. Dabei die Zahlen in Pixelangaben einsetzen

Dann kann wo es gewünscht wird die Grafik wie gewohnt auf einer Seite eingesetzt werden mit dem Zusatz usemap="XYZ" (statt XYZ den bei map eingegebenen Namen verwenden.
Das ganze kann weiterhin mit Kreisen statt einem Rechteck und auch freihändig gemacht werden. Dann sieht allerdings auch die Einteilung etwas anders aus.

Ich hoffe Du kommst damit klar. Die gif Dateien kannst Du somit weglegen, denn die werden nicht benötigt dazu. Für weitere Fragen stehe ich dann wieder zur Verfügung.....

miG

 

[Sayphong]

Re: Html - Bilder über Foto positionieren

Danke, so hatte ich mir das als 2. Lösung vorgestellt, also ohne die Schnipselfotos.

Aber noch eine Frage : Was für ein Programm kann man benutzen um Webpages zu erzeugen, (Grafik und so alles)?

Sayphong

 

[andreaskf]

Re: Html - Bilder über Foto positionieren

Hallo Sayphong.

Da Du ja bereits geschrieben hattest, das Du HTML von Hand schreibst, dann würd ich vorschlagen es auch so zu belassen. Den die Programme (sogenannte Generatoren) arbeiten nur bedingt richtig, da sie ja nicht denken können im Gegensatz zu uns Menschen......
Für die Grafik nimmst Du ja Corel 12. Wenn Du mit Corel PhotoPaint arbeitest, stehen Dir ja alle Türen offen, den die Funktionsvielfalt ist riesig.

Programmiersprachen richtig anwenden heisst in erster Linie die Befehle und Funktionen auswendig lernen, oder eine Übersicht bzw. ein Buch daneben legen und zur Hilfe nutzen. Empfehlenswert wäre hier das Compendium von Stefan Münz (SELF HTML). Es gibt/gab davon auch mal eine Offlinelösung. Sehr zu empfehlen als Hilfsmittel.

Und wenn es trotz alle dem ein Programm sein sollte, dann wären Frontpage und Dreamwaver zu erwähnen. Diese sind dann allerdings nur für die HTML Sachen und nicht für die Grafik.

miG