Forum - Bannerrotation - Bannerrouting - Bannervorlagen

<!--Nur wenn JQuery nicht vorhanden ist, die kommentierenden Zeichen am Anfang und am Ende (Zeile 2) löschen-->
<!--<script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>-->
 
<script LANGUAGE="JavaScript">
$(document).ready(function(){
var num = 0;  //Bestimmt das Startbanner
 
Banner = new Array(num);
Banner[0] = '<a title="Das Forum für Hilfe, Tricks & Tipps" href="https://www.hilfe-tricks-tipps.de/forum.php" target="_blank" rel="noopener noreferrer"><img src="https://addpics.com/files/6v-49-21f0.jpg" border=0 alt="Das Forum für Hilfe, Tricks & Tipps"></a><br>';
Banner[1] = '<a title="Das Forum-Portal für Hilfe, Tricks & Tipps" href="https://www.hilfe-tricks-tipps.de/" target="_blank" rel="noopener noreferrer"><img src="https://addpics.com/files/6v-47-549b.jpg" border=0 alt="Das Forum für Hilfe, Tricks & Tipps"></a><br>';
Banner[2] = '<a title="Das Forum-Talk für Hilfe, Tricks & Tipps" href="https://www.hilfe-tricks-tipps.de/treetalk.php" target="_blank" rel="noopener noreferrer"><img src="https://addpics.com/files/6v-48-f0fe.jpg" border=0 alt="Das Forum für Hilfe, Tricks & Tipps"></a><br>';
// Banner[3] = 'Banner4';  //Variable muss bei weiteren Bannern um jeweils 1 erhöht werden!
 
var num = new Date().getSeconds()%3;   //Variable muss bei weiteren Bannern um jeweils 1 erhöht werden!
document.getElementById('Bannerw').innerHTML = Banner[num];
});
 
</script>
 
<div id="Bannerw"></div>
 

<!--Nur wenn JQuery nicht vorhanden ist, die kommentierenden Zeichen am Anfang und am Ende (Zeile 2) löschen-->
<!--<script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>-->
 
<script type="text/javascript">
var image = new Array();
var link = new Array();
var text = new Array();
var a = 0;
 
image[a] = 'https://files.homepagemodules.de/b624252/a_305_49756b2c.png';
link[a] = 'https://www.frape-fotoforum.de';
text[a] = 'Frape`s Fotokiste';
a++;
 
image[a] = 'https://files.homepagemodules.de/b135428/f277t73545p514032n62_XJtOKQqd.gif';
link[a] = 'https://www.freizeit-stuebchen.de';
text[a] = 'Das Freizeit Stübchen';
a++;
 
image[a] = 'https://files.homepagemodules.de/b104774/f46t1197p2706n101_GnWCrTcu.png';
link[a] = 'https://www.dampferzuflucht.de';
text[a] = 'Das Dampfer Forum rund um die E Zigarette';
a++;
 
var targetchoice="_blank";
var relchoice="noopener noreferrer";
var num = (image.length);
var zaehler = -1;
 
 
function anzeige() {
zaehler++;
if (!image[zaehler] || !link[zaehler]) zaehler = 0;
if (zaehler < num) {
document.getElementById('banner').src = image[zaehler];
document.getElementById('url').href = link[zaehler];
document.getElementById('url').target = targetchoice;
document.getElementById('url').rel = relchoice;
document.getElementById('beschreibung').innerHTML = text[zaehler];
setTimeout ("anzeige()", 7000);
}
}
 
$(document).ready(function(){
window.onload = anzeige();
});
</script>
 
<center>
<a id="url" href="javascript:void(0)"><img id="banner" style="height:70px !important;border:0;"></a>
<br>
<div id="beschreibung" style="text-align:center;color:#000000;font-size:13px;background-color:#6fbbdf; padding:3px 10px 3px 10px;border-radius:3px;border:1px solid #222222;line-height:3px;display:inline;"></div>
</center>
 

<style>
.awsome-text-container {
  color:#ffffff;
  width:0;
  height :0;
  overflow:hidden;
  margin:0 auto;
  position:relative;
  z-index: 2;
  font-size: 45px;  
  font-weight: bold;
  animation: dd 5.1s 2s ;
}
@media all and (max-device-width: 767px){
.awsome-text-container {font-size: 4vw;}
}
.image-container {
  margin: auto;
  display: flex;
}
.text-container {
  font-size: 16px;
  color: rgb(255, 255, 255);
  text-align: center;
  margin: auto;
  text-shadow: rgba(0, 0, 0, 0.8) 1px 1px 1px;
}
#container {
  padding:0;
  font-size:14px !important;
  color:#FFCC00;
  margin:auto;
  display: flex;
  align-items: center;
  background-color:rgba(0,0,0,0.8);
  border-radius:85px;
  width:auto;
  border:solid 5px #282828;
  box-shadow: 0px 0px 50px black;
  animation: alert 5.6s 1.4s ;
}
#container a {
  padding-right:5px;
  text-decoration: underline;
  color:#FFCC00; 
  width:85px;
}
.sfera {
  display: flex;
  margin-rigth: auto;
  justify-content: center;
  align-items: center;
  aspect-ratio:1;
  border-radius:50%;
  height:100px;
  width: 100px;
  background-color:  #5411a1;  
  animation: spinn 1.5s;
}
.sfera2 {
  display: flex;
  border-radius:50%;
  cursor:pointer;
  justify-content: center;
  align-items: center;
  width: 80%;
  aspect-ratio:1;
  background-color:rgba(100,65,165,0.5);
}
.sfera2 p {
  margin:auto;
}
.start-txt {
  font-size:14px !important;
  color: #dddddd;
  font-weight:bold;
  font-family:arial;
}
 
@keyframes alert {
  0% {width:195px;}
  25% {width:800px;}
  90% {width:800px;}
  100%{width:195px;}
}
@keyframes spinn {
  100%{transform: rotate(360deg);}
}
@keyframes dd {
  5%{width:75%;}
  30%{height :1.3em;width:75%;}
  70%{height :1.3em;width:75%;}
  82%{width:75%;}
  95%{height :0;width:0;}
}
</style>
 

<div class="text-container">
  <div class="image-container">
    <div id="container">
      <div class="sfera">
        <div class="sfera2" onclick="location.reload()">
          <p class="start-txt">Der Treffpunkt</p>
        </div> 
      </div>
      <div class="awsome-text-container">
        <span id="username-container"></span>
        für Hilfe, Tricks & Tipps!
      </div>
   <a href="https://www.hilfe-tricks-tipps.de" target="_blank">Mehr <br>erfahren</a>
   </div>
  </div>
</div>