Der Programmcode

Mit der ersten Formatierung entfernen Sie die Aufzählungspunkte der unformatierten Liste und setzen den Außen- und Innenabstand der einzelnen Zellen auf Null. Für die einzelnen Aufzählungselemente setzen Sie den Textfluss auf links. Damit erscheinen alle Elemente sauber angeordnet, jedoch abhängig von der Größe des Einzelbilds teilweise nicht nebeneinander, sondern, wenn der Platz nicht mehr ausreicht, untereinander.Die letzte Formatierung bezieht sich auf die Verlinkung und die damit verknüpften Image-Objekte. Die Zuweisung einer festen Breite ist nicht zwingend notwendig. Da wir jedoch eine regelmäßige Anordnung der Elemente nebeneinander anstreben, ist die Größe auf 200 Pixel begrenzt. Das Bild wird somit, falls es zu groß ist, entsprechend skaliert.Zusätzlich wird der blaue Standardrahmen eines verlinkten Bildes entfernt und die Positionierung auf relative gesetzt. Damit ist bei den eigentlichen Formatierungen für den Spotlight-Effekt der Einsatz von top und left problemlos möglich. Für die Klasse loescheSpotlight wird folgende Formatierung hinterlegt:

.loescheSpotlight{ clear:both; }

Damit wird die Hervorhebung eines bestimmten Elements wieder zurückgesetzt. Diese realisieren Sie mit der letzten CSS-Formatierung.

.spotlightEffekt ul li a img.active {
border:4px solid white;
z-index:1;
left: -4px;
top: -4px;
}

Diese Formatierung kommt dann zum Einsatz, wenn mit Hilfe von Javascript die Klasse active dem Image-Objekt hinzugefügt wird. In diesem Fall wird das Bild, über dem gerade der Mauszeiger schwebt, mit einem weißen Rahmen versehen, der eine Breite von 4 Pixeln besitzt. Das Bild wird nun um 4 Pixel nach links und nach oben verschoben. Damit es trotz allem im Vordergrund vor den anderen Bildern erscheint, muss der z-Index noch geändert und auf 1 oder eine entsprechend höhere Zahl gesetzt werden, falls Sie an weiteren Stellen den z-Index einsetzen.

Der Programmcode

Die restliche Arbeit wird schließlich über den Javascript-Code realisiert. Dieser wird direkt mit der Seite mitgeladen und dann aktiviert.Für die weitere Arbeit wird eine Variable imRahmenlicht verwendet, über die der Parameter für die Lichtdurchlässigkeit gesteuert wird. Außerdem nehmen Sie an dieser Stelle die Breite und Höhe der Bilder der Klasse spotlightEffekt auf, damit Sie später dem Listenelement die korrespondierenden Werte zuweisen können.

$(window).load(function(){
var imRahmenlicht = {
opacity : 0.2,
imgWidth : $('.spotlightEffekt ul
li').find('img').width(),
imgHeight : $('.spotlightEffekt ul
li').find('img').height()
};
$('.spotlightEffekt ul li').
css({
'width' : imRahmenlicht.imgWidth,
'height' : imRahmenlicht.imgHeight
});
$('.spotlightEffekt ul li').hover
(function(){
$(this).find('img').addClass
('active').css({ 'opacity' : 1});
$(this).siblings('li').find('img').
css({'opacity' : imRahmenlicht.
opacity});
}, function(){
$(this).find('img').removeClass
('active');
});
$('.spotlightEffekt ul').bind
('mouseleave',function(){
$(this).find('img').css('opacity', 1);
});
});

Nachdem Sie die Breite und Höhe des Bildes über die Variable imRahmenlicht im Zugriff haben, werden diese im nächsten Schritt den Listenelementen zugewiesen. Das Skript reagiert nun auf drei Zustände: Die Maus berührt ein Element der unsortierten Liste, die Maus berührt dieses Element nicht mehr und die Maus berührt die unsortierte Liste nicht mehr.

Im ersten Fall - dem Startpunkt für den Spotlight-Effekt - löst das hover-Element von $('.spotlightEffekt ul li') das Ereignis aus. Als Erstes wird das Bildobjekt ermittelt, das gerade im Zugriff ist. Diesem wird mittels addClass die Klasse active zugewiesen; die Transparenz über den Parameter opacity wird auf 1 gesetzt. Dies entspricht dem Zustand "keine Transparenz".Jetzt weisen Sie allen anderen Elementen die zuvor innerhalb des Arrays imRahmenlicht festgelegte Transparenz zu - hier mit dem Wert 0.3. Dies bewirkt eine Verstärkung des Spotlight-Effekts. Für die Zuweisung verwenden Sie die Funktion siblings() mit dem Tag li als Parameter. Damit das Scheinwerferlicht nicht auf dem ersten Element stehen bleibt, das Sie mit dem Mauszeiger berührt haben, sind noch weitere Aktionen notwendig. Berührt der Mauszeiger ein anderes Bild, wird die Klasse active dem Bild-Objekt wieder mit removeClass entzogen.Im letzten Schritt muss nur noch die Transparenz der Bilder geradegezogen werden, da ansonsten die restlichen Bilder immer den Wert 0,3 für opacity behalten. Die Aktion hängen Sie an das Element der unsortierten Liste an und verknüpfen dieses mit dem Ereignis mouseleave. In diesem Fall wird die Transparenz wieder für alle Elemente auf den Wert 1 gesetzt und damit in den Ursprungszustand zurückversetzt.

Spotlight-Plug-ins

Es gibt zahlreiche jQuery-Plug-ins zur Abbildung des Spotlight-Effekts. Eine komplette Auflistung finden Sie unter plugins.jquery.com/plugin-tags/spotlight .Neben dem Spotlight-Plug-in von Dev-7Studios gibt es in der Bibliothek von jQuery zwei weitere Kandidaten:

• jQuery.Spot.js (fumarporros.bplaced.net/spot/ ): ein klassischer Scheinwerfer, der Ausschnitte eines Bildes beleuchtet.
• Funny-Spotlight (bth.is74.ru/solutions/spotlight ): bietet eine vergleichbare Funktionalität wie jQuery.Spot.js.

Die restlichen Ergebnisse sind entweder nicht mehr verfügbar oder haben nichts mit dem Spotlight-Effekt zu tun.

Parameter des Spotlight-Plug-ins

Das Spotlight-Plug-in besitzt eine Reihe von Aufrufparametern, die wir hier zusammengestellt haben. Existiert ein Standardwert, ist dies entsprechend vermerkt.