Wechsel zwischen Bild und Schrift

[lina]

moin :)
Ich bin gerade dabei eine Homepage für meinen Neffen zu basteln. Nun bin ich auf ein unschönes Problem gestossen :(
Ich habe ein Bild innherlab eines Divs:
<div onMouseover="textzeigen()"  id="bild0" style="position:absolute; top:70px; left:0px;z-index:2" >
<img src="Bilder/baby_rahmen.jpg" >
</div>
und ein  weiteres div:
<div onMouseout="bildzeigen()" id="text" style="position:absolute;top:70px;z-index:1;">
  Text der nichts<br> zur Sache tut<br> aber Zeilenumbrüche enthält.
</div>

Positioniert werden beide Divs übereinander. Beim Laden der Seite liegt das erste über dem zweiten.
Diese beiden sollen sich bei mouseover und mouseout wechseln. Hierzu die Funktionen:
function textzeigen(){
  document.getElementById("bild0").style.visibility = "hidden";
}

function bildzeigen(){
  document.getElementById("bild0").style.visibility = "visible";
}
Wichtig waere vielleicht noch zu sagen, dass das zweite div (das mit dem Text) per Script genauso gross gemacht wurde wie das Bild:
document.getElementById("text").style.width = bildbreite;
document.getElementById("text").style.height=window.document.images[0].height;

Das funktioniert soweit eigentlich ganz gut. Nur leider blendet sich das Bild für kurze Zeit ein, wenn die Maus den Text verlaesst. Ich glaubte in meiner Naivität, dass dies damit behoben waere, wenn ich das div genauso gross mache wie das Bild.
Da ich den Sachverhalt nicht so toll wiedergeben kann, hab ich die Seite mal hinterlegt: http://www.tfh-berlin.de/~s707378//Thilo/
Kleine Warnung: noch habe ich das ganze nur für IE gemacht aber eine Light-Version ohne Javascript und für alle Browser ist natürlich vorgesehen!

Hat vielleicht jemand Ideen woran das liegt und wie ich das abschalten kann?

liebe Gruesse lina

[KD-one]

Hallo lina,

Das flackern, das du vermutlich meinst, kommt daher, daß Events immer feuern, wenn eine Zustandsänderung, bei dir der Wechsel von der Schrift auf das div, eintritt.
Dem kannst du abhelfen, indem du das onMouseOut-Event mit einem Timeout belegst, der den Bildwechsel mit einer kurzen Verzögerung belegt.
Dasselbe Problem liess mich damals bei meinem Menü fast verzweifeln.

Gruß

Kurt

[KD-one]

Hallo lina,

Hier noch ein Link zu dem von mir beschriebenen "feuern" der Events.
http://selfhtml.teamone.de/dhtml/modelle/microsoft.htm#event_bubbling

Gruß

Kurt

[KD-one]

Hallo,

und nachdem ich mir die Seite nochmals genau zu Gemüte geführt habe, habe ich die Lösung, die dein Problem ohne Timeout umgeht, ganz unten auf der Seite gefunden. ;-)

Gruß

Kurt

[lina]

moin :)
Ich hoffe es liegt an der frühen Zeit, aber auch nachdem ich mir die Seite mit der Vererbung ein drittes Mal durchgelesen habe, verstehe ich noch nicht wie ich damit mein Problem löse :(
vielleicht kannst du mir das anhand meiner Beispiele ein bisschen erklären?
Vielen Dank!
liebe Gruesse lina

[KD-one]

Hallo,

<Zitat>
Der Bubble-Effekt lässt sich auch ausschalten, falls er nicht erwünscht ist. Dazu müssen Sie in einem JScript/JavaScript-Bereich die Anweisung notieren:
window.event.cancelBubble = true;
</Zitat>

Gruß

Kurt

[lina]

moin :)

