durchsichtiges Fenster

[alexsp]

Ich habe irgendwo schonmal gesehen, dass wenn man
über ein Bild mit seinem Cursor geht, Informationen in einem extra Fenster
angezeigt werden können, wobei das Fenster über dem Bild ist
und der Hintergrund des Bildes durchschimmert.

Hat jemand eine Ahnung wie man das macht?

 

[Angel-M]

sowas suche ich auch noch
vielleicht hat ja jemand den passenden code?

 

[dkdenz]

Stichworte für die Suchfunktion dieser Site:
getelementbyid + z-index

Stichwort durchschimmern:

opacity:.8;
filter:alpha(opacity=80);
-moz-opacity:.8;

 

[Angel-M]

wäre jemand so lieb und könnte es einem Anfänger (mir) etwas genauer erklären?

 

[Nodgeil]

Stichworte für die Suchfunktion dieser Site:
getelementbyid + z-index

Stichwort durchschimmern:

opacity:.8;
filter:alpha(opacity=80);
-moz-opacity:.8;

is aber iexplorer only oder?

http://www.webmatze.de/webdesign/javascript/tooltips.htm
2 sekunden google suche

 

[dkdenz]

is aber iexplorer only oder?

Nö, läuft so auch im FireFox...

 

[hjf]

Hi!

is aber iexplorer only oder?

Ich glaube ja!

dkdenz meint sicher folgendes:
Man nimmt ein Textfeld und legt darüber das Bild. Das Bild läßt man mit einem Filtereffekt bei Maus hinein halbtransparent erscheinen - bei Maus heraus wird es wieder sichtbar.

Zu Bild über Textfeld findet man hier was:
http://forum.jswelt.de/showthread.php?t=10165

Zu msie-Filtern findet man hier was:
http://msdn.microsoft.com/workshop/samples/author/dhtml/DXTidemo/DXTidemo.htm

Diesen Effekt hatte ich mal irgendwo abgeschrieben - Bild über Plakat:
www.hjf-disein.de dann auf Steckbrief klicken, dann mit der Maus auf das "wanted"-Bild.

Für den Feuerfuchs müßte man den gewollten Effekt mit flash machen (geht ganz einfach) oder mit animierten gifs (ist aufwendig) - oder Feuerfuchs-Benutzer wissen mehr?

lg joachim

 

[hjf]

Hi dkdenz!

Nö, läuft so auch im FireFox...

Mach mal!

lg joachim

 

[Nodgeil]

moz-opacity is für mozilla/firefox
sollte also auch da laufen
is halt kein w3c standart
(google hilft ^^)

 

[dkdenz]

Mit "läuft so auch im FireFox" meinte ich den Filter...
Was meine Stichworte anbelangt, war es nur ein Hinweis,
was man in die Suche eingeben soll um etwas zu finden.

Mein Gedankengang war es,
über ein absolut positioniertes Bild ein mit den gleichen Werten positioniertes div oder span (display:none) mit einem höheren z-index zu legen.
Geht man jetzt mit dem Cursor über das Bild (das dann ein :hover haben sollte oder eben dieses getElementByid),
wird das div/span eingeblendet in dem dann der Text steht und der Transparenzfilter seine Arbeit verrichtet.

Das muss man sich halt zusammenfriemeln, habe da jetzt keinen Nerv zu...

 

[hjf]

Hi!

Ohne Filter geht das Ganze auch. Hab mal was gebastelt.

msie:
Zu unterst hab ich "edit:ein halbtransparentes Bild vom Bild, darauf kommt der Text," darauf das Bild und zu oberst ein transparentes Rechteck.
Dem transparenten Rechteck sage ich, bei Maus rein soll das Bild innerhalb einer Sekunde ausgeblendet werden
und
bei Maus raus soll das Bild innerhalb einer Sekunde eingeblendet werden.
http://www.hjf-disein.de/einblenden/msie/index.htm

flash:
Zu unterst hab ich den Text, darauf kommt das Bild.
Dem Bild sage ich, bei Maus rein soll das die Transparenz vom Bild innerhalb einer Sekunde auf 40% geändert werden
und
bei Maus raus soll das die Transparenz vom Bild innerhalb einer Sekunde auf 100% geändert werden.
http://www.hjf-disein.de/einblenden/flash/index.htm

msie und firefox:
Hier hab ich keine filterfreie Lösung gefunden. Meine animierte gif Idee war ein Denkfehler.

lg joachim