Blogarchiv
- May 2012
- March 2012
- February 2012
- January 2012
- November 2011
- October 2011
- September 2011
- July 2011
- June 2011
- March 2011
- February 2011
- January 2011
- December 2010
- November 2010
- October 2010
- September 2010
- August 2010
- July 2010
- May 2010
- April 2010
- March 2010
- January 2010
- December 2009
- October 2009
- August 2009
- May 2009
- April 2009
- March 2009
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- September 2008
- August 2008
- July 2008
- June 2008
- February 2008
Bilder austauschen mit jQuery
Ich habe mir heute das Buch “jQuery” von Ralph Steyer gekauft. Bereits nach dem zweiten Kapitel fiel mir ein konkreter Anwendungszweck ein: Ich wollte den Bilder- Austauschen- Effekt auf meiner Startseite erneuern. Dabei sollte jQuery zum Einsatz kommen und das HTML entschlackt werden (invalide Attribute wurden entfernt etc.). So weit so gut. So sieht der Quelltext meiner Seite jetzt aus (Ausschnitt):
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//preload image
clearImage = new Image();
clearImage.src = "marcus_cicero_sprechblase.jpg";
$(document).ready(function() {
$("#swapImage").hover(function() {
$(this).attr({src:"marcus_cicero_sprechblase.jpg"});
});
});
</script>
</head>
<body>
<p style="text-align:center; margin-top: 20px;">
<a href="/wp">
<img src="marcus_cicero.jpg" width="320" height="475" id="swapImage" title="Marcus Tullius Cicero">
</a>
</p>
</body>Zur Erklärung: Zuerst wird über das CDN von Google die Funktionsbibliothek jQuery eingebunden. Dann lade ich das Bild mit der Sprechblase vor und sage jQuery, dass es bei dem Rüberfahren über das Bild mit der Maus das Bild austauschen soll. So einfach und doch so genial.
Aus Performance- Gründen wurde der Hintergrundsound bei der Startseite bei den Aufräumarbeiten gleich mit rausgeschmissen.
Update: Die Lösung, wie ich sie oben beschrieben habe, hat leider den Schönheitsfehler, dass das Bild mit der Sprechblase immer noch sichtbar ist, selbst wenn man schon längst mit der Maus wieder wo anders ist. Diese Lösung hier funktioniert besser:
$(document).ready(function() {
$("#swapImage").bind('mouseover', function(){
$(this).attr({src:"marcus_cicero_sprechblase.jpg"});
});
$("#swapImage").bind('mouseout', function(){
$(this).attr({src:"marcus_cicero.jpg"});
});
});
Kommentare
Zu diesem Beitrag wurden keine Kommentare verfasst.