<Zitat>
Der Bubble-Effekt lässt sich auch ausschalten, falls er nicht erwünscht ist. Dazu müssen Sie in einem JScript/JavaScript-Bereich die Anweisung notieren:
window.event.cancelBubble = true;
</Zitat>

hmm ok - das hoert sich logisch an - funktioniert aber leider nicht :(
HAb es eingefügt in die Funktion ausrichten - aber es bleibt so wie es ist...
Andere Ideen?
Vielleichtkannst du dir auch mal die meine Seite anschauen - also ich meine den Quelltext.
Ich mein - vielleicht hab ich ja auch kompletten Murx geschrieben.
http://www1.tfh-berlin.de/~s707378/Thilo
liebe Gruesse lina

[KD-one]

Hallo,

Also, so, wie ich das verstanden habe, gehört das nicht in die Funktion eingefügt, sondern oben in den Scriptbereich vor den Funktionen sonst ist das ja nur für die Funktion gültig.?.
Sollte es aber dennoch nicht funktionieren, dann bleibt noch der Weg über den Timeout für onMouseOut. Definiere einen Timer  zu Beginn (timer=false;) und rufe die Funktion bildzeigen so auf:
onMouseOut ="timer=window.setTimeout('bildzeigen()',100);"
Also, was die Scripte betrifft, da bin ich nicht wirklich die richtige Anlaufstelle, da gibt es hier viel größere Kapazitäten, ich bin froh, wenn ich meine eigenen Scripte ordentlich zum laufen bringe. ;-).
Struppi hat dir ja schon ein paar Tips gegeben, frag halt ein wenig nach, wenn dir was umklar ist.

Gruß

Kurt

[lina]

moin :)
Auch dir danke fuer deine Bemuehungen... werd ich morgen auch mal testen ob es ausserhalb der Funktion funktioniert.
Ich lass euch wissen ob es geklappt hat :)
liebe Gruesse lina

[Struppi]

Da ich den Sachverhalt nicht so toll wiedergeben kann, hab ich die Seite mal hinterlegt: http://www.tfh-berlin.de/~s707378//Thilo/
Kleine Warnung: noch habe ich das ganze nur für IE gemacht aber eine Light-Version ohne Javascript und für alle Browser ist natürlich vorgesehen!

Die Seite fängt it einem Kapiteln Fehler an (ich bin immer wieder erstaunt was für Fehler der IE ausbügelt).

Die Zeile:
<script ><script type="text/javascript">

ist absolut ungültig und sollte jeden Browser der was auf sich hält davor abhalten dein Skript auszuführen..

Es reicht
<script type="text/javascript">

Der nächste Fehler ist, dass du dem wechselbild falsch eine Quelle zu weist:
wechselbild=new Image();
...
case "0-20": wechselbild = "Bilder/20-40.png";break;

Das muss heißen:
wechselbild.src = '.....';

Aber sonst seh ich erst mal keine Fehler. Ich würd dir aber raten zum entwickeln von etwas aufwendigeren Skripten immer den Moziall zu verwenden, da der die Fehler auch anzeigt und damit dir hilft.

Struppi.

P.S. auch über CSS solltest du dir mal gedanken machen.
<font class="gelb">
So was tut weh. font ist veraltet und sollte nicht mehr verwendet werden und wenn es dir darum geht in deiner Seite den Text gelb zu machen dann mach sowas:
<style...>
body{ color:yellow; background-color:#XXX}
</style>

[lina]

moin :)
vielen Dank fuer die Tips - werde ich morgen gleich mal umsetzen :)
Hast du vielleicht noch eine Idee fuer mein Problem?
liebe Gruesse lina

[at]

Hallo.

vielen Dank fuer die Tips - werde ich morgen gleich mal umsetzen :)

Wenn wir schon bei CSS sind:

Hast du vielleicht noch eine Idee fuer mein Problem?

