Verlinkte Flächen in Bildern -> wie?

  • #1
A

ArcaneLion

Bekanntes Mitglied
Themenersteller
Dabei seit
28.03.2004
Beiträge
371
Reaktionspunkte
0
Tachchen!

Ich wollte mal wissen wie man das hinkriegt, dass man in einer ich glaube es sind *.gif Bilddateien einzelne Zonen definiert unter die man dann unter Html Links legen kann...

Außerdem würde ich gern mal wissen ob ich das in einem reinen Html-Quelltext arbeiten kann oder, ob ich da irgentwelchen Sonderkrämpel wie Php oder sowas brauche...

Danke schonmal!
 
  • #3
Kleiner Hinweis, das ganze funktioniert mit allen Bildtypen! Ist also nicht auch GIF als Dateityp beschränkt.
 
  • #4
hört sich ja wunderbar an =). gibbet da vielleucht auch ein programm für die ganz faulen? *ggg*
 
  • #6
Hallo,

Du kannst auch zu einem kleinen Trick greifen, um es einfacher zu gestalten. Mache Dir ein unsichtbares Gif (weißes Bild z.B. und dann die weiße Farbe in transparent umwandeln)und lege es über das vorhandene Bild. Diesem Gif teilst Du dann den entsprechenden Link zu.
Ein einmal entworfenes Phantomgif kannst Du dann beliebig oft einsetzen und bei Bedarf auch entsprechend vergrößern.

Gruß jureg
 
  • #7
jureg schrieb:
Hallo,

Du kannst auch zu einem kleinen Trick greifen, um es einfacher zu gestalten. Mache Dir ein unsichtbares Gif (weißes Bild z.B. und dann die weiße Farbe in transparent umwandeln)und lege es über das vorhandene Bild. Diesem Gif teilst Du dann den entsprechenden Link zu.
Ein einmal entworfenes Phantomgif kannst Du dann beliebig oft einsetzen und bei Bedarf auch entsprechend vergrößern.

Gruß jureg

Ähm bitte nicht falsch vestehen, aber hast du überhaupt verstanden WOZU Image Maps gut sind? Ein Phantom Gif mag ja ganz nett sein aber a) musst du da mit Tabellen arbeiten (In der Tabellen Zelle befindet sich das richtige Bild und im HINTERGRUND der Tabelle ist das Phantom GIF eingebunden) und b) kannst du nicht mehrere oder nur eine Stelle explizit IN einem Bild verlinken. Außerdem frage ich mich wozu das Gut sein sollte (außer du versuchst auf äußerst dämliche Art und Weise Bilder vorm Herunterladen zu schützen) Du kannst also z.B. auf einen Gruppenfoto vom Angelverein nicht jeden Kopf verlinken. DAZU sind nämlich Image Maps da um einen bestimmten Bereich eines Bildes mit einem Link zu versehen.
 
  • #8
Gandalf_the_Grey schrieb:
jureg schrieb:
Hallo,

Du kannst auch zu einem kleinen Trick greifen, um es einfacher zu gestalten. Mache Dir ein unsichtbares Gif (weißes Bild z.B. und dann die weiße Farbe in transparent umwandeln)und lege es über das vorhandene Bild. Diesem Gif teilst Du dann den entsprechenden Link zu.
Ein einmal entworfenes Phantomgif kannst Du dann beliebig oft einsetzen und bei Bedarf auch entsprechend vergrößern.

Gruß jureg

Ähm bitte nicht falsch vestehen, aber hast du überhaupt verstanden WOZU Image Maps gut sind? Ein Phantom Gif mag ja ganz nett sein aber a) musst du da mit Tabellen arbeiten (In der Tabellen Zelle befindet sich das richtige Bild und im HINTERGRUND der Tabelle ist das Phantom GIF eingebunden) und b) kannst du nicht mehrere oder nur eine Stelle explizit IN einem Bild verlinken. Außerdem frage ich mich wozu das Gut sein sollte (außer du versuchst auf äußerst dämliche Art und Weise Bilder vorm Herunterladen zu schützen) Du kannst also z.B. auf einen Gruppenfoto vom Angelverein nicht jeden Kopf verlinken. DAZU sind nämlich Image Maps da um einen bestimmten Bereich eines Bildes mit einem Link zu versehen.

