diedVIPs

html knowhow

Bildershows einbauen









Mit dem Befehl "#vier" beschreiben Sie den Rand sowie die runden Ecken des Bildes. da es sinnvoll ist, das Bild in einen <table> einzubinden, können Sie einmal die Größe bestimmen und den Rand zur Umgebung. Da Ihr Originalbild in der Regel eine andere Größe hat, wie Sie es in der Webseite darstellen wollen, packen Sie es in <div> ... </div>.



Frame mit festgesetzter Größe und Scrolleiste

Mit dem hier unten abgebildeten Frame binden Sie einen fremden Bewertungsframe auf Ihre Seite ein. Was Sie da sehen, ist meiner. Sie können sich eine eigene Bewertungsseite anlegen unter: webwiki.de.

Probieren Sie es aus und bewerten Sie uns.

Quellcode So sieht´s aus
<html>
<style type="text/css">
#vier {border: 1px solid grey; border-radius: 5px;box-shadow: 5px 5px 5px white inset, 5px 5px 5px black;}
.auto-style84 {background-color: #D5FDA8;}
</style>
</html>

<body>
<table id="vier" frame=box cellspacing="20" cellpadding="0" class="auto-style11" style="width: auto; height: auto; float: right;" align="right"><a href="http://meinsolargarten.de"></a>
<tr style="width: auto;border-width:2px;border-color:aqua; ">
<td class="auto-style189" valign="top" style="height: 82px">
<div class="w3-content w3-section" style="max-width:auto">
<a href="http://meinsolargarten.de"></a><img class="mySlides" src="bilder/slide/Erdbeeren.jpg" style="width:100%" />
<img class="mySlides" src="bilder/slide/Dahlien.jpg" style="width:100%" />
<img class="mySlides" src="bilder/slide/Peterle.jpg" style="width:100%" />
<img class="mySlides" src="bilder/slide/Fresien.jpg" style="width:100%" />
<img class="mySlides" src="bilder/slide/Pflaumen.jpg" style="width:100%" />
<img class="mySlides" src="bilder/slide/Tomaten.jpg" style="width:100%" />
<img class="mySlides" src="bilder/slide/Malven.jpg" style="width:100%" />
<img class="mySlides" src="bilder/slide/Sellerie.jpg" style="width:100%" />

</div>
<script>
var myIndex = 0;
carousel();

function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script></td></tr></table>


</body>






Frame mit festgesetzter Größe und Scrolleiste

Mit dem hier unten abgebildeten Frame binden Sie einen fremden Bewertungsframe auf Ihre Seite ein. Was Sie da sehen, ist meiner. Sie können sich eine eigene Bewertungsseite anlegen unter: webwiki.de.

Probieren Sie es aus und bewerten Sie uns.

Quellcode So sieht´s aus
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
NewImg = new Array (
"Bilder/Slide/S-Mohn.jpg",
"Bilder/Slide/S-Erikaweg.jpg",
"Bilder/Slide/S-Bergsee.jpg",
"Bilder/Slide/S-Berghuette.jpg"
);
var ImgNum = 0;
var ImgLength = NewImg.length - 1;
//Time delay between Slides in milliseconds
var delay = 3000;
var lock = false;
var run;
function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;}
if (ImgNum < 0) {ImgNum = ImgLength;}
document.slideshow.src = NewImg[ImgNum];}}
function auto() {
if (lock == true) {lock = false; window.clearInterval(run);}
else if (lock == false) {lock = true;run = setInterval("chgImg(1)", delay);}}
// End --></script>

<style type="text/css">
hier nichts
</style>
</head>

<body>
<p align="center"><img src="Bilder/Slide/S-Mohn.jpg" name="slideshow" width="60%" height="auto">
<div align="center">
<center><table width="370"><tr>
<td width="140" align="center"><a href="javascript:chgImg(-1)"><img src="Bilder/Pfeillinks.png"></a></td>
<td width="123" align="center"><a href="javascript:auto()"><img src="Bilder/Pfeilunten.png"></a></td>
<td width="87" align="center"><a href="javascript:chgImg(1)"><img src="Bilder/Pfeilrechts.png"></a></td></tr>
</table></center></div>

</body>
</html>


Download Button   Laden Sie den Pfeil runter  


Frame mit festgesetzter Größe und Scrolleiste

Mit dem hier unten abgebildeten Frame binden Sie einen fremden Bewertungsframe auf Ihre Seite ein. Was Sie da sehen, ist meiner. Sie können sich eine eigene Bewertungsseite anlegen unter: webwiki.de.

Probieren Sie es aus und bewerten Sie uns.