Ja. Stampfe dein Skript ein und verwende CSS: Weise einem <a> (damit auch der IE damit klar kommt) die Grafik als Hintergrund sowie eine feste Breite und Höhe (nämlich die des Bildes) die Eigenschaft "display:block;" zu. Für "a:hover" ersetzt du die Grafik durch eine Farbe oder eine andere Grafik deiner Wahl und schaltest den Text mittel "display" oder "visibility" ab.
Nähreres findest du u. a. in den CSS-Kapiteln SelfHTML, Hilfe bei Details später in diesem Thread.
MfG, at

[lina]

moin :)

Ja. Stampfe dein Skript ein und verwende CSS: Weise einem <a> (damit auch der IE damit klar kommt) die Grafik als Hintergrund sowie eine feste Breite und Höhe (nämlich die des Bildes) die Eigenschaft "display:block;" zu. Für "a:hover" ersetzt du die Grafik durch eine Farbe oder eine andere Grafik deiner Wahl und schaltest den Text mittel "display" oder "visibility" ab.

Danke fuer die Tips &#8211; hab es versucht umzusetzen ... aber CSS erschliesst sich mir nicht ganz : ( Habe jetzt diese zwei Zeilen in die css-Datei eingefügt:
a:hover{background-image: url(Bilder/hintergrund.png);}
.bild{display:block;text-align:center;background-image:url(Bilder/baby_rahmen.jpg);height:328; width:481px;}
und in die html-Datei <a class="bild">Test test test </a>
Nur leider wird jetzt beides angezeigt: Bild und Text. Mit Display:none wird nichts von beidem mehr angezeigt.
Wie genau schaffe ich es denn jetzt dass bei a:hover Bild und Schrift wechseln? Also der Normalfall soll sein, dass nur das Bild zu sehen ist und wenn die Maus drüberfährt soll nur der Text sichtbar sein.
Leider klappt das mit dem a:hover auch nicht &#8211; zumindest wird nicht das hintergrundbild gezeigt.
Vielen Dank schonmal fuer eure Hilfe : )
Zu sehen ist die vermurxte Datei wie gehabt unter: http://www.tfh-berlin.de/~s707378/Thilo

liebe Gruesse lina

[at]

Hallo.

a:hover{background-image: url(Bilder/hintergrund.png);}
.bild{display:block;text-align:center;background-image:url(Bilder/baby_rahmen.jpg);height:328; width:481px;}

Du solltest dem Browser kurz erläutern, dass das Element keine 328 Ziegelsteine hoch sein soll ;-)

und in die html-Datei <a class="bild">Test test test </a>
Nur leider wird jetzt beides angezeigt: Bild und Text. Mit Display:none wird nichts von beidem mehr angezeigt.

Mit "visibility:hidden;" erreichst du, dass ein Text nicht angezeigt, das Element aber den dafür vorgesehenen Platz wegnimmt -- etwa so wie ein transparenter Text.

Zu sehen ist die vermurxte Datei wie gehabt unter: http://www.tfh-berlin.de/~s707378/Thilo

Was ich dort sehe, funktioniert bei mir. Bedenke aber, dass ein <a>-Element keine weiteren <a>-Elemente enthalten darf.
MfG, at

[lina]

moin :)

Du solltest dem Browser kurz erläutern, dass das Element keine 328 Ziegelsteine hoch sein soll ;-)

