Ich habe ein paar Bilder und ihre Rollover-Bilder. Mit jQuery möchte ich das Rollover-Bild anzeigen/ausblenden, wenn das Onmousemove/Onmouseout-Ereignis eintritt. Alle meine Bildnamen folgen dem gleichen Muster, wie diese:
Originalbild:
Image.gifRollover-Bild:
Imageover.gif
Ich möchte die "vorbei" Teil der Bildquelle im Ereignis onmouseover bzw. onmouseout.
Wie kann ich das mit jQuery machen?
Wenn Sie nach einer Lösung für eine animierte Schaltfläche suchen, dann ist das Beste, was Sie tun können, um die Leistung zu verbessern, die Kombination von Sprites und CSS. Ein Sprite ist ein großes Bild, das alle Bilder Ihrer Website enthält (Kopfzeile, Logo, Schaltflächen und alle Dekorationen, die Sie haben). Jedes Bild benötigt eine HTTP-Anfrage, und je mehr HTTP-Anfragen, desto länger dauert das Laden.
.buttonClass {
width: 25px;
height: 25px;
background: url(Sprite.gif) -40px -500px;
}
.buttonClass:hover {
width: 25px;
height: 25px;
background: url(Sprite.gif) -40px -525px;
}El 0px 0px Die Koordinaten sind die linke obere Ecke deines Sprites.
Aber wenn Sie ein Fotoalbum mit Ajax oder etwas Ähnlichem entwickeln, dann ist JavaScript (oder ein beliebiges Framework) das Beste.
Viel Spaß!
Als ich vor einiger Zeit nach einer Lösung suchte, fand ich ein ähnliches Skript wie das folgende, das ich nach einigen Anpassungen zum Laufen brachte.
Es behandelt zwei Bilder, die fast immer standardmäßig "aus" sind, wenn die Maus nicht auf dem Bild ist (image-example_off.jpg), und gelegentlich "an", wenn für die Zeit, in der die Maus bewegt wird, das gewünschte alternative Bild (image-example_on.jpg) angezeigt wird.
<script type="text/javascript">
$(document).ready(function() {
$("img", this).hover(swapImageIn, swapImageOut);
function swapImageIn(e) {
this.src = this.src.replace("_off", "_on");
}
function swapImageOut (e) {
this.src = this.src.replace("_on", "_off");
}
});
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery</title>
<script src="jquery.js" type="text/javascript"> </script>
<style type="text/css">
#box{
width: 68px;
height: 27px;
background: url(images/home1.gif);
cursor: pointer;
}
</style>
<script type="text/javascript">
$(function(){
$('#box').hover( function(){
$('#box').css('background', 'url(images/home2.gif)');
});
$('#box').mouseout( function(){
$('#box').css('background', 'url(images/home1.gif)');
});
});
</script>
</head>
<body>
<div id="box" onclick="location.href='index.php';"></div>
</body>
</html> CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
