HTML Hover

Hallo Leute

Mir ist aufgefallen das auf Facebook z.B. wenn man auf einem Namen die Maus liegen lässt, ein Hover-Fenster mit einem Bild des Profils angezeigt wird.
Jetzt hatte ich mir überlegt, das ich etwas in der Richtung in meine Homepage einbinde...
Also was ich dachte ist, das wenn man die Maus auf einem Text liegen lässt, das ein Bild als Hover angezeigt wird...
Wie kann ich das machen?

Danke Schonmal MCStreetguy
 
wenn du das ganze noch etwas dynamischer haben willst, kannst du dir auch die üblichen javascript projekte ansehen, die dir sowas ermöglichen. allen vorran wohl jquery
 
Ich muss grade auf nen längeren Download warten, also einfach mal aus dem Kopf die folgende Situation:

Es gibt einen Text. Beim Hover mit der Maus soll ein Bild angezeigt werden.

index.html
Code:
<!DOCTYPE html>
<html>
  <head>
    <title>Hover-Demo</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="hover.js"></script>
  </head>
  <body>
    <div id="link">
      <a href="#">Mein Link</a>
      <br />
      <img src="bild.png" alt="Bild" />
    </div>
  </body>
</html>

jquery.js runterladen, und hover.js mit diesem inhalt anlegen:
Code:
$(document).ready(function() {
  $("#link img").toggle(); /* Bild erst mal verschwinden lassen */
  $("#link a").hover(function() {
    $("#link img").toggle(); /* Bei Hover das Bild anzeigen */
  }, function() {
    $("#link img").toggle(); /* Und beim Verlassen wieder verstecken */
  });
});

http://www.thehappy.de/~xeno/code/hover/ <- und so sieht das dann aus.
 
Zuletzt bearbeitet:
Ich verstehe absolut nicht warum bei solchen Fragen ständig Javascript Lösungen vorgeschlagen werden, wenn sich die Aufgabe problemlos mit CSS lösen lässt.

"Paranoide" User wie ich, mit NoScript würden die JS Lösung nicht einmal sehen ;)
 
Ich verstehe absolut nicht warum bei solchen Fragen ständig Javascript Lösungen vorgeschlagen werden, wenn sich die Aufgabe problemlos mit CSS lösen lässt.

"Paranoide" User wie ich, mit NoScript würden die JS Lösung nicht einmal sehen ;)

klar, das wäre nen guter ansatz. aber das problem ist, das sehr sehr oft schöne animationen zusätzlich gewünscht sind. fade in fade out etc. jetzt mag man denken, mit css3 geht das problemlos. schön wärs.

ich arbeite in dem bereich, und ich wünschte ich könnte alles mit css3 und co machen, einfach weils soviel sauberer ist.
aber das wars auch schon. die realität hingegen sieht nunmal so aus, dass die kunden dann mit nem internet explorer 6 in ihrer firma sitzen und uns fragen, warum die seite so scheisse und starr aussieht. da bleibt dir kaum was anderes übrig, als das eben nicht mit css3 zu bauen. das tut weh und fühlt sich scheisse an, ist aber leider die wahrheit. und noscriptuser gibt es weitaus weniger, als leute die mit ie8 und älter unterwegs sind.

und ja, ich bin mir dessen bewusst, dass jedesmal, wenn ich irgend ne dreckige javascript scheissndrecklösung auf arbeit bauen muss, dass dann irgendwo auf der welt ne kleine mietzekatze stirbt.

und weil ich nunmal schon tausende solcher katzen auf dem gewissen hab, bin ich auch nett zu den zwei dicken nachbarskatzen! ;)
 
Wenn man, insofern möglich, die Seite auch ohne JS bedienen kann müssen auch keine kleinen Miezekatzen sterben ;)
Wenn z.B. fadein/out gewünscht wird spricht nichts dagegen dennoch css für den hover effekt zu nutzen, welches ggf. wenn js aktiv ist wieder deaktiviert wird.

Selbstverständlich gibt es auch Seiten/Applikationen welche ohne Clientseitige Scriptsprache nicht nutzbar sind, aber die vom TE geforderte Funktionalität setzt imo kein JS vorraus.

btw: ich bin immer nett zu katzen ;)
 
