Ein Bild mit verschiedenen links

minbo

minbo

Aktives Mitglied
Thread Starter
Dabei seit
30.05.2003
Beiträge
1.163
Reaktionspunkte
2
Hallo,
ich würde gerne ich Dreamweaver folgendes erschaffen:

Ich habe ein Bild und bestimmten Teilen des Bildes
möchte ich einen link zu weisen. Sprich die obere hälfte des Bildes führt zu seite x die untere zu seite y.

Wie mache ich das?

minbo
 
Hi!

a) Das Bild in zwei Teile schneiden
b) mit Image Maps

Martin
 
gut, es sind natürlich insgesamt fünf teile im Bild, die ich
verlinken möchte, aber das ist ja nicht das Thema.

Wenn ich die Bilder auf die HP stelle, ist jedesmal eine
Lücke zwischen den einzelnen Bildern. Wie kriege ich die
weg?
Was ist image maps (wahrscheinlich ein Teil um die
Lücken weg zu bekommen, oder?)

minbo
 
Bild in einzelne Teile zerlegen ist wahrscheinlich das Beste... die Ausrichtung dann evtl. über eine Tabelle lösen

Eine Imagemap kannst du ganz einfach (gehe jetzt mal von Dreamweaver MX aus) erstellen, indem Du auf das Bild klickst, und dann in der Eigenschaftenpalette unten links z.B. das Quadrat auswählst und dann mit dem Werkzeug ein rechteck einfach auf dem Bild aufziehst. Diesem sog. Hotspot kannst Du dann einen Link verpaßen ;)
 
Original geschrieben von minbo
Wenn ich die Bilder auf die HP stelle, ist jedesmal eine
Lücke zwischen den einzelnen Bildern. Wie kriege ich die
weg?
die Lücke ist meist einfach nur ein hart codiertes Leerzeichen... schau Dir mal den Quelltext an, dort steht sicher zwischen den 2 Bildtags irgendwo ein
PHP:
 
, schmeiß das raus und die Bilder sollten zusammenrutschen.

Imagemap ist eine Map die sozusagen über das Bild gelegt wird und die koordinaten für die Hotspots, also die "klickbaren Stellen" enthält.
 
image maps hat sich erledigt

ich habe unten keine Eigenschaftspalette mit Quadraten. Ich muss dass unter xp machen. Vielleicht ist das anders als beim mac?

minbo
 
Zuletzt bearbeitet von einem Moderator:
die Eigenschaftspalette ist unter Windows genau dort wo Sie beim Mac ist.

warum hat sich das mit den Image Maps erledigt ?
 
das codierte Leerzeichen befindet sich nicht dazwischen
 

nur ein Zeilenumbruch. trotzdem habe ich eine Lücke,
wenn ich die Bilder untereinander haben möchte.


minbo
 
@Mauki:
Entschuldigung. Lediglich die Frage hat sich erledigt, da
ich die Antwort selbst gesucht habe, aber in der
Eigenschaftspalette sehe ich keine Auswahl von einem
Quadrat o.ä.

minbo
 
Original geschrieben von minbo
das codierte Leerzeichen befindet sich nicht dazwischen

pack die Bylder in eine Tabelle... dan funzt das auf jeden Fall! Zellzwischenraum und Rand auf 0 setzen, dann ist definitiv keine Lücke!
 
Original geschrieben von minbo
aber in der Eigenschaftspalette sehe ich keine Auswahl von einem
Quadrat o.ä.

hab mal die Palette angehängt - unten rechts ist ein Pfeil, ein Quadrat, Kreis und FreeForm Werkzeug. Das muß es bei Dir auch geben ;)
 

Anhänge

  • bild-1.gif
    bild-1.gif
    10,8 KB · Aufrufe: 65
yo,
schönen Dank an alle. ich habe die Bilder in eine Tabelle
gepackt, wie Nobody es beschrieb.
Obs elegant ist weiss ich nicht, aber es funktioniert.
dann stelle ich mal die nächste Frage:
Ich habe ca 300 Bilder zu präsentieren und habe über
PS Album 2.0 eine Webgalerie mit allen Bildern gemacht.
Im unteren Frame befindet sich dann eine Leiste mit
einer Miniaturansicht und im oberen Frame das Bild.
Leider ist die Ladezeit doch selbst mit dsl enorm, obwohl
die Bilder komprimiert sind.
Welche elegante Lösung bietet sich da an?

minbo
 
da war ja noch ein kleines Dreieck rechts unten in der
Ecke. Himmel!
Das ist es, wahrscheinlich lenkt mich der Karstadt-Ruhr-Marathon ab, der vor meinem Haus abläuft ;)

minbo
 
hallo zusammen,

Eine elegante Lösung den Zwischenraum zwischen Bildern zu steuern bietet der Einsatz von css.

Hier ein Beispiel mit inline-css:
<img src=bild1.jpg><img style="position: relative; left: -5px ;" src=bild2.jpg>

Damit wird das bild2.jpg relative zur "normalen" Position um 5 Pixel nach links geschoben.

noch ein Beispiel:
<img src=bild1.jpg><img style="position: relative; left: -5px ; top: -10px;" src=bild2.jpg>

Damit wird das bild2.jpg noch zusätzlich um 10px nach oben geschoben.

Mit ein bisschen Probieren bekommt man das absolut perfekt hin, ganz ohne Tabelle.
 
@maceis:
Danke für den Tip.
In meinem Fall habe ich dies mit image maps gelöst. Es
sieht gut aus und es funktioniert.


minbo
 
Zurück
Oben Unten