Forum - Xobor Adventskalender & Osterkalender mit Auslösegrafik für alle Templates

<style>
/* Position und Größe der Auslöse-Grafik (Startseite) */
#hover_img {position:fixed; left:-3px; top:350px; width: 90px; z-index: 999999;}
 
.mainContainerDiv {
/* Bilder in den Kalendertüren zentrieren */
  text-align:center !important; 
  background-size:cover; 
  position:relative; 
  bottom:10px;
/* Neues Hintergrundbild Kalender */
/* background-image:url(//files.homepagemodules.de/b104774/a_489_06de1da5.jpg) !important; */
}
 
/* Türrand verkleinert */
.cal_door {color:#ffffff !important;
  display:inline-block; 
  padding:10px !important;
  background-color:#580003 !important;
  text-align:left;
}
 
/* Tür Hover-Effekt */
.cal_door:hover {
  -webkit-filter: brightness(0.8); filter: brightness(0.8);
}
 
/* Türbilder & Türvideos - Maximale Größe */
.cal_door iframe,  .cal_door img  {
  padding:0px;
  max-width:100%;
  max-height:100%; 
  object-fit: contain;
  object-position: center top;
}
#colorbox iframe {
  min-height:500px;
}
 
/* Türnummern deutlicher hervorheben */
.openedNumber {
  position:absolute;
  padding:1px 2px !important;
  margin:0 !important;
  background:#580003 !important;
  border-radius:5px;
  border:3px solid #880003;
  font-size:15px !important;
}
 
/* Wenn ein Fenster zu früh geöffnet wird - Style für Hinweis */
#colorbox div {
  padding: 0px !important;
  margin:0px !important;
}
#cboxLoadedContent div {
  padding:3px 10px !important;
  margin-right:30px !important;
  background-color:#590004 !important;
  border-radius:4px !important;
  color:#ffffff !important; 
  white-space:nowrap; 
  cursor:default !important;
} 
</style>
 
<script>
//  Animation der Auslösegrafik beim "Mouseover"!
//  0 = keine Auslösegrafik 
//  1 = ohne Animation
//  2 = Grafik vergrößert sich 
//  3 = Grafik versteckt sich am linken Rand
//  4 = Grafik wird transparent angezeigt
 
var Kalender_Animation = "2"
 
window.addEventListener('load', function(){
 
if($('.mainContainerDiv').length){
  // Auslösegrafik auf der Kalenderseite ausblenden
  $('#hover_img').hide(); 
  // Kalenderbreite
  $('.page_pages .spacer20').css({'margin':'auto','width':'80vw'});
  // Hintergrundfarbe Kalender
  /* $('body, .content').attr('style','background: #670402 !important;'); */
  // Schriftfarbe Kalender
  $('h2').css({'color':'#ffffff','margin':'20px','font-size':'20px'});
};
 
if (Kalender_Animation == 0) {
$('#hover_img').css('display','none');
};
 
if (Kalender_Animation == 1) {
};
 
if (Kalender_Animation == 2) {
$('#hover_img').hover(function() {
 
$(this).animate({width:'160px',top:'300px'},700);
}, function() {
$(this).animate({top:'350px',width:'90px'},300);
});
};
 
if (Kalender_Animation == 3) {
$('#hover_img').css('width','130px').css('left','-105px').hover(function() {
$(this).animate({left:'-3px',top:'300px'},600);
}, function() {
$(this).animate({top:'350px',left:'-105px'},1000);
});
};
 
if (Kalender_Animation == 4) {
$('#hover_img').css('opacity','0.25').hover(function() {
$(this).animate({opacity:'1.0',width:'160px','top':'300px'},300);
}, function() {
$(this).animate({width:'90px',opacity:'0.25','top':'350px'},500);
});
};
 
});
</script>
 
<a href="/xobor_adventskalender.html"><img id="hover_img" src="https://files.homepagemodules.de/b104774/f46t1197p2706n127_FUVHTIYJ.gif"></a>