Wer Kann Mir Sagen Was Das Für Ein Effekt Ist? und wie ich ihn in meine Seite einfüge
#1
geschrieben 17. März 2005 - 12:38
Hallo,
in der letzten Zeit stolpere ich immer öfter über einen "Mausover" Effekt.
z.B. bei Mindfactory.de , wenn ich da auf der Startseite über die Top Angebote fahre geht ein kleines Fenster mit den wichtigsten Daten auf, sobald ich die Maus aus dem Thumbnail raus bewege verschwindet es sofort.
Ich würde diesen Effekt gerne in meine Vereinsseite einbauen, da sind unmengen von Mitgliedern im Thumb dargestellt und ich würde gerne den Namen und einige kleine Infos da reinpacken.
Es wäre schön wenn mir da wer weiterhelfen könnte.
Ach ja, ich bin alles andere als ein HTML Profi, bitte amateurfreundlich ausdrücken
Ich hänge mal einen Screenshot dran.
in der letzten Zeit stolpere ich immer öfter über einen "Mausover" Effekt.
z.B. bei Mindfactory.de , wenn ich da auf der Startseite über die Top Angebote fahre geht ein kleines Fenster mit den wichtigsten Daten auf, sobald ich die Maus aus dem Thumbnail raus bewege verschwindet es sofort.
Ich würde diesen Effekt gerne in meine Vereinsseite einbauen, da sind unmengen von Mitgliedern im Thumb dargestellt und ich würde gerne den Namen und einige kleine Infos da reinpacken.
Es wäre schön wenn mir da wer weiterhelfen könnte.
Ach ja, ich bin alles andere als ein HTML Profi, bitte amateurfreundlich ausdrücken
Ich hänge mal einen Screenshot dran.
Anzeige
#2
geschrieben 17. März 2005 - 12:54
javascript und DHTML.
Der Quelltext verrät mehr:
Der Quelltext verrät mehr:
function showLayer(ID) { tempID = ID; document.getElementById(ID).style.visibility = "visible"; } function hideLayer(ID) { document.getElementById(ID).style.visibility = "hidden"; tempID = 0; }
<td id="klein_blue_transparent"> <!--- MouseOver-Beschreibung ---> Der perfekte Assistent<br> ECOSYS-Laserdruckr s/w<br> max. 16 Seiten/Minute<br> max. 15.000 Seiten/Monat<br> 1.800x600 dpi Auflösung<br> 16MB Seitenspeicher<br> USB 2.0 Schnittstelle <!--- Ende MouseOver-Beschreibung ---> </td>
<a href="http://www.mindfactory.de/cgi-bin/MindStore.storefront/42396f0300150adc2742c0a801ed0606/Product/View/7726415" onmouseover=showLayer("2"); onmouseout=hideLayer("2");><!-- Bild --><img src="/isroot/MindStore/rootimages/7726415.gif" border="0"><!-- end of Bild --></a>
#3
geschrieben 17. März 2005 - 13:37
Erstmal danke für deine superschnelle Antwort Witi...
...aber ich habe es gewusst . . . das wirft noch mehr fragen auf, verstehe ich das richtig das ich das komplett für jedes Thumb einzeln eingeben muß, also alle 3 Codeteile, natürlich andere URL und Beschreibung etc. ... und muß das dann in den Header der Thumb-HTML oder wo kommt das hin.
Wäre schön wenn du mich da ein wenig an die Hand nehmen könntest
...aber ich habe es gewusst . . . das wirft noch mehr fragen auf, verstehe ich das richtig das ich das komplett für jedes Thumb einzeln eingeben muß, also alle 3 Codeteile, natürlich andere URL und Beschreibung etc. ... und muß das dann in den Header der Thumb-HTML oder wo kommt das hin.
Wäre schön wenn du mich da ein wenig an die Hand nehmen könntest
#4
geschrieben 17. März 2005 - 17:21
Tipp: Man nehme CSS. Einfacher und besser, je nach Einsatzgebiet.
Beispiel:
Beispiel:
<html> <head> <style type="text/css"> a.info{ position:relative; color:black; text-decoration:none } a.info:hover{ background-color:transparent; /* Sowas Dummes braucht man nur für den IE */ } a.info span{ display: none } a.info:hover span{ display:block; position:absolute; top:1.5em; left:1em; width:15em; border:2px dashed red; background-color:darkgreen; } </style> <body> <a class="info" href="#">Hier kann irgendwas rein, auch ein bild<span>Und hier kommt der Mouseover-text rein</span></a> </bod> </html>
#5
geschrieben 17. März 2005 - 22:31
Danke Floele,
ich werde mich morgen mal dransetzen...und befürchte das ich noch die ein oder andere Frage haben werde
ich werde mich morgen mal dransetzen...und befürchte das ich noch die ein oder andere Frage haben werde
#6
geschrieben 17. März 2005 - 22:41
Hab noch was vergessen anzumerken...
DHTML ist bereits HTML + Javascript. DHTML ohne Javascript gibt's nämlich nicht.
Zitat
JavaScript und DHTML.
DHTML ist bereits HTML + Javascript. DHTML ohne Javascript gibt's nämlich nicht.
#8
geschrieben 17. März 2005 - 23:05
Diese Seite hat mir geholfen, als ich damals danach gesucht habe....
http://www.bosrup.com/web/overlib/
http://www.bosrup.com/web/overlib/
#9
geschrieben 17. März 2005 - 23:33
Besten Dank...schaue ich mir gerne mal an
Keine sorge, ich melde mich ob ichs gepeilt habe oder nicht.
In diesem Sinne, erstmal eine gute Nacht euch
Keine sorge, ich melde mich ob ichs gepeilt habe oder nicht.
In diesem Sinne, erstmal eine gute Nacht euch
#10
geschrieben 18. März 2005 - 11:38
Also wenn es nur um Tooltips geht, dann ist das "title"-Attribut wohl die einfachste Lösung
#11
geschrieben 18. März 2005 - 15:02
Zitat (SuperMario: 17.03.2005, 23:05)
Diese Seite hat mir geholfen, als ich damals danach gesucht habe....
http://www.bosrup.com/web/overlib/
<{POST_SNAPBACK}>
http://www.bosrup.com/web/overlib/
<{POST_SNAPBACK}>
Hab ich auch verwendet ist aber nicht zu empfehlen, wenn man es nur 2 oder 3-mal auf der seite braucht, weil das Script 60kb hat
#12
geschrieben 18. März 2005 - 22:25
Ich muß nochmal nerven...ich "arbeite" mit Dreamweaver und habe ein komisches problem...ich habe überarbeitete Seiten auf den Server geschoben aber die Änderungen sind nicht zu sehen?!?
Es scheint als hätte er die Dateien nicht überschrieben...auch wiederholtes hochschieben brachte nichts, weiß jemand was das sein könnte?
Hat sich erledigt...ich Trollo...habe mal den Browsercache gelöscht, da ging es wieder
Es scheint als hätte er die Dateien nicht überschrieben...auch wiederholtes hochschieben brachte nichts, weiß jemand was das sein könnte?
Hat sich erledigt...ich Trollo...habe mal den Browsercache gelöscht, da ging es wieder
Dieser Beitrag wurde von Mr. Finch bearbeitet: 18. März 2005 - 22:38
#14
geschrieben 19. März 2005 - 00:12
Du wirst lachen, aktualisiert habe ich mehrfach, brachte nüscht...dann den Cache gelöscht und siehe da, alles wunderbar...wer weiß ob das ne marotte vom FF ist?!? Aber egal, funzt ja nun
#15
geschrieben 19. März 2005 - 11:16
Zitat
wer weiß ob das ne marotte vom FF ist?!?
Ist bei allen Browsern so.
"If you make something idiot proof, someone will invent a better idiot." - Marvin
For Emails always use OpenPGP. My KeyID: 0xA1E011A4
For Emails always use OpenPGP. My KeyID: 0xA1E011A4