Ich habe sehr wohl das Problem verstanden, aber Du leider nicht wovon ich rede ;)
Ich kann mit diesen Gif's jeden Bereich eines Bildes erreichen und mit einem Link versehen (ohne Tabellen) Du solltest Dich etwas besser mit der Materie auskennen, bevor Du andere kritisierst. Ich kann in jedem Bild beliebig viele Phantom Gif's setzen und verlinken an jeder beliebigen Stelle

Gruß jureg
 
  • #9
Dann erklär mir doch bitte mal wie. Das würde mich sehr interessieren. Stell doch einfach mal ein Beispiel rein. Ich lass mich gerne belehren, aber ich wüsste nicht wie das funktionieren soll, denn du musst schließlich irgendwie und irgendwo angeben wo das Phantom Gif auf dem eigentlichen Bild positioniert wird und wie machst du das in deinem Fall? Wenn es möglich ist lasse ich mich gern eines besseren belehren, aber von so einer Möglichkeit habe ich bisher noch nie gehört.
 
  • #10
P.S. Ich versteh auch nicht ganz wie du OHNE Tabellen und Layer zu verwenden mehrer Bilder übereinander legst. Also entweder reden wir VOLLKOMMEN aneinander vorbei oder du kennst eine Technik die mir vollkommen unbekannt ist. In jedem Fall würde ich mich über ein Beispiel freuen.
 
  • #11
Gandalf_the_Grey schrieb:
P.S. Ich versteh auch nicht ganz wie du OHNE Tabellen und Layer zu verwenden mehrer Bilder übereinander legst. Also entweder reden wir VOLLKOMMEN aneinander vorbei oder du kennst eine Technik die mir vollkommen unbekannt ist. In jedem Fall würde ich mich über ein Beispiel freuen.

Gerne ;D schick mir doch einfach ein Bild mit den gewünschten Punkten, die Du verlinken willst und ich schicke Dir die entsprechende html Seite zurück.
Ich mache Dir mit Phantom Gif's soviele Links darauf wie Du willst.
Mit Position absolut und über den z-index kannst Du Bilder übereinanderlegen und pixelgenau positionieren. Sowohl in Richtung von rechts und oben, als auch in der Tiefe. Mit einem html Editor wie z.B. Frontpage (das richtige, bitte nicht verwechseln mit Frontpage Express) kannst Du auch die Bilder grob auf der Seite mit der Maus positionieren und anschließend im html Code feineinstellen. Dazu mußt Du das Bild anklicken und unten in der Grafikleiste einfach auf vor oder zurückstellen klicken.

Als kleines Beispiel eine Seite, die ich für einen f1-club gemacht habe. Die linke Seite besteht aus einem kompletten Bild, über jedem Ferrari sind zwei Phantom Gif angelegt. Einer zum verlinken des Button Textes und einer vorne auf der Haube für das Ferrari Geräusch

Gruß jureg
 
  • #12
Hallo,

muß mich teilweise verbessern, auf der Beispielseite, habe ich mit Hotspots und Phantom Gif's zusammengearbeitet. Das ändert aber nichts daran, daß es auch nur mit Phantom Gif's gehen wird und daß man mehrere Bilder übereinander Positionieren kann.

anbei der Beispiel Code
Code:
<html>

<head>
<meta http-equiv=Content-Type content=text/html; charset=windows-1252>
<meta name=generator content=Microsoft FrontPage 5.0>
<meta name=author content=Programmierung&ampWebdesign Hans-J&uumlrgen Regitz>
<meta name=date content=2003-02-04>
<meta name=keywords content=formel-1 Homepage, Anno 1900, Kirkel, formel1, formel-1>
<meta name=description content=Dies ist die offizielle Formel-1 Homepage der Gastst&aumltte Anno-1900 in Kirkel-Limbach>
<!--Programmierung & Design Hans-Jürgen Regitz-->
<!-- der nachfolgende Tag schaltet die automatische Linksetzung durch IE aus (Smart Tags)-->
<meta name=MSSmartTagsPreventParsing content=true>

<title>left</title>
<SCRIPT LANGUAGE=JavaScript>
function playSound()
{
document.sound1.play();
}
</script>
</head>

<body>

<!--diese Zeile gehört zum 1.Javascript-->
<embed src=start.wav autostart=false hidden=true name=sound1 mastersound width=128 height=128>

