zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Jquery Code für Mouseover etwas vereinfachen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.03.2010, 11:00
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.12.2008
Beiträge: 67
connor befindet sich auf einem aufstrebenden Ast
Standard Jquery Code für Mouseover etwas vereinfachen

Hallo!

ich habe hier ein Menü und darin habe ich einen Mouseover via Jquery eingebaut. Es funktioniert, nur ist das halt etwas viel Jquery Code für 4 Menüpunkte. Es kommen später auch noch einige dazu... Kann man das nicht irgendwie vereinheitlichen bzw. zusammenfassen?

Code:
<script type="text/javascript">
$(document).ready(function(){
	$('img#dasweingut_switch').bind('mouseover mouseout', function(event){
		if(event.type == 'mouseover'){
			$(this).attr("src", "images/dasweingut_hover.png");
		}else{
			$(this).attr("src", "images/dasweingut.png");
		}
	});
	$('img#lagen_switch').bind('mouseover mouseout', function(event){
		if(event.type == 'mouseover'){
			$(this).attr("src", "images/lagen_hover.png");
		}else{
			$(this).attr("src", "images/lagen.png");
		}
	});
	$('img#philosophie_switch').bind('mouseover mouseout', function(event){
		if(event.type == 'mouseover'){
			$(this).attr("src", "images/philosophie_hover.png");
		}else{
			$(this).attr("src", "images/philosophie.png");
		}
	});

	$('img#familie_switch').bind('mouseover mouseout', function(event){
		if(event.type == 'mouseover'){
			$(this).attr("src", "images/familie_hover.png");
		}else{
			$(this).attr("src", "images/familie.png");
		}
	});		
});
</script>
HTML-Code:
<div id="outer">
    <ul id="menu">
        <li class="dasweingut">
        	<ul>
            	<li><a href=""><img id="familie_switch" src="images/familie.png" /></a></li>
            	<li><a href=""><img id="philosophie_switch" src="images/philosophie.png" /></a></li>
            	<li><a href=""><img id="lagen_switch" src="images/lagen.png" /></a></li>
            	<li><a href=""><img id="dasweingut_switch" src="images/dasweingut.png" /></a></li>                                                
            </ul>
        </li>
    </ul>
</div>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.03.2010, 11:51
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.776
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

Hallo connor,

Du könntest die id's bei den Bildern ohne das _switch angeben, dann hättest Du die Möglichkeit diesen Wert zu benutzen um die Hover-Bilder dynamisch zu ermitteln.

javascript:
PHP-Code:
$('#menu img').each(function(){ //durchläuft das Bilder-Object in einer Schleife
    
var obj = $(this); //das jeweilige img
    
var src obj.attr('src'); //das default src
    
var replacestr obj.attr('id');//liest die id aus. Ergibt dann z.B. 'familie', 'lagen' ...
    
var hover_src src.replace(replacestr,replacestr+'_hover'); //ersetzt z.B. 'familie' mit 'familie_hover'
    
    
obj.hover(function(){
        
obj.attr('src',hover_src);
    },function(){
        
obj.attr('src',src);
    });  
}); 
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.03.2010, 12:07
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.375
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Ist natürlich die Frage ob man das ganze so bauen sollte oder ob es nicht vielleicht einfacher / besser wäre das ganze mit einfachem css zu bauen. Des weiteren, du solltest den Bildern (wenn du es schon so machst) mit einem alt Attribut versehen.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #4 (permalink)  
Alt 05.03.2010, 12:43
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.12.2008
Beiträge: 67
connor befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Thielo Beitrag anzeigen
Ist natürlich die Frage ob man das ganze so bauen sollte oder ob es nicht vielleicht einfacher / besser wäre das ganze mit einfachem css zu bauen. Des weiteren, du solltest den Bildern (wenn du es schon so machst) mit einem alt Attribut versehen.
aber wie soll das gehen, wenn :hover im IE6 nur für <a> zulässig ist?
Mit Zitat antworten
  #5 (permalink)  
Alt 05.03.2010, 13:31
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.12.2008
Beiträge: 67
connor befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von hemfrie Beitrag anzeigen
Hallo connor,

