nicht angemeldet Marc Reichelt
Marc Reichelt
Gernot Back
Marc Reichelt
Gernot Back
Gernot Back
Gernot Back
Gernot Back
Gernot Back
Gernot Back
hallo --
ich hoffe, ihr könnt mir helfen.
ich möchte folgenden effekt erzielen: in einer tabelle befindet sich ein sw-bild. bei "MouseOver" blendet sich eine ebene mit dem farbigen bild ein (über das sw-bild). bei "MouseOut" soll wieder das sw-bild sichbar sein und die ebene ausgeblendet werden.
ich habe das ganze mit einer zeitleiste realisiert, mit deren hilfe ich in bild 20 der leiste die ebene ausblende.
folgende aktionen habe ich auf die <td> gelegt:
bei MouseOver stoppt die zeitleiste und die ebene wird sichtbar gemacht.
bei MouseOut wird die zeitleiste auf bild 1 zurückgesetzt und abgespielt.
folgendes passiert im browser:
das farbige bild (die ebene) wird eingebendet, aber auch gleich wieder ausgeblendet. bei jeder mausbewegung (auch die kleinste) wird die ebene wieder eingeblendet aber auch direkt wieder ausgeblendet.
was muss ich ändern, damit die ebene die ganze zeit sichtbar ist, solange ich mit der maus innerhalb der <td> bin?
hoffentlich kann mir jemand helfen, ich habe schon einen knoten im gehirn.... :)
silke
Hallo silke,
1. Was ist eine "Zeitleiste"? Soweit ich mich erinnern kann gibt es so etwas nicht in HTML.
2. Mehr Code! :-)
Bis dann!
Marc Reichelt || http://www.marcreichelt.de/
Hi,
- Was ist eine "Zeitleiste"?
ich fuerchte sie spricht von flash...
Gruesse, Joachim
Hallo Joachim,
- Was ist eine "Zeitleiste"?
ich fuerchte sie spricht von flash...
Das habe ich auch sofort gedacht als ich ihren Post gelesen habe.
Bis dann!
Marc Reichelt || http://www.marcreichelt.de/
dreamweaver bietet die möglichkeit einer zeitleiste - ich spreche nicht von flash!
im code wird ein java script aufgerufen, um die zeitleiste anzusprechen.
Hallo silke,
- Was ist eine "Zeitleiste"? Soweit ich mich erinnern kann gibt es so etwas nicht in HTML.
- Mehr Code! :-)
Bis dann!
Marc Reichelt || http://www.marcreichelt.de/
Hallo silke,
dreamweaver bietet die möglichkeit einer zeitleiste - ich spreche nicht von flash!
im code wird ein java script aufgerufen, um die zeitleiste anzusprechen.
Das war sofort der zweite Gedanke, der mir durch den Kopf schoss.
Nun, da also die erste Frage geklärt wäre, bitte nun zu Punkt 2:
Mehr Code.
Bis dann!
Marc Reichelt || http://www.marcreichelt.de/
Hallo Marc, Silke,
dreamweaver bietet die möglichkeit einer zeitleiste - ich spreche nicht von flash!
Das war sofort der zweite Gedanke, der mir durch den Kopf schoss.
Nun, da also die erste Frage geklärt wäre, bitte nun zu Punkt 2:
Mehr Code.
@Marc:
bist du des Wahnsinns? Nachher postet Silke noch dieses Dreamweaver-Codeungetüm hier, anstatt einen Link anzubieten.
@Silke:
dann zeig uns das doch mal im Netz, was du da mit Dreamweaver produziert hast. Ich bin mir sicher, das kann man dann mit einem Bruchteil des Codes auch von Hand mit Javascript machen und dann auch genau so, wie du es haben möchtest.
Gruß Gernot
Hallo Gernot,
@Marc:
bist du des Wahnsinns?
Ja. Ich studiere Elektrotechnik an der TU Darmstadt.
Bis dann!
Marc *SCNR* Reichelt || http://www.marcreichelt.de/
Hallo Marc,
» »» bist du des Wahnsinns?
Ja. Ich studiere Elektrotechnik an der TU Darmstadt.
Ja, da könnte was dran sein, mit der TuD habe ich auch so meine Erfahrungen ...
Gruß Gernot
danke für eure promten antworten - ich muss jetzt aber weg und bin erst morgen wieder im forum. der link kommt dann auch morgen....
ich denke, da wird sich eine lösung meines problems finden....
silke
Hallo Marc,
» »» bist du des Wahnsinns?
Ja. Ich studiere Elektrotechnik an der TU Darmstadt.
Ja, da könnte was dran sein, mit der TuD habe ich auch so meine Erfahrungen ...
Gruß Gernot
hallo gernot,
hier ist der link meines versuches:
http://www.fh-kl.de/kaiserslautern/ia/test/
vielleicht kannst du mir ja helfen...
silke
Hallo Marc, Silke,
dreamweaver bietet die möglichkeit einer zeitleiste - ich spreche nicht von flash!
Das war sofort der zweite Gedanke, der mir durch den Kopf schoss.
Nun, da also die erste Frage geklärt wäre, bitte nun zu Punkt 2:
Mehr Code.@Marc:
bist du des Wahnsinns? Nachher postet Silke noch dieses Dreamweaver-Codeungetüm hier, anstatt einen Link anzubieten.@Silke:
dann zeig uns das doch mal im Netz, was du da mit Dreamweaver produziert hast. Ich bin mir sicher, das kann man dann mit einem Bruchteil des Codes auch von Hand mit Javascript machen und dann auch genau so, wie du es haben möchtest.Gruß Gernot
Hallo silke,
ich hatte den Link schon gesehen, hattest ihn ja schon gepostet. Ich würde dir, wenn ich dein Problem richtig verstehe raten, eine globale boole'sche Variable als Flagge zu setzen, die am Anfang auf "true" steht. Dann kannst du die Ausführung der MouseOver-Funktion, daran binden, dass diese Variable "true" ist. Innerhalb diese Mouseover-Funktion setzt du die Variable aber erst einmal auf "false" und erst beim MouseOut wieder auf true, sodass die Ebene sichtbar bleiben sollte, solange du dich innerhalb der betreffenden Tabellenzelle mit dem MouseOver-Handler befindest.
Gruß Gernot
hallo gernot,
danke für deine idee - hat du ein code-beispiel für mich, dass ich das besser nachbauen kann?
die logik ist mir klar, aber ich weiss nicht, wie ich es in den code einbauen soll....
silke
Hallo silke,
ich hatte den Link schon gesehen, hattest ihn ja schon gepostet. Ich würde dir, wenn ich dein Problem richtig verstehe raten, eine globale boole'sche Variable als Flagge zu setzen, die am Anfang auf "true" steht. Dann kannst du die Ausführung der MouseOver-Funktion, daran binden, dass diese Variable "true" ist. Innerhalb diese Mouseover-Funktion setzt du die Variable aber erst einmal auf "false" und erst beim MouseOut wieder auf true, sodass die Ebene sichtbar bleiben sollte, solange du dich innerhalb der betreffenden Tabellenzelle mit dem MouseOver-Handler befindest.
Gruß Gernot
Hallo silke.
Kleiner Hinweis: Bitte vermeide TOFU!
Gruß, Ashura
Hallo silke,
danke für deine idee - hat du ein code-beispiel für mich, dass ich das besser nachbauen kann?
die logik ist mir klar, aber ich weiss nicht, wie ich es in den code einbauen soll....
Worum es ja geht, ist diese Seite hier:
http://www.fh-kl.de/kaiserslautern/ia/test/schaukasten.htm
Dort solltest du oben im Skritbereich des Heads die globale Variable deklarieren
var flag= true;
Was du der Einfachheit halber mal versuchen könntest, wäre die Flagge dann innerhalb der Eventhandler zu ändern, indem du ;flag=false bzw ;flag=true dahinter schreibst, also:
<td width="148" onMouseOver="[code lang=javascript]MM_timelineStop('EbeneAus'); MM_showHideLayers('aktuell1','','show');flag=false
~~~" onMouseOut="`MM_timelineGoto('EbeneAus','1');MM_timelinePlay('EbeneAus');flag=true`{:.language-javascript}">
<a href="#">
<img src="bilder/kulturwocheKlein.jpg" width="148" height="443" border="0" usemap="#Map">
</a></td>
[/code]
Ich würde mich ungern an die Macromedia-Monsterfunktionen wagen; da würde ich eher alles neu von Hand schreiben, dann würde der Code, wie gesagt, auch viel schlanker.
Gruß Gernot
Hallo nochmal,
Das Wichtigste hat gefehlt: if(flag):
<td width="148" onMouseOver="[code lang=javascript]if(flag) MM_timelineStop('EbeneAus');if(flag) MM_showHideLayers('aktuell1','','show');flag=false
~~~" onMouseOut="`MM_timelineGoto('EbeneAus','1');MM_timelinePlay('EbeneAus');flag=true`{:.language-javascript}">
<a href="#">
<img src="bilder/kulturwocheKlein.jpg" width="148" height="443" border="0" usemap="#Map">
</a></td>
[/code]
Du musst mal probieren, an einer der beiden Stellen könnte es auch zuviel sein.
Gruß Gernot
Du musst mal probieren, an einer der beiden Stellen könnte es auch zuviel sein.
meinst du das 2x if(flag) bei onMouseOver könnte zuviel sein, oder welche beiden stellen meinst du?
wenn ich den code so übernehme wie oben, dann klappt es nicht....
silke
Hallo silke,
wenn ich den code so übernehme wie oben, dann klappt es nicht....
Hast du auch daran gedacht, die Variable flag im Script-Bereich des Heads global zu definieren?
var flag=true;
Gruß Gernot
Hast du auch daran gedacht, die Variable flag im Script-Bereich des Heads global zu definieren?
ja, hab ich gemacht.
liegt es vielleicht doch an der zeitleiste? habe ich da einen denkfehler drin??
silke
Hallo Silke,
liegt es vielleicht doch an der zeitleiste? habe ich da einen denkfehler drin??
das ist möglich, aber wie gesagt, bevor ich mich in den Dreamweaver-Code eingedacht habe, habe ich es schneller komplett selbst programmiert. Heute wird das nichts mehr. Wenn jemand zuvorkommend ist, bin ich aber auch nicht böse. ;-)
Gruß Gernot
»» das ist möglich, aber wie gesagt, bevor ich mich in den Dreamweaver-Code eingedacht habe, habe ich es schneller komplett selbst programmiert. Heute wird das nichts mehr. Wenn jemand zuvorkommend ist, bin ich aber auch nicht böse. ;-)
hallo gernot,
danke für deine mühe - ich werde mir die logik mit der zeitleiste nochmal vornehmen... vielleicht löst sich ja der knoten im hirn.
silke
Hallo Silke,
sieh mal bitte unter http://forum.de.selfhtml.org/archiv/2005/5/t107034/#m664294, ob Dir das helfen kann.
Generell sollte es aber auch möglich sein, eine Gif zu verwenden, die die einzelnen Bilder "abspielt". Damit hättest Du nur eine Datei und könnstest eine CSS-Lösung nutzen; ähnlich, wie http://aktuell.de.selfhtml.org/tippstricks/css/infobox/
Gruß aus Berlin!
eddi
hallo eddi,
deine idee mit dem löschen der zuvor ausgeführten funktion beim ersten eintreten des events scheint mir logisch zu sein - leider hat es bei meinem ersten versuch nicht geklappt....
hier ist der link:
http://www.fh-kl.de/kaiserslautern/ia/test/
gruss aus stuttgart
silke
Hallo Silke,
sieh mal bitte unter http://forum.de.selfhtml.org/archiv/2005/5/t107034/#m664294, ob Dir das helfen kann.
Generell sollte es aber auch möglich sein, eine Gif zu verwenden, die die einzelnen Bilder "abspielt". Damit hättest Du nur eine Datei und könnstest eine CSS-Lösung nutzen; ähnlich, wie http://aktuell.de.selfhtml.org/tippstricks/css/infobox/Gruß aus Berlin!
eddi
Hi,
warum macht Ihr alle - bis auf Eddi - nur solche Klimmzüge mit Javascript, anstatt das mal nur mit CSS anzudenken.
Und Silke, warum zitierst Du:
Generell sollte es aber auch möglich sein, eine Gif zu verwenden, die die einzelnen Bilder "abspielt". Damit hättest Du nur eine Datei und könnstest eine CSS-Lösung nutzen; ähnlich, wie http://aktuell.de.selfhtml.org/tippstricks/css/infobox/
wenn Du dann doch nicht auf seinen Tip eingehst?
Zugegeben, das verlinkte Beispiel paßt für diesen Zweck nicht so ganz, aber das die Idee ist schonmal richtig.
Da ich gerade Zeit und Lust hatte, habe ich Deine Seite mal vernünftig mit CCS umgesetzt. ;-)
freundliche Grüße
Ingo
Hallo Ingo,
warum macht Ihr alle - bis auf Eddi - nur solche Klimmzüge mit Javascript, anstatt das mal nur mit CSS anzudenken.
Die Klimmzüge stammen von Silkes Original-Dreamweaver-Codierung; sowohl was das Tabellenlayout, als auch was die MouseOver-Effekte mit JavaScript angeht. Dreamweaver will da eben auch die Uralt-Browser wie Netscape 4.X und Internet-Explorer 4.X noch mitnehmen. Die sind gerade an öffentlichen Einrichtungen wie Hochschulen durchaus noch verbreitet: Einerseits haben sie kein Geld, ihre PCs von Fachpersonal warten zu lassen, andererseits untersagen sie es ihren Nutzern, neuere Versionen herunterzuladen und zu installieren.
Mein Schwager, Mathematikprofessor an der Uni Frankfurt, surft allerdings auch privat immer noch mit Netscape 4 unter Linux, nach dem Motto: "Never Change a Running System!"
Deshalb halte ich in Silkes Fall minimale Änderungen ohne Systemwechsel für die bessere Lösung.
Da ich gerade Zeit und Lust hatte, habe ich Deine Seite mal vernünftig mit CCS umgesetzt. ;-)
Die Aussetzer (kurzzeitiges komplettes Verschwinden des Ursprungsbildes, bevor das neue eingeblendet wird) machen sich im IE am deutlichsten bemerkbar. Ich denke aber, dass sie auch dort nur damit zu tun haben, dass die Bilder auf deiner Seite von Silkes FH-Domain kommen. Auch das Zurückblenden des großen Farbbildes auf den schmalen Schwarzweißausschnitt sobald die Maus den schmalen Ursprungsbereich verlässt, ließe sich ja ebenfalls noch mit CSS regeln, wenn man hier ausschließlich mit Hintergrundbildern arbeiten würde.
Silkes Beispiel zeigt natürlich sehr schön, dass gerade sogenannte WYSYWIG-Editoren schon ein profundes Verständnis von Quellcode erfordern, wenn man Sonderwünsche hat, für die der Editor keine Optionen anbietet. (Dreamweaver-Kenner mögen mich korrigieren, wenn Silke hier vielleicht doch nur die richtige Einstellung übersehen hat)
Wer also keine Rücksicht auf Kunden mit Uralt-Browsern nehmen muss oder der Barrierefreiheit eine höhere Priorität einräumt, sollte lieber deinem Beispiel folgen, WYSIWYG-Editoren meiden und sich mit CSS beschäftigen, da bin ich absolut d'accord.
Gruß Gernot
Hi,
Die Klimmzüge stammen von Silkes Original-Dreamweaver-Codierung; sowohl was das Tabellenlayout, als auch was die MouseOver-Effekte mit JavaScript angeht. Dreamweaver will da eben auch die Uralt-Browser wie Netscape 4.X und Internet-Explorer 4.X noch mitnehmen. Die sind gerade an öffentlichen Einrichtungen wie Hochschulen durchaus noch verbreitet
Ja und? Sonst wird doch auch eher - nicht zu unrecht - davon abgeraten, diese kryptischen Konstruktionen zu verwenden. Und Netscape 4 stellt meine CSS-Version bis auf die Zentrierung und die Rahmen um die Bilder (was man aber leicht ändern könnte) identisch dar. Natürlich ohne Hover-Effekte, aber das beeinträchtigt weder die Nutzbarkeit noch das zugrunde liegende Design.
Deshalb halte ich in Silkes Fall minimale Änderungen ohne Systemwechsel für die bessere Lösung.
Ich nicht, aus besagtem Grund und weil über die CSS-Lösung vermutlich mehr Besucher in den Genuß des hover-Effekts kommen als bei der Javascript-Lösung - nämlich all diejenigen, die Javascript deaktiviert haben!
Da ich gerade Zeit und Lust hatte, habe ich Deine Seite mal vernünftig mit CCS umgesetzt. ;-)
Die Aussetzer (kurzzeitiges komplettes Verschwinden des Ursprungsbildes, bevor das neue eingeblendet wird) machen sich im IE am deutlichsten bemerkbar. Ich denke aber, dass sie auch dort nur damit zu tun haben, dass die Bilder auf deiner Seite von Silkes FH-Domain kommen. Auch das Zurückblenden des großen Farbbildes auf den schmalen Schwarzweißausschnitt sobald die Maus den schmalen Ursprungsbereich verlässt, ließe sich ja ebenfalls noch mit CSS regeln, wenn man hier ausschließlich mit Hintergrundbildern arbeiten würde.
Ich habe hier schon ganz bewußt img verwendet: aus Kompatibilitätsgründen (weil sie unproblematisch die Höhe des Links festlegen) und wegen des Alternativtextes.
Das kurzfristige Verschwinden der Bilder dürfte eigentlich nur beim ersten Laden des Hintergrundbildes passieren. Ich fand das vertretbar und in Hinblick auf die fast halbierte Ladezeit der Seite ohne diese Grafiken sogar sinnvoll. Natürlich könnte man die Grafiken auch onload mittels Javascript vorladen wie in Silkes Lösung.
Wie auch immer - da das offensichtlich stört, habe ich die Seite jetzt mal dahingehend geändert, daß die Hintergrundbilder a und nicht a:hover zugewiesen werden und somit direkt zur Verfügung stehen. Das Verschwinden sollte damit nicht mehr auftreten.
Wer also keine Rücksicht auf Kunden mit Uralt-Browsern nehmen muss oder der Barrierefreiheit eine höhere Priorität einräumt, sollte lieber deinem Beispiel folgen, WYSIWYG-Editoren meiden und sich mit CSS beschäftigen, da bin ich absolut d'accord.
Dem würde ich noch hinzufügen: ... oder wer Uralt-Browser berücksichtigen will und dies auch mit moderner Technik hinlänglich schafft.
freundliche Grüße
Ingo
Hallo Ingo,
mit CCS umgesetzt. ;-)
Die Aussetzer (kurzzeitiges komplettes Verschwinden des Ursprungsbildes, bevor das neue eingeblendet wird) machen sich im IE am deutlichsten bemerkbar. Ich denke aber, dass sie auch dort nur damit zu tun haben, dass die Bilder auf deiner Seite von Silkes FH-Domain kommen.
Das kurzfristige Verschwinden der Bilder dürfte eigentlich nur beim ersten Laden des Hintergrundbildes passieren. Ich fand das vertretbar und in Hinblick auf die fast halbierte Ladezeit der Seite ohne diese Grafiken sogar sinnvoll. Natürlich könnte man die Grafiken auch onload mittels Javascript vorladen wie in Silkes Lösung.
Wie auch immer - da das offensichtlich stört, habe ich die Seite jetzt mal dahingehend geändert, daß die Hintergrundbilder a und nicht a:hover zugewiesen werden und somit direkt zur Verfügung stehen. Das Verschwinden sollte damit nicht mehr auftreten.
Bei mir (IE6 unter Win98) tritt es jedesmal auf, aber wie gesagt, vielleicht nur, weil die Bilder nicht von derselben Domain kommen. Bei Opera 7.54 tritt die Verzögerung nur beim ersten Laden auf, was nahelegt, dass eine JS-Vorladefunktion, onLoad aufgerufen, hier zumindest auch bei deiner Lösung nicht schaden würde. Wer JS deaktiviert hat, der muss mit der Verzögerung leben, den anderen erspart es sie.
Auch das Zurückblenden des großen Farbbildes auf den schmalen Schwarzweißausschnitt, sobald die Maus den schmalen Ursprungsbereich verlässt, ließe sich ja ebenfalls noch mit CSS regeln, wenn man hier ausschließlich mit Hintergrundbildern arbeiten würde.
Das glaube ich übrigens inzwischen nicht mehr, nachdem ich länger darüber nachgedacht habe. Es müsste dafür wohl einen Eltern-Selektor in CSS geben. Auch hier könnte man ja mit JS etwas nachhelfen: Wer's deaktiviert hat, kommt halt nicht in den Genuss der ganzen Funktionalität und hätte deinen Staus Quo.
Ich will gar keine Fronten aufbauen: Es geht hier nicht um ein Entweder-Oder, sondern um ein sinnvolles Sowohl-Als-Auch.
Gruß Gernot
Hi,
Bei mir (IE6 unter Win98) tritt es jedesmal auf, aber wie gesagt, vielleicht nur, weil die Bilder nicht von derselben Domain kommen. Bei Opera 7.54 tritt die Verzögerung nur beim ersten Laden auf
Hast die Seite tatsächlich neu geladen? Sieh' mal in den Quelltext, ob der inzwischen valide ist;-) Vielleicht mußt Du auch den Cache leeren. Bei mir unter XP werden die Grafiken mitgeladen und kommen auch in diesen Browsern sofort, was ich gerade mal mit unbekannten Grafiken getestet habe.
freundliche Grüße
Ingo
Hallo Ingo,
Hast die Seite tatsächlich neu geladen? Sieh' mal in den Quelltext, ob der inzwischen valide ist;-) Vielleicht mußt Du auch den Cache leeren.
Ich habe deine seite aus dem Cache entfernt, neu geladen, und jetzt fluppt's ohne Verzögerung auch im IE6 unter Win98. Hast du noch etwas anderes als die schließenden /> geändert, oder hatte das den Effekt?
Fehlt jetzt halt nur noch die Beschränkung des MouseOut-Bereichs. Da muss man aber doch wohl wirklich auf JS ausweichen, wenn man das unbedingt haben möchte, oder hast du eine andere Idee, die ohne auskommt?
Gruß Gernot
Hi,
Ich habe deine seite aus dem Cache entfernt, neu geladen, und jetzt fluppt's ohne Verzögerung auch im IE6 unter Win98. Hast du noch etwas anderes als die schließenden /> geändert, oder hatte das den Effekt?
Schön, ich wunderte mich schon. Und nein: ich hatte nah der Umgestaltung und dem Hinweis von Dada nur die Syntax korrigiert.
Fehlt jetzt halt nur noch die Beschränkung des MouseOut-Bereichs. Da muss man aber doch wohl wirklich auf JS ausweichen, wenn man das unbedingt haben möchte, oder hast du eine andere Idee, die ohne auskommt?
Nein, nicht wenn Du den IE berücksichtigen willst, denn der kann ja :hover nur auf Links anwenden, sodaß hierüber auch nur Links oder hierin enthaltenen Elementen andere Eigenschaften zugewiesen werden können. Aber was stört Dich daran? Es ist doch eigentlich ein zu erwartendes Verhalten, daß ein verlinktes Bild über die gesamte Fläche klickbar ist.
freundliche Grüße
Ingo
Hallo Ingo.
Nein, nicht wenn Du den IE berücksichtigen willst, denn der kann ja :hover nur auf Links anwenden, (...)
Kleiner Hinweis: Auch wenn es getrickst ist, kann man dem IE dies durchaus "unterjubeln": whatever:hover.
Gruß, Ashura
Hi,
Kleiner Hinweis: Auch wenn es getrickst ist, kann man dem IE dies durchaus "unterjubeln": whatever:hover.
dieser Trick bsteht aus in CSS eingebundenem Javascript - hat also mit CSS eigentlich nicht viel zu tun.
freundliche Grüße
Ingo
Hallo Ingo.
dieser Trick bsteht aus in CSS eingebundenem Javascript - hat also mit CSS eigentlich nicht viel zu tun.
Ich weiß. Der Themebereich lautet ja auch JAVASCRIPT.
Dies ist aber anscheinend momentan eine der besten Möglichkeiten, dem IE beizubringen, :hover auf jedes Element anzuwenden.
Gruß, Ashura
Hi,
Dies ist aber anscheinend momentan eine der besten Möglichkeiten, dem IE beizubringen, :hover auf jedes Element anzuwenden.
Finde ich nicht - damit erzeugst Du invaliden CSS-Code oder müßtst das ganze noch umständlich in CCs verpacken. Dasselbe geht doch auch genauso gut mit purem Javasscipt. Du kennst http://de.selfhtml.org/css/layouts/anzeige/nav_javascript.htm? Eine solche Funktion ließe sich leicht verallgemeinern.
freundliche Grüße
Ingo
Hallo Ingo.
Finde ich nicht - damit erzeugst Du invaliden CSS-Code oder müßtst das ganze noch umständlich in CCs verpacken.
Naja, eine winzige Zeile zusätzlicher Code würde ich nicht gerade als umständlich bezeichnen. Und bei der Validität muss man mit diese Methode einen kleinen Abstrich machen, der aber in meinen Augen verschmerzbar ist.
Dasselbe geht doch auch genauso gut mit purem Javasscipt. Du kennst http://de.selfhtml.org/css/layouts/anzeige/nav_javascript.htm?
Ja, kenne ich.
Ach, ich hoffe einfach mal, dass der IE7 dazu fähig sein wird.
Gruß, Ashura
Hallo Ingo,
Fehlt jetzt halt nur noch die Beschränkung des MouseOut-Bereichs. Da muss man aber doch wohl wirklich auf JS ausweichen, wenn man das unbedingt haben möchte, oder hast du eine andere Idee, die ohne auskommt?
Nein, nicht wenn Du den IE berücksichtigen willst, denn der kann ja :hover nur auf Links anwenden, sodaß hierüber auch nur Links oder hierin enthaltenen Elementen andere Eigenschaften zugewiesen werden können. Aber was stört Dich daran? Es ist doch eigentlich ein zu erwartendes Verhalten, daß ein verlinktes Bild über die gesamte Fläche klickbar ist.
Das große Bild blockiert halt bei geringen Bildschirmauflösungen fast die ganze Seite; da muss man fast schon das ganze Fenster verlassen, bis die Navigationselemente (die Links zu den Profs) wieder zugänglich werden. Mich würde das dennoch nicht stören, aber Silke hat es ausdrücklich anders geplant ...
was muss ich ändern, damit die ebene die ganze zeit sichtbar ist, solange ich mit der maus innerhalb der <td> bin?
... und dafür eigens auch schon eine Imagemap angelegt. Wenn sich Silke am Montag wieder melden sollte (ggf. in neuem Thread, falls dieser hier dann schon im Archiv ist) und ihr das wichtig ist, schaue ich mal, wie man das mit einer ergänzenden JS-Lösung regeln könnte.
Ich fürchte allerdings, das wird dann eine Lösung sein, die dir keineswegs gefallen wird, eine, bei der entweder das Bild im Hintergrund des Links sein wird oder -schlimmer noch- onMouseOver durch einen blinden Pixel ausgetauscht wird. Schätze ich dich da richtig ein?
Gruß Gernot
Hi,
Das große Bild blockiert halt bei geringen Bildschirmauflösungen fast die ganze Seite; da muss man fast schon das ganze Fenster verlassen, bis die Navigationselemente (die Links zu den Profs) wieder zugänglich werden. Mich würde das dennoch nicht stören, aber Silke hat es ausdrücklich anders geplant ...
auch wenn sie es geplant hat, notwendig ist es nicht. Denn die Grafiken passen in ihrer Breite ohnehin nichtmal in ein 800er-Fenster.
Wenn sich Silke am Montag wieder melden sollte (ggf. in neuem Thread, falls dieser hier dann schon im Archiv ist) und ihr das wichtig ist, schaue ich mal, wie man das mit einer ergänzenden JS-Lösung regeln könnte.
Kannst Du machen. Apropos Silke: Deine schaefer-Bilder sind 9px zu breit.
Ich fürchte allerdings, das wird dann eine Lösung sein, die dir keineswegs gefallen wird, eine, bei der entweder das Bild im Hintergrund des Links sein wird oder -schlimmer noch- onMouseOver durch einen blinden Pixel ausgetauscht wird. Schätze ich dich da richtig ein?
Ja. Und ich würde Dir dann vermulich eine schönere Javascript-Alternative präsentieren wollen. ;-)
freundliche Grüße
Ingo
Hi Gernot,
auch wenn es wohl nicht mehr benötigt wird, hatte mich das Problem interessiert und es gibt wohl leider weder eine Javascript-freie Lösung noch eine, die ohne ein zusätzliches Element außerhalb von a auskommt. :-(
Diese Lösung von mir benötigt beides, allerdings erfordert nur das frühzeitige Ausblenden des großen Bildes Javascript.
Vielleicht könnte man auch eine andere Lösung mittels einer map finden - ich hatte allerdings keine Lust mehr, das auszuprobieren.
freundliche Grüße
Ingo
Hallo Ingo,
Diese Lösung von mir benötigt beides, allerdings erfordert nur das frühzeitige Ausblenden des großen Bildes Javascript.
Interessante Lösung, ich vermute, die widersprüchlichen Hover- und MousOver-Angaben zur Weite des A-Elements dienen nur zur Absicherung bei deaktiviertem CSS?
#foto a:hover { width:532px; }
<div id="foto">
<a href="#" onmouseover="[code lang=javascript]this.style.width='148px';
document.getElementById('foto2').style.width='384px';
~~~"
onmouseout="`document.getElementById('foto2').style.width='0';`{:.language-javascript}">
<img src="/bilder/kulturwocheKlein.jpg" width="148" alt="" />
</a>
</div>
[/code]
Ich hatte ja -auf der Basis deines ersten Vorschlags- auch schon was vorbereitet, und - wo es dann schon mal mit JS losging auch gleich mit Vorladefunktion für die Hover-Bilder und der zusätzlich von Silke gewünschten zeitlchen Verzögerung beim Zurückblenden des großen Bildes. Letzteres finde ich zwar eigentlich eher verwirrend, aber um zu zeigen, dass man für so etwas auch keinen Dreamweaver braucht, habe ich auch das mal eingebaut.
<http://www.sprachlernspiele.de/selftests/schaukasten.html>
Angesichts der Tatsache, dass die Bilder, insbesondere bei den Links zu den Professoren inhaltlich gar nichts mit diesen zu tun haben und nur dem Design dienen, fände ich es eigentlich auch legitim, sie nur in den Hintergrund der Links zu stecken. Das große Bild mit dem Tuareg, das inhaltlich den stärksten Bezug zur afrikanischen Kulturwoche hat, ist ja auch bei dir ausschließlich als Hintergrundbild zu bewundern. Wenn man es mit der Barrierefreiheit also auf die Spitze treiben will, müsste man auch da noch eine Lösung basteln, die zumindest Nutzern mit JS dieses beim Drüberfahren mit der Maus im Vordergrund anbietet.
> Vielleicht könnte man auch eine andere Lösung mittels einer map finden - ich hatte allerdings keine Lust mehr, das auszuprobieren.
Das wäre sicherlich auch eine Lösung mit Javascript und angesichts einer rechteckigen Area bestimmt unnöig kompliziert. Ich habe hier in letzter Zeit so oft gegen den Irrglauben angekämpft, man könne Maps mit CSS gestalten, deshalb sage ich es auch hier noch einmal, nicht dir, du weißt es, sondern für's Archiv.
Gruß Gernot
Hi,
Interessante Lösung, ich vermute, die widersprüchlichen Hover- und MousOver-Angaben zur Weite des A-Elements dienen nur zur Absicherung bei deaktiviertem CSS?
bei deaktiviertem Javascript.
und der zusätzlich von Silke gewünschten zeitlchen Verzögerung beim Zurückblenden des großen Bildes. Letzteres finde ich zwar eigentlich eher verwirrend,
Ich auch. Und auch unpraktisch.
Interessant. Und sogar ohne zusätzliches Element. Etwas in der Art hatte ich auch ausprobiert, aber ohne ID-Wechsel und ohne float. War denn beides nötig?
Angesichts der Tatsache, dass die Bilder, insbesondere bei den Links zu den Professoren inhaltlich gar nichts mit diesen zu tun haben und nur dem Design dienen,
Aber nicht doch. Schau Dir die Bilder an: da stehen die Namen drauf.
fände ich es eigentlich auch legitim, sie nur in den Hintergrund der Links zu stecken. Das große Bild mit dem Tuareg, das inhaltlich den stärksten Bezug zur afrikanischen Kulturwoche hat, ist ja auch bei dir ausschließlich als Hintergrundbild zu bewundern.
nö. Das verlinkte kleine Bild ist als img eingebunden. Nur fehlte mir noch ein passender ALT-Text, der erforderlich ist für Textbrowser. Und schau' Dir Deine Lösung nur mit Hintergrundbild mal im NN4 an. Da fehlt das Bild und der Link komplett.
Wenn man es mit der Barrierefreiheit also auf die Spitze treiben will, müsste man auch da noch eine Lösung basteln, die zumindest Nutzern mit JS dieses beim Drüberfahren mit der Maus im Vordergrund anbietet.
Warum? Es reicht doch, daß die Bilder ohne JS sichtbar sind und die Links sowohl ohne JS als auch ohne Grafiken nutzbar sind.
freundliche Grüße
Ingo
Hallo Ingo,
bei deaktiviertem Javascript.
meinte ich auch
und der zusätzlich von Silke gewünschten zeitlchen Verzögerung beim Zurückblenden des großen Bildes. Letzteres finde ich zwar eigentlich eher verwirrend,
Ich auch. Und auch unpraktisch.
Ich sehe auch inzwischen, meine Variante führt zu fehlermeldungen, wenn man direkt nach dem mouseOut auch wieder ein mouseOver ausführt, bevor das Timeout abgelaufen ist. Man müsste also auch noch mal ein Div-Element darum bauen, dessen ID sich nicht ändert, ich spar mir das aber jetzt.
Interessant. Und sogar ohne zusätzliches Element. Etwas in der Art hatte ich auch ausprobiert, aber ohne ID-Wechsel und ohne float. War denn beides nötig?
Float war auch überflüssig.
Angesichts der Tatsache, dass die Bilder, insbesondere bei den Links zu den Professoren inhaltlich gar nichts mit diesen zu tun haben und nur dem Design dienen, fände ich es eigentlich auch legitim, sie nur in den Hintergrund der Links zu stecken.
Aber nicht doch. Schau Dir die Bilder an: da stehen die Namen drauf.
Das kann man in ein Title-Attribut schreiben, da hat man die gleiche Information.
Das große Bild mit dem Tuareg, das inhaltlich den stärksten Bezug zur afrikanischen Kulturwoche hat, ist ja auch bei dir ausschließlich als Hintergrundbild zu bewundern.
nö. Das verlinkte kleine Bild ist als img eingebunden. Nur fehlte mir noch ein passender ALT-Text, der erforderlich ist für Textbrowser.
Bei dem kleinen Bild alleine könnte ich keinen Tuareg erkennen. Man kann weder das große noch das kleine, weder per Kontextmenü abspeichern noch sie ausdrucken, wenn man -und davon ist bei den meisten Nutzern auszugehen- nicht weiß, wie man das an seinem Browser einstellt, dass er auch Hintergrundbilder druckt.
Und schau' Dir Deine Lösung nur mit Hintergrundbild mal im NN4 an. Da fehlt das Bild und der Link komplett.
Stimmt, für den Browser braucht es einen Platzhalter, sinnigerweise das Bild selbst im Vordergrund..
Gruß Gernot
Hi,
Aber nicht doch. Schau Dir die Bilder an: da stehen die Namen drauf.
Das kann man in ein Title-Attribut schreiben, da hat man die gleiche Information.
Nein. title wird als Tooltip angezeigt. Bei Textdarstellung ohne Bilder und ALT dürfte eigentlich nichts am Bildschirm zu sehen sein.
Bei dem kleinen Bild alleine könnte ich keinen Tuareg erkennen. Man kann weder das große noch das kleine, weder per Kontextmenü abspeichern noch sie ausdrucken,
Daß man beim kleinen Bild noch nichts erkennen kann, ist doch irrelevant - es zählt der Inhalt von ALT. Und daß man die Bilder nicht so einfach abspeichern kann, ist doch unwichtig. Bei Darstellung ohne Bilder wird der ALT-Text angezeigt und ist verlinkt, bei deaktiviertem CSS werden die Bilder (untereinander - was über eine Tabelle freilich geändert werden könnte) angezeigt (und können dann auch gespeichert werden). Ich sehe da keine Barriere - außer für Bildersammler. ;-)
freundliche Grüße
Ingo
Guten Morgen Ingo,
eine interessante Lösung, die ich jedoch nicht verstehe.
Hintergrundbilder können ja nicht skaliert werden, daher habe ich ein ähnliches Problem damals mit zwei img-Elementen (für das große und das kleine Bild) gelöst. Gut, man kann das Hintergrundbild in einen skalierten div-Rahmen packen.
Nur wo wird die Höhe der hover-prof-Bilder auf die 285 px gesetzt? Der div-Rahmen hat die Höhe 443 px, das nachfolgende a-Element keine ausgewiesene Höhe und erst die blassen Bilder bekommen im img-Element die Höhe 285 px zugewiesen. Der Zeigerfokus wird jedoch auf das darüberliegende a angewendet (a:hover). Ebenso die Breite. Wo stehe ich da mal wieder auf dem Schlauche?
Im übrigen glaube ich, dass für "xhtml1-strict" einige schließende Etikette fehlen; aber das ist meine ganz persönliche Meinung ...
Mit Gruß
Dada
Hi,
Hintergrundbilder können ja nicht skaliert werden,
korrekt. Daher muß der Container passend dimensioniert werden. Und dies erledigt das enthaltene img browserübergreifend. Durch visibility:hidden wird es lediglich unichtbar, nimmt aber weiterhin denselben Raum in Anspruch.
Nur wo wird die Höhe der hover-prof-Bilder auf die 285 px gesetzt?
wie konntest Du nur » img { border:0; height: 285px; } « übersehen?
erst die blassen Bilder bekommen im img-Element die Höhe 285 px zugewiesen.
achso, doch nicht übersehen, nur noch nicht verstanden. ;-)
Wie ich schon sagte, bestimmt das img die Höhe von a und damit auch die Dimensionen des angezeigten Hintergrundbildes. Ausnahme ist » #foto a:hover { width:532px; } « - hier wird dem nur für moderne Browser (der IE würde dabei Probleme machen) display:block formatiertem a-Element eine Breite zugewiesen, weil das Hintergrundbild ja breiter als das img ist.
Diese Lösung ist übrigens auch deshalb wichtig, damit der Container erst bei a:hover die anderen überdeckt.
Im übrigen glaube ich, dass für "xhtml1-strict" einige schließende Etikette fehlen; aber das ist meine ganz persönliche Meinung ...
Ohje, Asche über mein Haupt. Danke für den Hinweis, ist gefixed. Ich hatte das mal so eben in Phase5 zusammengebastelt und nicht nachbearbeitet.
freundliche Grüße
Ingo
Guten Tag Ingo,
Wie ich schon sagte, bestimmt das img die Höhe von a und damit auch die
Dimensionen des angezeigten Hintergrundbildes.
dies habe ich nicht gewusst.
Dass das img das nicht spezifizierte a auf seine img-Größe (bis maximal div-/body-...Größe) aufweitet, ist mir klar gewesen. Dass sich das a-Hintergrundbild an die "rückvererbten" img-Größeneigenschaften anpasst, jedoch nicht. Glücklicherweise lernt man nie aus.
Mit Gruß
Dada
Hi,
Dass sich das a-Hintergrundbild an die "rückvererbten" img-Größeneigenschaften anpasst
was meist Du eigentlich damit? Es ist doch ganz normal, daß eine Box - sofern nichts anderes angegeben wird - sich vertikal ihrem Inhalt (hier dem img) anpaßt.
freundliche Grüße
Ingo
Guten Abend Ingo,
Dass sich das a-Hintergrundbild an die "rückvererbten" img-Größeneigenschaften anpasst
was meist Du eigentlich damit? Es ist doch ganz normal, daß eine Box - sofern nichts anderes angegeben wird - sich vertikal ihrem Inhalt (hier dem img) anpaßt.
es war, rückwirkend gesehen, einfach eine Denkblockade.
Dass das Hintergrundbild zu a in einer Beziehung steht, ist klar (Hintergrundbild).
Dass das img zu a in einer Beziehung steht, ebenso (<a><img></img></a>).
Es ging nur nicht in meine Gehirnwindungen, dass die Höhe des a-Hintergrundbildes sich indirekt an der img-Höhe orientiert, da das img quasi das a aufspannt. Ich sah das a - bezogen auf das Hintergrundbild - irgendwie höhenlos.
Wie gesagt, es war einfach eine geistige Blockade.
Mit Gruß
Dada
Hallo silke,
was muss ich ändern, damit die ebene die ganze zeit sichtbar ist, solange ich mit der maus innerhalb der <td> bin?
Vergiss alles, was ich bisher gesagt habe mit der globalen Flag-Variable; das ist sowieso unschön. Im Moment läuft das auf deiner Seite http://www.fh-kl.de/kaiserslautern/ia/test/schaukasten.htm
wie folgt:
Wenn du mit der Maus auf die bewusste Tabellenzelle mit dem schmalen Schwarzweiß-Bild gehst, wird ein absolut positionierter Layer darübergelegt, in dem sich das große Farbbild als Hintergrundbild befindet. Damit tritt aber gleichzeitig auch das MouseOut-Event für die Tabellenzelle ein, weil diese ja jetzt von dem Layer überdeckt wird: Das Bild verschwindet also nach Ablauf der von dir festgelegten Timeline wieder. Die kleinste Mausbewegung löst dann aber in der nun nicht mehr überdeckten Tabellenzelle wieder den MouseOver-Event aus.
Die Lösung: Den MousOut-Event musst du dem eingeblendeten großen Farbbild zuordnen. Wenn du das auf den Bereich der darunter liegenden Tabellenzelle begrenzen willst, machst du das mit einer Map, in der du eine Area mit den Maßen des schmalen Schwarzweiß-Bildes definierst. Diese findet sich ja auch schon in deinem Dokument, du musst sie nur dem großen statt dem schmalen Bild zuordnen. Das große Bild muss dann natürlich im Vordergrund des einzublendenden Layers stehen und nicht im Hintergrund.
Alles klar?
Gruß Gernot