• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS und JS Befehle in einer Webseite einfügen

Baumeister

Neues Mitglied
Hallo,
als Newbe in Sachen CSS und JS brauche ich Hilfe.
Ich möchte Fotos meiner Webseite in einer Slideshow wiedergeben.
In Sachen Script bin ich fündig geworden, ich weiss leider nur nicht, wo was eingebunden wird.
Ich habe mal den HTML-Code einer leeren Seite zur besseren Erklärung angehängt.

Die Fotos liegen im Bilderordner auf dem Webserver.
Die entsprechende Slideshow-Javascript-Datei habe ich heruntergeladen und unter dem Namen "slideshow.js" ebenfalls auf dem Server gespeichert.

Nun sollen folgende Zeilen in die Webseite eingebunden werden:

1.) <div id="slideshow">
<img class="start" src="www.xxx.de/bilder/webcam/cam1.jpg" />
</div>

Das ist mein Bliderverzeichnis

2.) <script type="text/javascript" src="http://www.xxx.de/slideshow.js"></script>

Dort liegt das Javascript.

Und 3.) /* SLIDESHOW */
#slideshow {
height:100px; /* hier Hoehe der Slideshow-Bilder angeben */
position:relative;
}
#slideshow img {
display:none;
position:absolute;
top:0; left:0;
}
#slideshow img.start {
display:block;
}

Alles schön und gut, nur wohin damit ???

Hier noch der Link zu der Seite, wo all dies steht:
DOM-Scripting-Slideshow die Netzspielwiese

Das klingt alles ganz einfach - wenn man es weiss.

Ist denn ein Crack hier der mir da helfen könnte ?

Ich grüße die Gemeinde
Axel

-----------------------------------------------------------------------------------
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Ohne_Titel_1</title>
</head>

<body>

</body>

</html>
 
Wenn ich Dich richtig verstehe, weißt Du nur nicht, wohin mit Punkt 3.

Das ist CSS. Sowas legt man idealerweise in einem externen Stylesheet ab, wo dann nur das drinsteht, was Du da an Code hast.
Eingebunden wird das Stylesheet dann über das <link>-Tag im Header:

Code:
<link rel="stylesheet" type="text/css" href="irgendwas.css">
 
Okay, also den Text der CSS Befehle, beginnend mit /*SLIDESHOW*/ und endend mit der Klammer unten als .css Datei abspeichern.
Findet der Befehl in deinem Code die Datei auf dem Server automatisch ?
Und wo müssen Punkt 1 und 3 eingabaut werden ? Einfach im body ?
 
Also ich hab's mal so gemacht, den CSS-Text in der Datei "slideshow.css" auf dem Server gespeichert und die anderen Zeilen im body angelegt.
Wenn ich die Webseite aufrufe, passiert nichts.
Ich hänge mal den Quellcode der Seite an (stört euch nicht an den vielen Tabellen, ich muss auf der Seite viele davon anlegen).

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Emscherwetter</title>
<style type="text/css">
.style1 {
color: #FFBFBF;
}
.style2 {
text-align: left;
}
.style3 {
text-align: center;
}
.style4 {
font-family: Arial, Helvetica, Sans-Serif;
font-size: small;
text-decoration: underline;
}
.style5 {
text-align: center;
border: 1px solid #000000;
}
</style>
<link rel="stylesheet" type="text/css" href="slideshow.css">
</head>

<body>

<table align="center" style="width: 1000px">
<tr>

<td>
<table style="width: 100%">
<tr>
<td colspan="8" style="width: 1000px; height: 101px">
<img alt="" height="100" src="bilder/Banner.jpg" width="1000" /></td>
</tr>
<tr>
<td colspan="8" style="width: 1000px; height: 5px">
<hr class="style1" noshade="noshade" style="width: 995px; height: 2px" />

</td>
</tr>
<tr>
<td class="style2" rowspan="6" style="width: 160px" valign="top">
&nbsp;</td>
<td class="style3" colspan="7" style="width: 840px"><strong>
<span class="style4">Webcamfilm der letzten 24 Stunden</span></strong></td>
</tr>

<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>

<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="style5" colspan="3" rowspan="4" style="width: 400px; height: 320px">

<div id="slideshow">
<img class="start" src="www.emscherwetter.de/bilder/webcam/cam1.jpg" />
</div>
<script type="text/javascript" src="http://www.emscherwetter.de/slideshow.js"></script>



&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>

</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>

<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>

</body>

</html>
 
Findet der Befehl in deinem Code die Datei auf dem Server automatisch ?
Das ist ein Tag, kein Befehl. Befehle gibts nur in Programmiersprachen, CSS ist keine.
Automatisch findet das Tag das Stylesheet natürlich nicht. Dafür wird ja im Attribut "href" die URL angegeben, wo das Stylesheet steht.

Und wo müssen Punkt 1 und 3 eingabaut werden ? Einfach im body ?
1 kommt an der Stelle in den HTML-Code, wo das Element platziert werden soll, 2 üblicherweise in den Header.
 
Zurück
Oben