<!--dies sind die Hotspots zur Verlinkung -->
<map name=FPMap0>
<area href=ausgabe.htm shape=rect coords=101, 22, 300, 61 target=ausgabe>
<area href=mailto:[email protected] shape=rect coords=83, 75, 277, 114>
<area href=teams.htm shape=rect coords=64, 133, 263, 173 target=ausgabe>
<area href=tipliste.htm coords=43, 186, 244, 226 shape=rect target=ausgabe>
<area href=bilder.htm coords=40, 244, 233, 285 shape=rect target=ausgabe>
<area href=links.htm shape=rect coords=29, 305, 219, 346 target=ausgabe></map>

<!--dies ist die Positionseingabe des Menübildes -->
<span style=position: absolute; left: -13; top: -5; z-index: 1>
<img src=f1-Rahmen2b.jpg width=309 height=550 usemap=#FPMap0></span>

<!--dies sind die Phantombilder, damit der Sound integriert werden kann,da dies mit Hotspots nicht möglich ist.
 Die Bilder sind auf den Motorhauben der Wagen angebracht -->
<p><span style=position: absolute; left: 207; top: 24; z-index: 2>
<a href=ausgabe.htm target=ausgabe onMouseOver=playSound() onClick=return false;>
<img border=0 src=phantom.gif width=81 height=30></a></span></p>

<p><span style=position: absolute; left: 183; top: 82; z-index: 2>
<a href=mailto:[email protected] onMouseOver=playSound() onClick=return false;>
<img border=0 src=phantom.gif width=85 height=28></a></span></p>

<p><span style=position: absolute; left: 169; top: 139; z-index: 2>
<a href=teams.htm target=ausgabe onMouseOver=playSound() onClick=return false;>
<img border=0 src=phantom.gif width=83 height=30></a></span></p>

<p><span style=position: absolute; left: 152; top: 194; z-index: 2>
<a href=tipliste.htm target=ausgabe onMouseOver=playSound() onClick=return false;>
<img border=0 src=phantom.gif width=84 height=29></a></span></p>

<p><span style=position: absolute; left: 142; top: 252; z-index: 2>
<a href=bilder.htm target=ausgabe onMouseOver=playSound() onClick=return false;>
<img border=0 src=phantom.gif width=81 height=28></a></span></p>

<p><span style=position: absolute; left: 118; top: 311; z-index: 2>
<a href=links.htm target=ausgabe onMouseOver=playSound() onClick=return false;>
<img border=0 src=phantom.gif width=90 height=27></a></span></p>

</body>

</html>
 
  • #13
Okay an den Parameter absolute Position habe ich nicht gedacht. Das wäre eine Möglichkeit wirklich Bilder entsprechend zu positionieren. Aber das ist doch (wenn du mal ganz ehrlich bist) vollkommen unnötig und ein tierischer Aufwand mit NULL Mehrwert. Denn mit Hotspots geht das ganze a) einfacher b) schneller und c) musst du keine Dummy Daten zusätzlich Laden uns ausführen. Ich verstehe also echt nicht wozu das gut sein soll. Ich fände es auch echt mal Klasse wenn du das ganze mal ohne Hotspots zeigen könntest. Danke im voraus.

P.S. In welchen Browsern hast du deine Testvariante bisher überall getestet? Würde mich nämlich auch mal interessieren.
 
  • #14
Hallo Gandalf_the_Grey,

ich verstehe nicht ganz was Du mit tierischem Aufwand und imensen Ladezeiten meinst? Das Phantomgif kann im Prinzip aus zwei Pixel bestehen und Du mußt es nur einmal mithochladen, dann kannst Du es beliebig oft einsetzen und beliebig vergrößern. Außerdem kannst Du dieses Gif noch für viele andere Dinge einsetzen, zum Beispiel um eine bestimmte Tabellenbreite zu garantieren (Dazu einfach das Gif einsetzen und auf die gewünschte Breite bringen) Zum erzeugen der Hotspots brauchst Du genau so lange oder sogar länger. Das Gif muß ich doch nur mit der Maus auf meine Seite ziehen, dann auf vor- oder zurückstellen klicken (z-index wird dadurch erzeugt) nun kann ich es über das entsprechende Bild an die gewünschte Position bringen Link angeben und fertig.
Wie gesagt, wenn Du mir ein Bild schickst, mit den gewünschten Punkten als Links, mach ich Dir ein Beispiel fertig.