Quellcode So sieht´s aus
<html>
<head>
<link rel="stylesheet" media="screen" type="text/css" href="Scripte/css/layout.css" />
<link rel="stylesheet" media="screen" type="text/css" href="Scripte/css/spacegallery.css" />
<link rel="stylesheet" media="screen" type="text/css" href="Scripte/css/custom.css" />
<script type="text/javascript" src="Scripte/js/jquery.js"></script>
<script type="text/javascript" src="Scripte/js/eye.js"></script>
<script type="text/javascript" src="Scripte/js/utils.js"></script>
<script type="text/javascript" src="Scripte/js/spacegallery.js"></script>
<script type="text/javascript" src="Scripte/js/layout.js"></script>

<style type="text/css">
Hier nichts
</style>
</head>

<body>
<div id="myGallery" class="spacegallery">
<img src="Scripte/images/bw3.jpg" width="300" height="180" />
<img src="Scripte/images/lights3.jpg" width="300" height="180" />
<img src="Scripte/images/bw2.jpg" width="300" height="180" />
<img src="Scripte/images/lights2.jpg" width="300" height="180" />
<img src="Scripte/images/bw1.jpg" width="300" height="180" /></div>
<ul class="navigationTabs"> <a></a>
</ul>

</body>
</html>


Download Button   Laden Sie die .zip-Datei runter  



Slideshow mit Zufallsgenerator

Mit dem hier unten abgebildeten Frame binden Sie einen fremden Bewertungsframe auf Ihre Seite ein. Was Sie da sehen, ist meiner. Sie können sich eine eigene Bewertungsseite anlegen unter: webwiki.de.

Quellcode So sieht´s aus
<html>
<head>
<link rel="stylesheet" media="screen" type="text/css" href="Scripte/css/layout.css" />
<link rel="stylesheet" media="screen" type="text/css" href="Scripte/css/spacegallery.css" />
<link rel="stylesheet" media="screen" type="text/css" href="Scripte/css/custom.css" />
<script type="text/javascript" src="Scripte/js/jquery.js"></script>
<script type="text/javascript" src="Scripte/js/eye.js"></script>
<script type="text/javascript" src="Scripte/js/utils.js"></script>
<script type="text/javascript" src="Scripte/js/spacegallery.js"></script>
<script type="text/javascript" src="Scripte/js/layout.js"></script>

<style type="text/css">
Hier nichts
</style>
</head>

<body>
<div id="myGallery" class="spacegallery">
<img src="Scripte/images/bw3.jpg" width="300" height="180" />
<img src="Scripte/images/lights3.jpg" width="300" height="180" />
<img src="Scripte/images/bw2.jpg" width="300" height="180" />
<img src="Scripte/images/lights2.jpg" width="300" height="180" />
<img src="Scripte/images/bw1.jpg" width="300" height="180" /></div>
<ul class="navigationTabs"> <a></a>
</ul>

</body>
</html>



Download Button   Laden Sie die .zip-Datei runter  



Frame mit festgesetzter Größe und Scrolleiste

Mit dem hier unten abgebildeten Frame binden Sie einen fremden Bewertungsframe auf Ihre Seite ein. Was Sie da sehen, ist meiner. Sie können sich eine eigene Bewertungsseite anlegen unter: webwiki.de.

Probieren Sie es aus und bewerten Sie uns.

Quellcode So sieht´s aus
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
NewImg = new Array (
"Bilder/Slide/S-Mohn.jpg",
"Bilder/Slide/S-Erikaweg.jpg",
"Bilder/Slide/S-Bergsee.jpg",
"Bilder/Slide/S-Berghuette.jpg"
);
var ImgNum = 0;
var ImgLength = NewImg.length - 1;
//Time delay between Slides in milliseconds
var delay = 3000;
var lock = false;
var run;
function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;}
if (ImgNum < 0) {ImgNum = ImgLength;}
document.slideshow.src = NewImg[ImgNum];}}
function auto() {
if (lock == true) {lock = false; window.clearInterval(run);}
else if (lock == false) {lock = true;run = setInterval("chgImg(1)", delay);}}
// End --></script>

<style type="text/css">
hier nichts
</style>
</head>

<body>
<p align="center"><img src="Bilder/Slide/S-Mohn.jpg" name="slideshow" width="60%" height="auto">
<div align="center">
<center><table width="370"><tr>
<td width="140" align="center"><a href="javascript:chgImg(-1)"><img src="Bilder/Pfeillinks.png"></a></td>
<td width="123" align="center"><a href="javascript:auto()"><img src="Bilder/Pfeilunten.png"></a></td>
<td width="87" align="center"><a href="javascript:chgImg(1)"><img src="Bilder/Pfeilrechts.png"></a></td></tr>
</table></center></div>

</body>
</html>












Kontakt    Datenschutz   Impressum