ja na klar, kann man das machen. wenn dein kunde aber nen schönen hovereffekt sehen will mit bissl bling bling und slideshow und der nunmal nen ie6 hat. wie erklärst du ihm, dass er doch bitte in seinem fremdgesteuerten it scheisshaufen nen anderen browser installieren soll, damit die seite richtig geht? ;)

vorallem in dem b2b umfeld hat man das extrem oft.wenn man da nen ie7 hat, hat man noch glück. aber auch nur, wenn die rechner doch tatsache schon ne auflösung von 1024x768 haben.
 
Man sollte soweit es geht JS vermeiden.
Ein großer Punkt der gegen JS spricht ist:
- größere/mehr Datenverarbeitung/Ressourcenverbrauch/Request-Anfragen

Schließlich wollen wir unsere Website kompakt halten und ich bin fest davon überzeugt, dass man "hover" mässig alles mit CSS auch erstellen kann.

@MCStreetguy: Bitte kein JS verwenden, schließlich willst du deine "Website" für viele User "erreichbar/nutzbar" machen. Bitte verwende CSS.

Ich lerne CSS - Tutorials und Referenzen für CSS Nutzer

@easteregg: Dann müsste es im Sinne des Kundenbetreuers sein, die "bling, bling" Funktionen dem Kunden näher zu erläutern.
Was dahinter steckt,
Das weniger mehr ist und wenn er es immer noch will, dass man dies gerne umsetzen kann.
Aber ich bezweifle, dass unser Threadersteller für einen Kunden etwas aufbaut :)
 
Zuletzt bearbeitet:
@easteregg: Dann müsste es im Sinne des Kundenbetreuers sein, die "bling, bling" Funktionen dem Kunden näher zu erläutern.
Was dahinter steckt,
Das weniger mehr ist und wenn er es immer noch will, dass man dies gerne umsetzen kann.
Aber ich bezweifle, dass unser Threadersteller für einen Kunden etwas aufbaut :)

auch das is wunschdenken! im internet sagt dir jeder, der sich damit auseinander setzt, dass man auf aktuelle standards anstatt auf frickellösungen setzen sollte. aber es geht schlicht nicht. ich bin nicht in einer position meinen kunden zu erziehen. in fact. entweder ich machs, oder er sucht sich jemand anderes. die wenigsten verstehen, wollen verstehen oder wollens anders haben.

ich red hier nicht von bling bling sachen mit fancy slidern und tollen bildübergängen. selbst viel trivialere sachen, eben irgendwas rein und rausfadendes. irgend ne sinnfreie unnötige technische spielerrei. wenn du es nicht liefern willst dann hast du aufn markt pech. punkt. weil es gibt genug die dir das noch etwas fancymäßiger bauen und am besten mit flash.
ob das überall läuft? wurst, solange es beim kunden aufn rechner läuft.

das ist eben das, worauf die meisten abfahrn. hast du dich nie gefragt, warum sowas wie csi mit fetten explosionen und übelster megaaction nen riesen erfolg ist während polizeiruf 110 keine sau interessiert? und glaub mir, die story ist bei polizeiruf allemal besser :D

das was du da beschreibst und dir wünscht, ist eben wunschdenken. du bist nicht dazu da die kunden zu erziehen. vorallem nicht in einem gesättigten markt. alleine in meiner heimatstadt gibts mehr als 100 konkurrierende unternehmen, die dir alle noch irgend nen netten extra effekt irgendwo hinbauen würde, sei er noch so ranzig, nur damit die den auftrag bekommen.

das sinvollste in solchen momenten ist, dass wenigstens sauber umzusetzen und nicht jquery schnipsel zu guttenbergen.
 
also solche Hover-Geschichten handhabe ich (sowohl auf Arbeit als auch privat) generell so:

zuerst wird eine CSS-Variante gebaut, es gibt eine CSS-Class, die lediglich für den Hover-Effekt da ist - Gestaltungstechnische Dinge landen in einer anderen CSS-Class.

Per JavaScript (jQuery) wird diese Klasse dann wieder entfernt und der jQuery-Hook gesetzt.

Wer also kein JS hat, bei dem läuft der CSS-Fallback, wer JS hat, bekommt seine Hover-Sachen schön gefadet oder wie auch immer es gewünscht ist.

Bei Scripten, welche in bestimmten Browsern nicht laufen, wird vor dem Entfernen des CSS-Fallbacks noch per js auf den UserAgent geprüft...
 
