Bilderfusion
frage zu Navigation
- design/layout
0 Felix Riesterer-1 frage zu navigation0 Felix Riesterer0 at
0 Gunnar Bittersmann0 jay
Hallo zusammen
Ich habe jetzt schon eine Weile vergeblich probiert ein Bild, das ich in Teile geschnitten hatte (JPG kein Rembrandt) wieder zu sammen zu basteln.
Ist es möglich das ich mehrere Mouseover-jpgs in ein Dokument einbaue ?
Vorher hatte ich es versucht ohne es zu teilen, aber Picturedicer hat bei mir nicht funktioniert, da irgendeine Datei fehlerhaft scheint. Aber mein Rechner ist leider auch nicht mehr ganz gesund.
Mit Macromedia Fireworks hab ich es geschafft, aber warum auch immer funktionierte das nicht nocheinmal.
Wenn ich jetzt alle Segmente schön wie eine Grafik stehen habe, klappt das Mouseover nicht mehr.
Gibt es die Möglichkeit dieses Problem zu beheben , durch manuelle Eingriffe ?
Ich hoffe ihr könnt mir helfen.
Thx
Liebe(r) (anonym),
Gibt es die Möglichkeit dieses Problem zu beheben , durch manuelle Eingriffe ?
vielleicht. Aber ich will jetzt nicht mutmaßen, da ich keine Grundlage habe.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
Dann hier mal die Grundlage: Das Entsprechende Element im Anschluss und noch eine Frage (Nebenschauplatz): wenn ich nur eine Grafik habe, kann ich ja Text um die Grafik fliessen lassen oder ? Eigentlich soll alles so ungefähr aussehen, punkte sind platzhalter. Das geht doch mit align oder ? Ich hoffe jetzt kann man mir mehr sagen^^
.......Überschrift......
grafik........TextTextText
grafikgrafik..TextTextText
grafikgrafik..TextTextText
grafik........TextTextText
grafik........TextTextText
<html>
<head>
</head>
<body>
<img src="http://home.arcor.de/j-m.h/Homepage/Projekt
Nachhilfe/Bilder/links.jpg" alt="Bitte melden sie dem Seitenadministrator das
sie keine Grafik sehen, vielen dank" >
<br>
<a href="http://home.arcor.de/j-m.h/Homepage/Projekt
Nachhilfe/ueberdasprojekt.htm"
onmouseover="document.a0.src='http://home.arcor.de/j-m.h/Homepage/Projekt
Nachhilfe/Bilder/ueberdasprojekttausch.jpg'"
onmouseout="document.a0.src='http://home.arcor.de/j-m.h/Homepage/Projekt
Nachhilfe/Bilder/ueberdasprojekt.jpg'" name="a0"><img
src="http://home.arcor.de/j-m.h/Homepage/Projekt
Nachhilfe/Bilder/ueberdasprojekt.jpg" border="0" alt="Über das Projekt"
name="a0"></a>
<br>
<a href="http://home.arcor.de/j-m.h/Homepage/Projekt Nachhilfe/nachhilfe.htm"
onmouseover="document.a1.src='http://home.arcor.de/j-m.h/Homepage/Projekt
Nachhilfe/Bilder/nachhilfetausch.jpg'"
onmouseout="document.a1.src='http://home.arcor.de/j-m.h/Homepage/Projekt
Nachhilfe/Bilder/nachhilfe.jpg'" name="a1"><img
src="http://home.arcor.de/j-m.h/Homepage/Projekt
Nachhilfe/Bilder/nachhilfe.jpg" border="0" alt="Nachhilfe" name="a1"></a>
<br>
<a href="http://home.arcor.de/j-m.h/Homepage/Projekt Nachhilfe/kontakt.htm"
onmouseover="document.a2.src='http://home.arcor.de/j-m.h/Homepage/Projekt
Nachhilfe/Bilder/kontakttausch.jpg'"
onmouseout="document.a2.src='http://home.arcor.de/j-m.h/Homepage/Projekt
Nachhilfe/Bilder/kontakt.jpg'" name="a2"><img
src="http://home.arcor.de/j-m.h/Homepage/Projekt Nachhilfe/Bilder/kontakt.jpg"
border="0" alt="Kontakt" name="a2"></a>
<br>
<a href="http://home.arcor.de/j-m.h/Homepage/Projekt
Nachhilfe/externequellen.htm"onmouseover="document.a3.src='http://home.arcor.d
e/j-m.h/Homepage/Projekt Nachhilfe/Bilder/externequellentausch.jpg'"
onmouseout="document.a3.src='http://home.arcor.de/j-m.h/Homepage/Projekt
Nachhilfe/Bilder/externequellen.jpg'" name="a3"><img
src="http://home.arcor.de/j-m.h/Homepage/Projekt
Nachhilfe/Bilder/externequellen.jpg" border="0" alt="Externe Quellen"
name="a3"></a>
</body>
</html>
Liebe(r) fragende(r),
.......Überschrift......
grafik........TextTextText
grafikgrafik..TextTextText
grafikgrafik..TextTextText
grafik........TextTextText
grafik........TextTextText
aha, das sieht schonmal nach einer Design-Vorstellung aus. Ist in den Zeilen 4 & 5 das "grafikgrafik" gleichbedeutend dafür, dass hier das größere Gsamtbild eine Art "Arm" oder Ausbuchtung nach links hat?
Über Deinen HTML-Code reden wir später, denn so weiß ich noch nicht genau, wo ich anfangen soll.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
So geben wir anonym mal einen Namen^^ -> Jay
......Überschriften
grafik........TextTextText
grafikgrafik..TextTextText
grafikgrafik..TextTextText
grafik........TextTextText
grafik........TextTextText
Das ganze soll so aussehen, die grafik ist nicht rechteckig und hat eine ausbuchtung. Allerdings ist die Grafik aus verschiedenen Teilen zusammengestellt, soll eine Navigation sein. Mit Fireworks habe ich es jetzt dann doch geschafft, nachdem ich mir das gesamte Hilfe-verzeichniss durchgelesen habe. Doch wenn es auch anders ginge Bilder zusammenzuschweißen, damit keine Lücken mehr vorhanden sind, wäre ich auch darüber ganz froh.
Jetz verändert sich meine Fragestellung ein wenig, aber ich kann jetzt nachdem ich ein komplettes Grafikelement habe mich mit der Positionierung beschäftigen.
->Textpositionierung
->Grafik am linken Bildrand
Dazu noch zwei kurze Fragen, kann ich den Text neben den Teilgrafiken ausrichten mit dem Tag <p id="editor"> ?
ICh hab einiges ausprobiert, aber da es mehrere Teilgrafiken sind habe ich immernoch Probleme damit.
Die Grafik am bildrand ausrichten, ist das so überhaupt möglich ?
Ich hatte was von am oberen linken bildrand ausrichten gelesen, aber das ist nicht ganz mein ziel, da es eher mittig sein soll.
Ich freue mich über alle anregungen, danke
@ Gunnar
Also Imagemaps ist da nicht einsetzbar, denn es wird ja kein Mouseover unterstützt soweit ich das verstanden habe. Ich habe ja 5 Mouseoversegmente, die unabhängig funktionieren.
Sollte das dennoch irgendwie möglich sein, bitte verweis auf die Textstelle (Ab und an überliest man ja leider etwas).
Danke und
Gruss
Jay
Hello out there!
@ Gunnar
Würdest du bitte deine Antworten nicht iregendwo plazieren, sondern unter dem Posting, auf das du auch wirklich antwortest? Wir haben hier ein Forum, kein Board. [FOREN-BOARDS]
Also Imagemaps ist da nicht einsetzbar, denn es wird ja kein Mouseover unterstützt soweit ich das verstanden habe.
Dann hast du das falsch verstanden. Du kannst Eventhandler auch bei area verwenden.
Also lass das Zerschneiden des Bildes, das ist Unfug. Mehrere Bildschnipsel sind in der Summe auch um einiges größer als das ganze Bild.
See ya up the road,
Gunnar
Hallo.
.......Überschrift......
grafik........TextTextText
grafikgrafik..TextTextText
grafikgrafik..TextTextText
grafik........TextTextText
grafik........TextTextTextaha, das sieht schonmal nach einer Design-Vorstellung aus. Ist in den Zeilen 4 & 5 das "grafikgrafik" gleichbedeutend dafür, dass hier das größere Gsamtbild eine Art "Arm" oder Ausbuchtung nach links hat?
Nein, nach rechts.
MfG, at
Hallo at
grafik........TextTextText
grafikgrafik..TextTextText
grafikgrafik..TextTextText
grafik........TextTextText
grafik........TextTextTextIst in den Zeilen 4 & 5 das "grafikgrafik" gleichbedeutend dafür, dass hier das größere Gsamtbild eine Art "Arm" oder Ausbuchtung nach links hat?
Es war so geplant das die Grafik, aus mehreren Elementen besteht, und sich nach rechts ausgebreiten sollte.Aber ich habe mich entschieden daraus ein Rechteck zu machen, das hat der Optik keinen abbruch getan, nur die Umsetzung einer Funktion brauch noch etwas.
grafikgrafik..TextTextText
grafikgrafik..TextTextText
grafikgrafik..TextTextText
grafikgrafik..TextTextText
grafikgrafik..TextTextText
(Schon Blöd wenn man geschwungene Grafiken hat und sie nicht als Basis für Effekte nutzen kann oder ?)
Hallo.
grafik........TextTextText
grafikgrafik..TextTextText
grafikgrafik..TextTextText
grafik........TextTextText
grafik........TextTextText
Verwende doch einen Container für deine Grafiken. Den kannst du dann vom Text umfließen lassen.
MfG, at
Hello out there!
ein Bild, das ich in Teile geschnitten hatte (JPG kein Rembrandt) wieder zu sammen zu basteln.
Das ist Unsinn. Warum zerschneidest du ein Bild? Lass es in einem Stück und verwende <http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm@title=Image Maps>.
See ya up the road,
Gunnar
So, ich weiss zwar nicht , ob ich jetzt an die richtige stelle poste,(auch nicht ob die Tags funktionieren)aber man kann ja nur lernen !
<br>
Jetzt habe ich das mit imagemaps ausprobiert, aber bei mir setzt das mouseover nicht ein.
Daher einige fragen:
<br>
[b]1.[/b]kann das was mit falsch gesetzten Polygonkoordinaten zu tun haben ?
<br>[b]2.[/b]kann es daran liegen das ich vorher kein javascript definiert habe(aber in den beispielen musste hat man das auch nicht getan).
<br>[b]3.[/b]Und, warum funktionieren einige dinge nicht wenn ich sie offline testen will, mit den C:Dokumente.....angaben als Pfadangabe ?
<br>[b]4.[/b]Was muss ich beim [i]mouseout[/i] angeben ? Die Ursprungsgrafik, oder ein auf die Polygone zugeschnittenes (optisch identisches)
Stück Grafik ?
<br>Das wärs dann erstmal^^ Habe jetzt ein bischen mehr überblick !
<br>Danke für alle Tipps (bisher und folgend)
<br>So sieht es jetzt ungefähr aus:
<div>
<map name="Navigation">
<area shape="poly" coords="0,0,0,59,163,59,163,31,132,0" href="Link_Url" alt="links"
onmouseover="tauschdokument_url"
onmouseout="dokument_url" >
</map>
</div>
<p><img src="Navigationselement Alpha.jpg" width="222" height="310" border="0"
alt="Die Navigation wird nicht angezeigt ? Bitte aktualisieren sie ihren Browser" usemap="#Navigation"></p>
Hello out there!
<br>
Sowas kann hier nicht funktionieren. Aus gutem Grund; wie sollte man sonst Quelltext posten können?
[b]1.[/b]
BB-Code gibt’s hier auch nicht. Was aber unterstützt wird, erfährst du in der Forum-Hilfe unter Bedienung.
kann das was mit falsch gesetzten Polygonkoordinaten zu tun haben ?
Ja. Hilfreich zum Testen könnte onmouseover="alert('foo')" sein.
Und bitte nicht plenken.
<br>[b]2.[/b]kann es daran liegen das ich vorher kein javascript definiert habe(aber in den beispielen musste hat man das auch nicht getan).
Was meinst du damit? Wenn du onmouseover="foo()" eine Funktion aufrufst, muss diese natürlich vorher implementiert sein.
<br>[b]3.[/b]Und, warum funktionieren einige dinge nicht wenn ich sie offline testen will, mit den C:Dokumente.....angaben als Pfadangabe ?
Da gibt es wegen '' vs. '/' und ' ' vs. '%20' UMUK.
<br>[b]4.[/b]Was muss ich beim [i]mouseout[/i] angeben ? Die Ursprungsgrafik, oder ein auf die Polygone zugeschnittenes (optisch identisches) Stück Grafik ?
Du tauscht die ganze Grafik. Interessant könnte http://forum.de.selfhtml.org/archiv/2006/1/t122694/#m789312 sein.
See ya up the road,
Gunnar
PS:
"Die Navigation wird nicht angezeigt ? Bitte aktualisieren sie ihren Browser"
Nein, das wird kein Nutzer tun, bloß um deine Seite anzuschauen. Sorge dafür, dass deine Seite immer durch alternative Möglichkeiten navigierbar ist. Wichtig für Navigation ohne Bildanzeige! (Manche Nutzer stellen die ab; manche Clients haben sowas gar nicht erst.)
OK, das stellt mich jetzt alles vor neue Probleme.
Ich fang nochmal mit der Ganzen Beschreibung an, wie ich mir alles vorgestellt habe und fragen dann .
Ich will eine JPG Navigation
ist jetzt doch ein Rechteck geworden.
Dort hab ich verschiedene Bereiche die ich gerne mit Mouseover/Bildaustausch und einem Link belegen möchte.
Probleme:
Ich kann keine Javafunktionen erstellen, weil ich das System nicht verstehe.
Mal ein theoretisches Beispiel, vielleicht kann mir ja dazu jemand eine Funktion als zeigen damit ich das Grundprinzip verstehe.
Das hier ist für mich als Anfänger dann doch etwas zu kompliziert.
http://de.selfhtml.org/javascript/sprache/funktionen.htm
Nehmen wir mal an ich will Grafik: "navi.jpg"
mit "imagemap" in 4 Rechteckereas geteilt mit mouseover versehen.
Es gibt ein 5.Rechteck, aber das soll keinen Mouseover haben.
"navi.jpg" ist im Webordner http://homepage/bilder
es gibt vier einzelbilder ! "navitausch1-4.jpg"
Nochmal zur Veranschulichung, bilder sagen mehr als worte !
http://home.arcor.de/j-m.h/Homepage/Testupload/Veranschaulichung Navi.JPG
Ist das so falsch gedacht ? Jetzt muss ich doch einfach mit Javascript den Mouseovereffekt einbauen, für die Tauschgrafiken.
Aber da ist mein Problem, mehr weiss ich leider nicht nur das ich einen namen vergebe der wieder aufgerufen wird beim mouseover.
function austausch ()
Kann mir geholfen werden ?
(Bin ich denn so schwer von begriff ?
ich scheue keine wahre antwort !)
Ach und Hierzu:
"Die Navigation wird nicht angezeigt ? Bitte aktualisieren sie ihren Browser"<<<<<<
Das ist ja auch alles noch testgebiet^^ "alt=" werde ich schon zum richtigen Zwecke nutzen.
Danke soweit nochmal
Hello out there!
Ich kann keine Javafunktionen erstellen, weil ich das System nicht verstehe.
Erstmal solltest du verstehen, dass Java eine völlig andere Sprache ist als JavaScript.
Und für einen lumpigen Bildertausch brauchst du nicht einmal eine Funktion zu schreiben, sondern kannst die Anweisungen gleich an die Eventhandler hängen, wie in diesem Beispiel. Wobei die Eventhandler in deinem Falle nicht beim img-Element, sondern bei den area-Elementen zu verwenden sind – wie ich in diesem Thread schon sagte.
Nochmal zur Veranschulichung, bilder sagen mehr als worte !
Das sieht so aus, als möchtest du lediglich die Hintergrungfarbe der gehoverten Box ändern. Dazu ist weder eine Imagemap noch JavaScript erforderlich – das geht mit CSS.
See ya up the road,
Gunnar
So irgendwie werde ich falsch verstanden, na gut etwas trage ich ja dazu bei.
Erstmal solltest du verstehen, dass Java eine völlig andere Sprache ist als JavaScript.
Das ist mir klar, nur das script, verschlampt.
Das sieht so aus, als möchtest du lediglich die Hintergrungfarbe der gehoverten Box ändern. Dazu ist weder eine Imagemap noch JavaScript erforderlich – das geht mit CSS.
Nein, das ist ja nur eine Skizze, das Grafikelement ist deutlich komplexer.
Ich geb mal die URL´s an:
So soll es aussehen:
http://home.arcor.de/j-m.h/homepage/projektnachhilfe/bilder/Navigationselement Alpha.jpg
dann der mouseovereffekt:
http://home.arcor.de/j-m.h/homepage/projektnachhilfe/bilder/Navi projekttausch.jpg
und zur sicherheit ein zweites beispiel:
http://home.arcor.de/j-m.h/homepage/projektnachhilfe/bilder/Navi nachhilfetausch.jpg
Die Grüne Fläche ist der Mouseoverbereich wo man gerade ist, dort kann man dann den Link anklicken:
Das hört sich vielleicht einfach an, aber ich habe keinen Neuen Ansatzpunkt mehr.Ich hoffe du findest hier einen Fehler !
Nach allen Beispielen zu imagemaps und, mouseover finde ich keinen fehler und weiss nicht weiter.
Hier mein Quelltext des Elements:
<div>
<map name="Navigation">
<area shape="rect" coords="0,62,222,124"
href="http://home.arcor.de/j-m.h/homepage/projektnachhilfe/ueberdasprojekt.htm
"
alt="Über das Projekt"
onmouseover="http://home.arcor.de/j-m.h/homepage/projektnachhilfe/bilder/Navi
projekttausch.jpg"
onmouseout="http://home.arcor.de/j-m.h/homepage/projektnachhilfe/bilder/Naviga
tionselement%20Alpha.jpg">
</map>
</div>
<p><img
src="http://home.arcor.de/j-m.h/homepage/projektnachhilfe/bilder/Navigationsel
ement%20Alpha.jpg"
width="222" height="310" border="1"
alt="Unsere Links:"
usemap="http://home.arcor.de/j-m.h/homepage/projektnachhilfe/bilder/Navigation
selement%20Alpha.jpg">
</p>
Ich hoffe jetzt ist klar was ich meinte.
Bitte mal ein Beispiel angeben, damit ich es verstehe.
Danke