Das is ein berechtigter Einwand ;) aber selbst mit 328 pixeln kommt das a:hover gar nicht erst zum Einsatz ... und immer noch wird beides - Text und Bild angezeigt. Leider bewirkt visibility:hidden das gleiche wie display:none - weder Text noch Bild wird angezeigt :(
Irgendwie muss das doch zu trennen sein.

Was ich dort sehe, funktioniert bei mir. Bedenke aber, dass ein <a>-Element keine weiteren <a>-Elemente enthalten darf.

oehm - sorry - mein Fehler - das war noch die alte Version mit dem flackernden Script... jetzt ist es aktuell. Magste vielleicht nochmal dryber schaun? Mich beschleicht so das dumme Gefühl, dass ich das Konzept von CSS _gar_ nicht verstehe und nur Fehler mache :(

liebe Gruesse lina

[at]

Hallo.

Das is ein berechtigter Einwand ;) aber selbst mit 328 pixeln kommt das a:hover gar nicht erst zum Einsatz ... und immer noch wird beides - Text und Bild angezeigt. Leider bewirkt visibility:hidden das gleiche wie display:none - weder Text noch Bild wird angezeigt :(
Irgendwie muss das doch zu trennen sein.

Bei mir wirkt testweise

a { display:block; width:481px; height:328px; background:url(bilder/bild.png) }
a:hover { background:transparent; cursor:default; }
a span { display:none; }
a:hover span { display:block; }

auf

<a href="#"><span>Ein beliebiger Text, der erst erscheint, sobald der Cursor das Bild berührt. Der Text sollte übrigens lang genug sein, um zumindest einen Umbruch zu erzeugen.</span></a>

und funktioniert soweit. Lediglich der IE verschiebt den Text so weit, dass nur Fragmente übrig bleiben. Aber damit kannst du ja noch ein wenig experimentieren -- soviel "Self" muss dann doch sein ;-)
Gegebenenfalls solltest du dich auch noch mit den Universalattributen "id" und "class" bekannt machen, wenn du weitere <a>-Elemente auf deiner Seite verwenden möchtest.

oehm - sorry - mein Fehler - das war noch die alte Version mit dem flackernden Script... jetzt ist es aktuell. Magste vielleicht nochmal dryber schaun? Mich beschleicht so das dumme Gefühl, dass ich das Konzept von CSS _gar_ nicht verstehe und nur Fehler mache :(

Ein Flackern konnte ich mit Opera7 nicht wahrnehmen, soweit ich mit recht entsinne.
Wenn du die Gelegenheit nutzen und in CSS einsteigen willst, findest du im Netz einige gute Tutorials, etwa bei Dr. Web oder zuletzt auch der iX. Referenzen gibt es etwa bei SelfHTML und Mediaevent. Und wenn die englische Sprache keine Hürde darstellt, sind die Seiten von Eric Meyer sicher ein guter Ausgangspunkt.
Ach ja, zum Trost: Mir ist Javascript sehr suspekt und ich bin regelmäßig glücklich über die Ausrede, es aus Rücksichtnahme auf sicherheitsbewusste Surfer besser gar nicht zu verwenden.
MfG, at

[lina]

moin :)
*cut*

und funktioniert soweit. Lediglich der IE verschiebt den Text so weit, dass nur Fragmente übrig bleiben. Aber damit kannst du ja noch ein wenig experimentieren -- soviel "Self" muss dann doch sein ;-)

Vielen vielen Dank fuer deine Hilfe :)
Das "Self" nehme ich sehr gerne in Kauf - und werde die 10 Stunden Zugfahrt am Wochenende genau dafuer nutzen.
Ich halte dich dann mal auf dem laufenden was ich so fertig gebracht habe :)
.oO(das macht mir wieder alles Mut)

liebe Gruesse lina

[lina]

moin at :)
Ich möchte mich nocheinmal sehr bei dir bedanken! Hast mir super geholfen und mit den Kleinigkeiten kam ich dann auch noch zurecht :)
Ist natürlich alles noch nicht fertig - aber ich bin jetzt auf dem besten Wege! Vielen Dank *knicksmach*
liebe Gruesse lina

[at]

Hallo.

Ich möchte mich nocheinmal sehr bei dir bedanken! Hast mir super geholfen und mit den Kleinigkeiten kam ich dann auch noch zurecht :)

Das freut mich :-)

Ist natürlich alles noch nicht fertig - aber ich bin jetzt auf dem besten Wege! Vielen Dank *knicksmach*

Langsam müsste ich einen roten Kopf bekommen ;-)
Vielleicht bis demnächst.
MfG, at