Du könntest die id's bei den Bildern ohne das _switch angeben, dann hättest Du die Möglichkeit diesen Wert zu benutzen um die Hover-Bilder dynamisch zu ermitteln.

javascript:
PHP-Code:
$('#menu img').each(function(){ //durchläuft das Bilder-Object in einer Schleife
    
var obj = $(this); //das jeweilige img
    
var src obj.attr('src'); //das default src
    
var replacestr obj.attr('id');//liest die id aus. Ergibt dann z.B. 'familie', 'lagen' ...
    
var hover_src src.replace(replacestr,replacestr+'_hover'); //ersetzt z.B. 'familie' mit 'familie_hover'
    
    
obj.hover(function(){
        
obj.attr('src',hover_src);
    },function(){
        
obj.attr('src',src);
    });  
}); 
Yeah!
Ein ganz dickes Dankeschön! Funktioniert einwandfrei!
Mit Zitat antworten
  #6 (permalink)  
Alt 05.03.2010, 13:45
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.375
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Da es sich ja doch um eine Grafische Navigation handelt (oder nicht? ^^), würde das :hover eh auf dem a Tag liegen.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #7 (permalink)  
Alt 05.03.2010, 16:36
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.12.2008
Beiträge: 67
connor befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von hemfrie Beitrag anzeigen
Hallo connor,

Du könntest die id's bei den Bildern ohne das _switch angeben, dann hättest Du die Möglichkeit diesen Wert zu benutzen um die Hover-Bilder dynamisch zu ermitteln.

javascript:
PHP-Code:
$('#menu img').each(function(){ //durchläuft das Bilder-Object in einer Schleife
    
var obj = $(this); //das jeweilige img
    
var src obj.attr('src'); //das default src
    
var replacestr obj.attr('id');//liest die id aus. Ergibt dann z.B. 'familie', 'lagen' ...
    
var hover_src src.replace(replacestr,replacestr+'_hover'); //ersetzt z.B. 'familie' mit 'familie_hover'
    
    
obj.hover(function(){
        
obj.attr('src',hover_src);
    },function(){
        
obj.attr('src',src);
    });  
}); 
hey hemfrie,

ich habe noch eine Frage zu deinem Code:
Wenn ein <img> bereits z.B. das Bild "familie_hover.png" als Standard hat (also wenn ein Menüpunkt aktiv ist), soll beim Überfahren in diesem Falle nicht nochmal das Bild "familie_hover.png" geladen werden.
Wie müsste man deinen Code ergänzen? Ich hoffe du verstehst was ich meine
Mit Zitat antworten
  #8 (permalink)  
Alt 05.03.2010, 19:04
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.776
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

Du kannst z.B. mit Hilfe des Selectors nur die Bilder auswählen, die kein _hover im Namen stehen haben.

Code:
$('#menu img:not([src*="_hover"])')
Thielo hat natürlich Recht damit, dass CSS völlig ausreicht, wenn es Dir nur um die hover Zustände geht und keine Animationen oder sonstige Dinge benötigt werden, die ohne Javascript nicht möglich sind.
Mit Zitat antworten
  #9 (permalink)  
Alt 07.03.2010, 23:01
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.12.2008
Beiträge: 67
connor befindet sich auf einem aufstrebenden Ast
Standard

Danke dir vielmals!
Ja ich weiß, aber das ist schon ok
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
jQuery fadeIn bei mouseover div Scolex Javascript & Ajax 8 17.03.2011 22:05
Jquery: untermenüs nur zeigen bei mouseover und mousebewegung x_merlin_x Javascript & Ajax 0 27.09.2009 13:04
JQuery + Wordpress VoinG Javascript & Ajax 0 29.12.2008 16:03
JQuery anfänger fragen ? wie man den code in php einbaut? kjvision Javascript & Ajax 1 21.08.2008 17:02
Wort in Javascript Code einfügen; dann Javascript Code ausgeben Sp33dy G0nz4l3s Javascript & Ajax 1 23.05.2008 09:37


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:39 Uhr.