Ergebnis 1 bis 5 von 5

Thema: navigation mit wechseldem "Background-Image"

  1. #1
    Neuer Benutzer
    Registriert seit
    28.10.2011
    Beiträge
    27

    navigation mit wechseldem "Background-Image"

    Hallo zusammen,

    ich habe eine kleine Navigation gebastelt. Per jquery wechselt das Hintergrundbild. Bzw. es wechselt die Background-Position.
    Wie ihr seht habe ich das sehr umständlich für jeden Navigationspunkt gelöst (hat schon lange genug gedauert . Wie kann ich das nun vereinfachen und flexibel gestalten, sollten noch mehrere Navi-Punkte dazu kommen. Sprich mein Script sollte in einer Schleife ablaufen, allerdings weiß ich nicht so recht wie ich das bewerkstellingen kann. Ich bin über einen Tipp sehr dankbar. Mein "sprite.png" könnte ich ja so anlegen, dass immer alle 80px ein anderes Bild kommt.

    Hier könnt ihr sehen, was ich gemacht habe: http://nbvfx.net/_test/index.html

    Und hier mein Skript (komplett seht ihr es via link > quelltext):
    HTML-Code:
    // change background images
    	$('.filter01 a')
    	//.css( {backgroundPosition: "8px 0"} )
    	.mouseover(function(){
    		$(this).stop().animate(
    			{backgroundPosition:"(-70px 0)"}, 
    			{duration: "fast"})
    		})
    	.mouseout(function(){
    		$(this).stop().animate(
    			{backgroundPosition:"(8px 0)"}, 
    			{duration: "slow"})
    		})
    	
    // ...
    // ... und filter02, filter03, filter04 usw
    // ...
    	
    
    	
    	$('.filter05 a')
    	.mouseover(function(){
    		$(this).stop().animate(
    			{backgroundPosition:"(-70px -274px)"}, 
    			{duration: "fast"})
    		})
    	.mouseout(function(){
    		$(this).stop().animate(
    			{backgroundPosition:"(8px -274px)"}, 
    			{duration: "slow"})
    		})

  2. #2
    Erfahrener Benutzer
    Registriert seit
    01.10.2010
    Ort
    Ludwigshafen
    Beiträge
    713
    Am einfachsten geht das über Funktionen. Das große Problem hierbei sind natürlich die unterschiedlichen Werte der Bg-Positions.
    Haben die Buttons alle di gleiche Größe? Dann müsstest du einfach den Index des gehoverten Buttons auslesen und dann mal der Standart-Button-Größe rechnen.


    Eine weitere Möglichkeit wäre es, zumindest, wenn du auf IE<9-Support verzichtest, mithilfe des html5-data-attributes einzeln die Werte festlegst:
    http://jsfiddle.net/v2bme/
    We have a strategic plan ... it´s called "doing things"

  3. #3
    Neuer Benutzer
    Registriert seit
    28.10.2011
    Beiträge
    27
    Auf IE 7 und 8 kann möchte ich noch nicht verzichten. Im Moment habe ich das Background-Image als Sprite angelegt und die Werte werden zu unterschiedlich. Ich werde ein neues Sprite machen und das nächste ICON immer alle 80px ... 160px ... 240px ... 320px usw anlegen. Dann sollte es doch klappen.

    Aber wie meinst du mit Funktion, der Wert der sich dann ändert wäre ja immer die Y-Pos, sowohl bei mousoover und mouseout. Ich aktualisiere erst mal mein Sprite .. damit ich nicht diese "krummen" Zahlen drin habe.


    edit : 8.7. / 16:57
    SO, habe nun die Abständer der Sprites angepasst. Jetzt ist alles in 80px schritten . wie war das jetzt mit der Funktion bin da nicht so fit in den Dingen... http://nbvfx.net/_test/index.html gibt es eigentlich noch einen cooleren Effekt als einfach nur neuer Background von links. Ich dachte da so an fadeIn und FadeOut .. aber das geht wohl bei animate() nicht.
    Geändert von mobilat (08.06.2012 um 16:59 Uhr)

  4. #4
    Neuer Benutzer
    Registriert seit
    27.05.2012
    Beiträge
    18
    Hi,

    die einfache Antwort auf Deine Frage:

    Code:
    $('#filter_list a').each(function(index){
    	$(this).mouseover(function(){
    		$(this).stop().animate(
    			{backgroundPosition:"(-80px -"+(index*80)+"px)"}, 
    			{duration: "fast"})
    		})
    	.mouseout(function(){
    		$(this).stop().animate(
    			{backgroundPosition:"(0 -"+(index*80)+"px)""}, 
    			{duration: 200})
    		})
        });
    Viel Spaß!
    - creativecouple

  5. #5
    Neuer Benutzer
    Registriert seit
    28.10.2011
    Beiträge
    27
    Danke für deine Hilfe .. so klappt es auch.
    Leider gefällt mir die Navi so nicht mehr und muss mir jetzt eh was anderes überlegen. Es sollte so auf und zu ploppen .. egal
    Trotzdem Danke für die Funktion.

Stichworte

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •