HTML and CSS Reference
In-Depth Information
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0,rgba(255,255,255,.3)),
color-stop(1,rgba(255,255,255,0)));
font: bold 16px/24px sans-serif;
text-shadow: 0 1px 0 #000;
color:#fff;
padding: 8px 15px;
margin: 20px;
}
.shakeit {
background-color:#1dd5fd;
border-color: #59e2ff;
}
Listing 6.8 Die CSS-Definitionen für den Shake-It Button
Sämtliche Definitionen sollten Ihnen bereits bekannt sein. Neben einer Hinter-
grundfarbe können Sie auch noch Ränder, Textschatten und Verläufe definieren.
Damit haben Sie ein zufälliges Bild aus Flickr geladen, einem Container als Hinter-
grundbild zugewiesen und noch Text und Farbe des Buttons verändert. Der Code der
Funktion neuespolaroid() sollte nun wie folgt aussehen:
// Neues Polaroid einblenden
var neuespolaroid = function() {
// Variable für zufälliges Bild festlegen
var randomImage = "";
// Feed über einen JSON-Aufruf laden
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=
29306403@N07&lang=en-us&format=json&jsoncallback=?", function(data){
// Zufälliges Bild aus dem Flickr-Stream auswählen
randomImage = data.items[Math.floor(Math.random() * data.items.length)]
.media.m;
// Das Bild durch eine größere Version ersetzen
var randomImageCorrect = randomImage.replace("_m.jpg", "_z.jpg");
// Das Bild als Hintergrundbild des Containers festlegen
$('.flickr-bild').css("background","url(" + randomImageCorrect + ")");
Search WWH ::




Custom Search