P.S. In welchen Browsern hast du deine Testvariante bisher überall getestet? Würde mich nämlich auch mal interessieren.

bisher mit IE, Opera, Netscape und Mozilla getestet (Bei Mozilla gibt's etwas Probleme mit den Sounds)

Gruß jureg
 
  • #15
Also ich denke über Sinn und Unsinn lässt sich jetzt nicht streiten. Jeder hat seinen Favoriten. Ich konnte halt nicht verstehen warum du dazu Phantom GIF's genommen hast. Hotspots brauche ich auch nur (wenn einer einmal erzeugt wurde) nur noch beliebig oft kopiert und per Drag an Drop an die entsprechende Stelle geschoben werden. Das läuft genauso ab wie bei deinen GIF's. Lassen wir auch am besten diese Diskussion, sie ist eigentlich unnötig. Jeder hat seine Methode wie wir festgestellt haben und beide laufen. Also soll jeder mit dem arbeiten mit dem er am besten zurecht kommt. Trotzdem danke für die Infos, somit kenne ich jetzt eine Variante mehr um Flächen in Bildern zu verlinken.
 
  • #16
Hauptsache erstmal aufmüpfig werden :-\
 
  • #17
Gandalf_the_Grey schrieb:
Also ich denke über Sinn und Unsinn lässt sich jetzt nicht streiten.
:Dich habe diese Konversation nie als Streit aufgefasst, sondern lediglich als Erfahrungsaustausch. Wie Du in meinem Beispiel siehst arbeite ich sogar gelegentlich selbst mit Hotspots. Hier habe ich anschließend die Gif's gebraucht, weil diese Funktion nicht mit Hotspots funktioniert. Hätte ich diese Soundfunktion von Anfang an geplant, hätte ich logischerweise nur mit den Gif's gearbeitet, um keine doppelte Arbeit zu haben ;D
somit kenne ich jetzt eine Variante mehr um Flächen in Bildern zu verlinken.
und nicht vergessen, die Gif's können weit mehr als nur verlinken, trotzdem brauchst Du für alle Funktionen nur einmal ein zwei Pixel großes Gif hochzuladen.

Gruß jureg
 
  • #18
jureg schrieb:
Gandalf_the_Grey schrieb:
Also ich denke über Sinn und Unsinn lässt sich jetzt nicht streiten.
:Dich habe diese Konversation nie als Streit aufgefasst, sondern lediglich als Erfahrungsaustausch. Wie Du in meinem Beispiel siehst arbeite ich sogar gelegentlich selbst mit Hotspots. Hier habe ich anschließend die Gif's gebraucht, weil diese Funktion nicht mit Hotspots funktioniert. Hätte ich diese Soundfunktion von Anfang an geplant, hätte ich logischerweise nur mit den Gif's gearbeitet, um keine doppelte Arbeit zu haben ;D

Ich habe das ganze auch nie als wirklichen Streit aufgefasst sondern genau wie du. Der Kommentar darüber liese sich streiten war eher als Floskel des allgemeinen Sprachgebrauchs zu verstehen.

jureg schrieb:
somit kenne ich jetzt eine Variante mehr um Flächen in Bildern zu verlinken.
und nicht vergessen, die Gif's können weit mehr als nur verlinken, trotzdem brauchst Du für alle Funktionen nur einmal ein zwei Pixel großes Gif hochzuladen.

Gruß jureg

Okay werde es mir merken
 
  • #19
Michael_B schrieb:
Hauptsache erstmal aufmüpfig werden :-\

::) Hauptsache erstmal nen sinnfreien und überflüssigen Kommentar abgegeben. Ich bin weder aufmüpfig geworden, noch sonst irgendwie jemandem auf die Füße getreten (jedenfalls nicht absichtlich). Ich habe lediglich mit Jureg Erfahrungsaustausch betrieben. Da ich von Juregs Möglichkeit noch nie was gehört habe, habe ich mich anfangs etwas verhämt dagegen gewährt das so etwas funktionieren könnte, habe mich dann aber davon überzeugen lassen.
 
Thema:

Verlinkte Flächen in Bildern -> wie?

ANGEBOTE & SPONSOREN

Statistik des Forums

Themen
113.840
Beiträge
707.963
Mitglieder
51.494
Neuestes Mitglied
Flensburg45
Oben