@MCStreetguy: Bitte kein JS verwenden, schließlich willst du deine "Website" für viele User "erreichbar/nutzbar" machen. Bitte verwende CSS.
Diese Aussage ist ein Widerspruch in sich. Es gibt sicherlich bei weitem mehr Leute, die IE < 10 verwenden bzw. ältere Browserversionen, als Leute, die JavaScript deaktiviert haben. Und die Leute, die NoScript etc. verwenden wissen was sie tun, die Leute die IE 7 verwenden nicht.

Comparison of layout engines (Cascading Style Sheets) - Wikipedia, the free encyclopedia - Alles was "Animation", "Transform" oder "Transition" ist wird de-facto nur von webkit in neuester Version und IE 10 unterstützt, 3D-transforms funktionieren auch im Firefox noch nicht so gut. Sicherlich gibts dann wieder vendor-prefixes, filter & Hacks für IE etc. aber schön ist die Lösung dann trotzdem nicht.
Ich setze daher so etwas auch mit jQuery um, das funktioniert gerade einmal in Lynx nicht.

Eine weitere Möglichkeit, wenn man eine schöne und funktionierende Lösung will, wäre die Verwendung von Modernizr & Co. Ist natürlich wieder mit einem höheren Arbeitsaufwand verbunden den wohl kaum ein Kunde zahlt.

Mein Fazit ist: Auf JS verzichten bzw. Alternativen anzubieten zahlt sich nur bei wirklich großen Websites aus, wenn der Kunde es zahlt oder für die eigene Website um es zu lernen, überall anders ist der Mehrwert gegenüber dem Aufwand zu gering.
 
Diese Aussage ist ein Widerspruch in sich. Es gibt sicherlich bei weitem mehr Leute, die IE < 10 verwenden bzw. ältere Browserversionen, als Leute, die JavaScript deaktiviert haben. Und die Leute, die NoScript etc. verwenden wissen was sie tun, die Leute die IE 7 verwenden nicht.

Wieso ist das ein Widerspruch?
Falls du darauf hinaus willst, dass verschiedene Browser CSS unterschiedlich interpretieren, dann gibt es auch dafür Lösungen in CSS (ie hack u.ä.).
 
Wieso ist das ein Widerspruch?
Es ist genau dann ein Widerspruch, wenn der Kunde wirklich Animation o.ä. haben möchte und du das versuchst, per CSS3 zu lösen - dann gibt es nämlich wesentlich mehr User, die JS aktiviert haben als User, die aktuellste Browser mit super CSS3-Unterstützung haben.

Solange du wirklich nur ein ganz einfaches
Code:
.foo {display:none;}
.foo:hover {display:block;}
brauchst, funktioniert das im Gegensatz zu jQuery-Alternativen auf fast allen Browsern (ausgenommen Text-Browser ;-) )
Daher ist dies für mich auch immer der js-freie Fallback, den ich bei Hover-Sachen immer mit einbaue...

Aber sobald irgendwas an Animation gefordert ist, ist CSS keine Alternative zum doch auf fast jedem js-fähigem Browser funktionierenden jQuery
(wiederum Ausnahmen in Form spezieller jQuery / jQuery-UI-Plugins ausgeschlossen...)

Daher finde ich die Aussage "bitte kein JS, nutze lieber CSS" so generell fragwürdig. Es ist immer eine Einzelfall-Entscheidung, an welchen Stellen wieviel mit CSS und wieviel mit JavaScript gemacht wird...
 
Was ich bei JS-Animationen viel problematischer finde ist die Tatsache, dass sie nicht beschleunigt werden. Die ganzen ARM-Kisten mit OpenVG-Kernen usw. können CSS3-Animationen praktisch umsonst nahezu vollständig in Hardware machen. CSS3-Animationen werden auch aufm Desktop in nativem Code vom Browser gerendert, u.U. auch zu weiten Teilen Hardwarebeschleunigt.
Ich kann mehrere dutzend Elemente mit CSS3 animieren und meine CPU-Last ist bei ~20 %.
Aber wenn ich mit jQuery.Cycle eine Slideshow mit einem großen Bild einbaue, lastet das eine CPU fast voll aus.


Aber ja, leider leider versaut's oft der IE.
 
Zurück
Oben