1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. Unsere jährliche Weihnachts-Banner-Aktion hat begonnen! Wir freuen uns auf viele, viele kreative Vorschläge.
    Mehr dazu könnt Ihr hier nachlesen: Weihnachtsbanner 2016

    Information ausblenden

jQuery hover über größere Grafik

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von grafagoggel, 18.01.10.

  1. grafagoggel

    grafagoggel James Grieve

    Dabei seit:
    26.11.09
    Beiträge:
    137
    Heyo Leute,

    ich hab ein kleines Problem beim Design und umsetzen meines Logo's für meinen zukünftigen Blog. Folgendes Problem. Ich habe mein Logo designed und will dieses mit jQuery durch einen hover Effekt animieren.

    Der Schriftzug "grafagoggel" hat 4 g's jedes "g" hat eine Art Schein mit einer eigenen Farbe, der recht groß ist (die zwei letzen g's haben einen Schein gemeinsam). Wenn man nun mit der Maus über eines der g's fährt soll der Schein von dem gehoverten g stärker werden. Da der Schein aber recht groß ist und die Scheine (!?!?) der g's sich überlappen und sich sozusagen der Schein über den ganzen Schriftzug erstreckt ist jede hover-Grafik so groß wie der eigentliche Schriftzug.

    Jetzt habe ich ein kleines jQuery Skript geschrieben, dass beim hovern einer der Grafiken die Opacity der hover Grafik von 0 auf 1 schraubt.

    Das Skript sieht so aus.

    Code:
    <script type="text/javascript">
    jQuery(document).ready(function(){
    
    	jQuery("ul#logo li").hover(function() {
    		jQuery(this).find('img').addClass("hover").stop()
    			.animate({
    				opacity: 1, 
    			}, 100);
    		
    		} , function() {
    		jQuery(this).find('img').removeClass("hover").stop()
    			.animate({
    				opacity: 0,
    			}, 2000);
    	});
    
    	 
    });
    </script>
    Jetzt habe ich jeder der hover-Grafiken ein padding zugewiesen. Und zwar so dass der eigentliche Teil immer nur das "g" abdeckt. Jedoch reagiert das Skript auch auf das padding. Gibt es eine Möglichkeit dem Skript zu sagen dass er das padding ausschließen soll?

    Ich hoffe ihr könnt mir irgendwie folgen...

    Vielen Dank schonmal! Greetz

    Hab hier jetzt mal ein jQuery Plugin gefunden, komm aber nicht wirklich damit klar... Ist es überhaupt dafür gedacht?
     
    #1 grafagoggel, 18.01.10
    Zuletzt bearbeitet: 18.01.10
  2. lowpixel

    lowpixel Becks Apfel (Emstaler Champagner)

    Dabei seit:
    25.10.07
    Beiträge:
    332
    Könntest du das ganze irgendwo hochladen? Wäre einfacher :)
     
  3. Synoxis

    Synoxis Leipziger Reinette

    Dabei seit:
    09.06.09
    Beiträge:
    1.774
    Erstens das und zweitens, warum machst du sowas mit Javascript und nicht mit Flash? Wäre hier denke ich besser geeignet.
     
  4. lowpixel

    lowpixel Becks Apfel (Emstaler Champagner)

    Dabei seit:
    25.10.07
    Beiträge:
    332
    Zu der Flash Geschichte kann ich für meinen Teil sagen, dass man Flash nur für Online-Anwendungen nutzen sollte. Mich nervt es ständig auf einer Webseite Flash in einer Navigation o.ä. zu sehen, wo man hätte auch Javascript etc. einsetzen können und ich glaube so geht es vielen!
     
  5. knalli

    knalli Stechapfel

    Dabei seit:
    19.01.10
    Beiträge:
    159
    Nö, Flash ist nicht geeigneter. Nur weil jemand keine Ahnung hat, wird in so einen Falle auf Flash zurückgegriffen.. ist aber nicht notwendig.

    @Op: Soweit ich das richtig verstanden habe, musst du nur absolut/relativ positionierte Elemente mit transparenten Hintergrund einfügen. Ein, zwei Screenshots würden aber sicherlich helfen, damit wir das richtig verstehen.

    Ansonsten, soweit ich das jetzt verstanden habe: position:absolute/relative, top/left, overflow: hidden..und evtl. zIndex.
     

Diese Seite empfehlen