Hey Aaron. Mein Ziel ist es, Mehrere Random Bilder auf einer erstellten Seite zu erstellen. (Siehe die 4 Symbol bilder)
1. Rechteck Tool auswählen und auf die gewünschte stelle einfügen. (Unbenannt1)
2. In das Platzierte Rechteck die Rechte Maustaste anklicken und auf "Webeigenschaften" gehen.
3. Dann klicke ich auf den "Platzhalter" und gehe dann auf "Html Code Body" (Unbenannt2)
4. Dort füge ich den "Html Code" ein. (Unbenannt3)
5. Dann gehe ich auf "Datei" Webseite exportieren und speichere die datein auf den Desktop/Neuer Ordner ab.
6. Dann erstelle ich mir in den "Desktop/Neuen Ordner" die Ordner "js, css und img" füge da die "index.js" und die "jquery.min" in den "js" Ordner, Die normalize.min und den Sytle.css in den "css" Ordner und die bilder bei den Ordner "img" ein.
7. Ich öffne die "index.js" mit ein Editor und gebe den Pfad zu den Bildern ein. ['img/symbole1.png'] und ['img/symbole2.png']
Teste das ganze und es funktioniert. (Unbenannt4)
8. Im Web Designer wähle ich wieder "Rechteck Tool" und paltziere dies auch an der gewünschten stelle. (Unbenannt5)
9. Wieder die Rechte Maustaste anklicken, auf "Webeigenschaften" und dann auf
"Platzhalter" gehen. danach klicke ich wieder auf "Html Code Body" und füge den Html Code ein.
10. bevor ich auf "ok" klicke, ändere ich den script in (<script src="js/2index.js"></script>) um.
9. Gehe dann wieder auf "Datei" Webseite exportieren und speichere die datein auf den Desktop/Neuer Ordner ab.
10. Jetzt kopiere die "index.js aus den "Desktop/Neuer Ordner/js"" auf den Desktop, benenne sie in "2index.js" um und füge sie dann bei "Desktop/Neuer Ordner/Js" wieder ein.
11. Dann öffne ich die "2index.js" mit ein Editor und ändere die zeile in: ['img/symbole3.png'] und ['img/symbole4.png']" um.
Jetzt kommt das Problem. Es werden nicht die ersten zwei random symbole (Symbol Bild 1oder2) angezeigt, sondern nur von den zweiten script, die bilder (3oder4). So, als hätte der zweite script, das erste überschrieben.
Mein Ziel: (Unbenannt 7)
Ich benutze den Html Code:
HTML:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Random Background w/Photo Credit</title>
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="bg"></div>
<div class="photo-credit">
<div class="wrapper">
</div>
</div>
<script src='js/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Index.js
Code:
var $backgroundContainer = $("#bg"), // target container for bg image
$photoCredit = $(".photo-credit p span"), // target for credit text
images = [
['img/symbole1.png'],
['img/symbole2.png']
],
randomNum = Math.floor(Math.random() * images.length), // grab random number
imageData = images[randomNum]; // grab random item from array
// imageData[0] = background image
// imageData[1] = photographer's name
var newImage = $('<img/>', {
src: imageData[0]
});
$backgroundContainer.html(newImage); // apply the image
$photoCredit.text(imageData[1]);
style.css
Code:
#bg img {
position: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: -90px auto;
min-width: 0%;
min-height: 0%;
}
.photo-credit {
background: rgba(0, 0, 0, 0.4);
width: 100%;
margin: 100px auto;
position: absolute;
bottom: 100px;
}
.photo-credit .wrapper {
width: 400px;
margin: 0px auto;
display: block;
}
.photo-credit .wrapper p {
text-align: center;
color: #FF0000;
padding: .6em;
font-size: .8em;
}
