Forum - Infobox mit CSS - Wie kann ich das realisieren?

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Das neue Template Xobor (v6) � Infobox mit CSS - Wie kann ich das realisieren?

Seite 1 von 2 � Seite 1 2 Seite �

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 10, 8.1, 8 und 7 - Fragen & Antworten �rger mit Ihrem PC? �rger mit dem PC - Vorbeugung und Hilfe �rger mit dem PC - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | Infobox mit CSS - Wie kann ich das realisieren? datum

29.01.2008 17:17 (zuletzt bearbeitet: 12.05.2017 20:30)

Hallo Wolfgang

habe bei meinem Kollegen im Forum etwas gesehen, was ich saustark finde, nämlich die Infobox.
Das möchte ich jetzt bei mir im Schloss machen, damit ich das Kalenderblatt des WDS Verlages (Du weißt schon) so in den Header bringen könnte und auch noch einige andere Dinge. Einfach so ein paar Boxen nebeneinander. Damit die sich öffnen, wenn man mit der Maus draufgeht. Weißt Du wie man sowas macht?
Gruss

Gabi

Meine Foren:

  • Garten der Poesie
  • Traumwelt
  • Gedichte aus dem Musengarten

Antworten

#2 | Infobox oder Spoiler mit CSS realisieren? datum

02.02.2008 11:56 (zuletzt bearbeitet: 09.11.2021 18:34)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3314
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1246

Infobox oder Spoiler mit CSS realisieren?
Aktualisiert 12.05.17

Hallo Gabriela,
bei diesen Infoboxen ist daran zu denken, dass sie einen festen Abstand zum Bildrand haben.
Die Platzierung der Toolboxen muss einsprechend angepasst werden und wird jeweils über die Werte von "left:..px" und "top:..px" eingestellt.
Das kommt zum Tragen, wenn sie in die Webseite eingebaut werden oder die Fenstergrößen verändert wird.
Diese Infoboxen können sich über Schriften oder Bilder legen. Hier muss im Einzelfall darauf geachtet werden, wo sie platziert werden. Entsprechend kann es notwendig werden, dass andere Elemente versetzt werden müssen!
Werden die Infoboxen im unteren Teil der Webseite eingebaut, muss genug Platz für das Aufklappen geschaffen werden!
Mit dieser Version können mehrere Toolboxen zu Einsatz kommen.

Diese ähneln den Tooltipps, die dynamisch dem Mauszeiger folgen können.

• Will man nur eine Infobox haben, entfallen die Einträge für "box2".
• Die Farb- und Pixelwerte können gegebenfalls angepasst werden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
<style type="text/css">
 
#box {
position:absolute;
z-index:100;
top:50px; /* Box1: Abstand zum oberen Bildrand */
left:50px; /* Box1: Abstand zum linken Bildrand */
}
 
#box2 {
position:absolute;
z-index:99;
top:50px;  /* Box2: Abstand zum oberen Bildrand */
left:200px; /* Box2: Abstand zum linken Bildrand */
}
 
#box a, #box2 a{
display:block;
text-decoration:none;
color:#FFFFFF; /* Schriftfarbe */
background:#0000AA; /* Hintergrundfarbe der Schrift */
font:bold 16px Comic Sans MS; /* Schrift - Dicke Größe Art */ 
border:1px solid #000000; /* Schriftrahmen - Dicke, Form, Farbe */
padding:5px; /* Abstand der Schrift zum Rahmen */
padding-left:10px;
padding-right:10px;
padding-bottom:5px;
width: auto;
}
 
#box a:hover, #box2 a:hover {
/* Sollen sich die Farben der Infobox beim Mouseover nicht ändern, entfallen die folgenden 3 Positionen */
color:#FFFFFF; /* Änderung der Schriftfarbe beim Mouseover */
background:#5555DD; /* Änderung der Hintergrundfarbe beim Mouseover */
width:400px; /* Breite der Infobox */
}
 
#box a span, #box2 a span{
display:none;
}
 
#box a:hover span, #box2 a:hover span {
display:block;
color:black;
background:#FFFFFF; /* Hintergrundfarbe der Info-Box */
font:normal 16px Arial; /*Schrift der Infobox - dicke, Größe, Art */
border:1px solid #000000; /*Rahmen der Infobox - Dicke, Form, Farbe */
padding:5px; /* Schriftabstand zum Rahmen der Infobox*/
padding-left:2px;
padding-right:2px;
padding-bottom:2px;
cursor: pointer; /* Mauszeiger */
text-align:center;
}
</style>
 
<span id="box"><a href="#">INFOBOX 1<span>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span></a></span> 
 
<span id="box2"><a href="#">INFOBOX 2<span>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span></a></span>
 

Schlie�en

Infos über Tooltipps: Tooltipps

Bis dann und viel Erfolg

Wolfgang

Antworten

#3 | Infobox oder Spoiler mit CSS realisieren: Einbau mehrerer Links! datum

02.05.2011 12:03 (zuletzt bearbeitet: 24.06.2019 20:08)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3314
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1246

Einbau mehrerer Links in die statische Infobox!
Aktualisiert 23.06.19

Hat man sich für die statische Infobox entschieden und will mehrere Links einbauen, funktioniert das gut über den Befehl "onclick" in Verbindung mit "<span>". Notwendig wird auch ein zusätzlicher Eintrag für den Mauszeiger, um eine Mausänderung beim Überfahren der Links zu bewirken. Die Verwendung von Tooltipps sind ebenfalls möglich.

  • Einbau mehrerer Links sind möglich!
  • Einbau von Laufschriften (z.B. marquee) möglich!
  • Abstand der der Bilder über <br> einstellbar!
  • Einbau von Tooltipps!
  • Der Mauszeiger kann jetzt sein Aussehen in den Boxen verändern!
  • Neu! Läuft jetzt auch in "Opera" und "Google Chrome"!

Die Box mit einem Bild als Auslösung:

1
2
3
4
5
6
7
 
<span id="box"><a title="Hier geht es zur Bildergalerie" href="https://www.hilfe-tricks-tipps.de/gallery.php">Bildergalerie<span style="cursor: default;">
 
<span title="Bildergalerie - Berühmte Hotels" onClick="parent.location='https://www.hilfe-tricks-tipps.de/g9-Hotels.html';">
<img src="https://files.homepagemodules.de/b104774/pictures_u149_thumb_9de116.jpg"></img>
</span>
 
</span></a></span>
 

Die Box mit einem Text als Auslösung:

1
2
3
4
5
6
7
 
<span id="box"><a title="Hier geht es zur Bildergalerie" href="https://www.hilfe-tricks-tipps.de/">Bildergalerie<span style="cursor: default;">
 
<span title="Bildergalerie - Berühmte Hotels" onClick="parent.location='https://www.hilfe-tricks-tipps.de/g9-Hotels.html';">
Bildergalerie - Berühmte Hotels
</span>
 
</span></a></span>
 

Das Script in seiner Funktion:

Laufschriftboxen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<style type="text/css">
#box {
position:absolute;
z-index:100;
top:190px; /* Box1: Abstand zum oberen Bildrand */
left:10px; /* Box1: Abstand zum linken Bildrand */
}
 
#box2 {
position:absolute;
z-index:99;
top:240px;  /* Box2: Abstand zum oberen Bildrand */
left:10px; /* Box2: Abstand zum linken Bildrand */
}
 
#box3 {
position:absolute;
z-index:98;
top:290px;  /* Box2: Abstand zum oberen Bildrand */
left:10px; /* Box2: Abstand zum linken Bildrand */
}
 
#box a, #box2 a, #box3 a{
display:block;
text-decoration:none;
color:#FFFFFF; /* Schriftfarbe */
background-color:#0000AA; /* Hintergrundfarbe der Schrift */
font:bold 18px Comic Sans MS; /* Schrift - Dicke Größe Art */
padding-top:5px; /* Abstand der Schrift zum Rahmen */
padding-left:10px;
padding-right:10px;
padding-bottom:5px;
border:1px solid #000000; /* Schriftrahmen - Dicke, Form, Farbe */
width: auto;
}
 
#box a:hover, #box2 a:hover, #box3 a:hover {
display:block;
/* Sollen sich die Farben der Infobox beim Mouseover nicht ändern, entfallen die folgenden 3 Positionen */
color:#FFFFFF; /* Änderung der Schriftfarbe beim Mouseover */
background-color:#5555DD; /* Änderung der Hintergrundfarbe beim Mouseover */
width:500px; /* Breite der Infobox */
}
 
#box a span, #box2 a span, #box3 a span{
display:none;
}
 
#box a:hover span, #box2 a:hover span, #box3 a:hover span {
display:block;
color:black;
background-color:#FFFFFF; /* Hintergrundfarbe der Info-Box */
font:normal 16px Arial; /*Schrift der Infobox - dicke, Größe, Art */
border:1px solid #000000; /*Rahmen der Infobox - Dicke, Form, Farbe */
padding-top:5px; /* Schriftabstand zum Rahmen der Infobox */
padding-left:2px;
padding-right:2px;
padding-bottom:2px;
cursor: pointer; /* Mauszeiger */
text-align:center;
}
 
marquee{
background-color:#3333FF;
border-top:1px solid #000000;
border-bottom:1px solid #000000;
padding-right:1px;
padding-left:1px;
height:95%;
width:95%;
}
</style>
 

<title>Laufschrift-Boxen untereinander darstellen</title>
</head>
 
<body vlink="#ffffff" link="#ffffff" alink:"#ffffff" bgcolor="#000047" background="https://files.homepagemodules.de/b104774/pictures_u149_9de116.jpg">
 
<div style="color:#FFFF00;"> <br><br>
        <b>Zurück zum Forum:</b> <a href="https://www.hilfe-tricks-tipps.de/">https://www.hilfe-tricks-tipps.de</a><br><br><br>
        <b>Zurück zum Beitrag:</b> <a href="https://www.hilfe-tricks-tipps.de/t173f30-Statische-Infobox-mit-CSS-Wie-kann-ich-das-realisieren.html#msg1095">Einbau mehrerer Links in die statische Infobox!</a></div>
 
<span id="box"><a title="Hier geht es zur Bildergalerie" href="https://www.hilfe-tricks-tipps.de/gallery.php">Bildergalerie<span style="cursor: default;">
<b><u><font face="Comic Sans MS" color="#000080" size="4">Herzlich Willkommen in der Bildergallerie!</font></u></b>
 
<br><br>
 
<span title="Eine Mail an Wolfgang Andres schreiben" onClick="parent.location='https://www.hilfe-tricks-tipps.de/private_new.php?option=write&to_user=Wolfgang';"><font face="Comic Sans MS" color="#000080" size="3"><b><u>Ideen und Feedback bitte per PM an Wolfgang</u></b></font></span><br><br>
 
<span title="Hier geht es zur Forumübersicht" onClick="parent.location='https://www.hilfe-tricks-tipps.de';"><font face="Comic Sans MS" color="#000080" size="3"><b><u>Hier geht es zur Forumübersicht für Hilfe, Tricks & Tipps</u></b></font></span><br><br>
 
<span title="Bildergalerie - Berühmte Hotels" onClick="parent.location='https://www.hilfe-tricks-tipps.de/g11p153-burj-al-arab-dubai-uae-x.html';"><img src="https://files.homepagemodules.de/b104774/pictures_u153_thumb_f873a8.jpg"></img></span>
 
</span>
</a>
</span>
 
<!-- box2 -->
<span id="box2"><a title="Laufschrift stoppt beim Verlassen der Titelleiste" href="#">Berühmte Hotels<span style="cursor: default;">
<br>
 
<marquee direction="up" scrollamount="2" onmouseover="this.stop();" onmouseout="this.start();" scrolldelay="10"><font bgcolor="#3333FF"><br>
 
<span title="Bildergalerie - Berühmte Hotels" onClick="parent.location='https://www.hilfe-tricks-tipps.de/g9-Hotels.html';"><img src="https://files.homepagemodules.de/b104774/pictures_u149_thumb_9de116.jpg"></img></span>
 
<br>
 
<span style="padding:10px;" title="Bildergalerie - Berühmte Hotels" onClick="parent.location='https://www.hilfe-tricks-tipps.de/g11-Hotel-Burj-al-Arab-in-Dubai.html';"><font face="Comic Sans MS" color="#000080" size="3"><u><b>Das Hotel Bury Al Arab</b></u></font></span>
 
<br>
 
<span title="Bildergalerie - Berühmte Hotels" onClick="parent.location='https://www.hilfe-tricks-tipps.de/g11p153-burj-al-arab-dubai-uae-x.html';"><img src="https://files.homepagemodules.de/b104774/pictures_u153_thumb_f873a8.jpg"></img></span>
 
<br><br>
 
</font>
<br><br>
</marquee>
 
</span>
</a>
</span>
 
<!-- box3 -->
<span id="box3"><a title="Laufschrift stoppt beim Verlassen der Titelleiste" href="#">Hintergrundbilder<span style="cursor: default;">
<br>
 
<marquee direction="up" scrollamount="2" onmouseover="this.stop();" onmouseout="this.start();" scrolldelay="10"><font bgcolor="#3333FF"><br>
 
<span title="Bildergalerie - Hintergrundbilder" onClick="parent.location='https://www.hilfe-tricks-tipps.de/g2-Hintergrundbilder.html';"><img src="https://files.homepagemodules.de/b104774/pictures_u95_thumb_8a618a.jpg"></img></span>
 
<br>
 
<span style="padding:10px;" title="Hintergrundbilder - Windows 7" onClick="parent.location='https://www.hilfe-tricks-tipps.de/g21p92-Windows.html';"><font face="Comic Sans MS" color="#000080" size="3"><b><u>Hintergrundbilder - Windows 7</u></b></font></span>
 
<br>
 
<span title="Bildergalerie - Hintergrundbilder" onClick="parent.location='https://files.homepagemodules.de/b104774/pictures_u111_26ed6f.jpg';"><img src="https://files.homepagemodules.de/b104774/pictures_u111_thumb_26ed6f.jpg"></img></span>
 
<br><br>
</font>
<br><br>
</marquee>
 
</span>
</a>
</span>
 
</body>
</html>
 
 

Schlie�en

Weitere interessante Links:

• Tooltipps
• Marquee - Laufschrift für alle Richtungen

Bis dann und viel Erfolg

Wolfgang

Antworten

#4 | XXL: Animierte Mouseover-Boxen ohne JavaScript - Teil 1+2 datum

05.06.2021 07:48 (zuletzt bearbeitet: 13.06.2021 00:18)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3314
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1246

XXL: Animierte Mouseover-Boxen ohne JavaScript - Teil 1

Was können die Mouseover-Boxen:

Das folgende Skript kommt ohne JavaScript aus. Es ist eine reine CSS-Lösung.
Die Boxen haben ein Hintergrundbild, das beim Mouseover mit einem Informationstext überdeckt wird!
Die Informationstexte laufen von unten nach oben animiert ein!
Im Beispiel sind 3 Boxen nebeneinander aufgebaut.
Wird der Platz zu eng, werden sie untereinander dargestellt!
Informationen und Anzahl der Boxen können beliebig gekürzt oder erweitert werden!
Die Boxe können mit "YouTube-Videos" oder Bildern gefüllt werden.
Die Infos sind als Aufzählung angeordnet!
Für lange Informationstexte, ist ein Scrollbalken eingebaut!
Am Schluss jeder Box steht noch eine Verlinkung zu den PN's.
Auf mobilen Endgeräten, braucht die Infobox zum öffnen nur angetippt zu werden!
Ein Antippen auf eine Leere Fläche, schließt die Box!

Installation

Schlie�en

In Zeile 2+10 kann die Größe der Boxen einstellen werden.
Es ist darauf zu achten, dass die Werte übereinstimmen (height + bottom)!
In Zeile 6-8 können Hintergrundbilder für jede Box bestimmt werden!
Über Zeile 10 ist die Animation mit "transition" realisiert.
Zusätzlich ist noch eine Einschaltverzögerung mit "transition-delay" eingebaut, um ein kurzes Aufblitzen der Boxen zu vermeiden!
In Zeile 11 kann die Größe der Bilder und Videos in den Boxen anpasst werden!
In den Zeilen 26-29, 44-47, 62-65 sind die Informationen per Aufzählung zu finden.
In Zeile 32,50 und 68 sind die Verlinkungen zu den PN's hinterlegt.
Text und Verlinkung können beliebig ausgetauscht und angepasst werden!
In Zeile 22+59 sind Bilder in den Boxen eingefügt, in Zeile 23+41 Videos.
Bilder und Videos können beliebig ausgetauscht oder gelöscht werden!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
<style>
.infobox {width:250px; height:400px; font-size: 14px; font-family: 'Arial'; background-color:#eeeeee; display:inline-block; overflow:hidden; box-shadow:0px 0px 5px 1px rgba(25, 25, 25, 0.3); margin:10px 5px; text-align:center; cursor:pointer;} 
 
.infobox li {text-align:left; line-height:30px; padding-right:30px; } 
 
.infobox1 {background: center / cover no-repeat url('https://files.homepagemodules.de/b104774/pictures_u456_FdCnaWfA.jpg');} 
.infobox2 {background: center / cover no-repeat url('https://files.homepagemodules.de/b104774/pictures_u490_lHFiQmUy.jpg');} 
.infobox3 {background: center / cover no-repeat url('https://files.homepagemodules.de/b104774/pictures_u491_soANLdST.jpg');} 
 
.boxtext  {height:400px; bottom:-400px; background-color:#eeeeee; overflow-y:auto; position:relative; -moz-transition:2.0s; -webkit-transition:2.0s; -o-transition:2.0s; transition:2.0s; -moz-transition-delay: 0.5s; -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; cursor:default;} 
.boxtext img, .boxtext iframe  {height:140px; width:190px;background-size: cover;background-repeat:no-repeat; background-position:center; } 
 
.infobox:hover .boxtext {bottom:0px;}
 
.infomail {text-align:left; padding: 10px 30px 30px 30px;}
</style>
 
<!-- Infobox 1 -->
<div class="infobox infobox1">
<div class="boxtext">
<h2>Überschrift zu Thema 1</h2>
<img src="https://files.homepagemodules.de/b104774/pictures_u456_FdCnaWfA.jpg">
<iframe src="https://www.youtube.com/embed/IHvIasgmtOc" frameborder="0" allowfullscreen></iframe>
 
<ul>
<li>Info 1</li>
<li>Info 2</li>
<li>Info 3</li>
<li>Info 4</li>
</ul>
 
<div class="infomail">Haben Sie noch eine Frage, dann erreichen Sie mich <a href="/private_new.php?sendto=1" target="_blank">hier</a>.</div>
 
</div>
</div>
 
<!-- Infobox 2 --> 
<div class="infobox infobox2">
<div class="boxtext">
<h2>Überschrift zu Thema 2</h2>
<iframe src="https://www.youtube.com/embed/BDitrYIkJF4" frameborder="0" allowfullscreen></iframe>
 
<ul>
<li>Info 1</li>
<li>Info 2</li>
<li>Info 3</li>
<li>Info 4</li>
</ul>
 
<div class="infomail">Haben Sie noch eine Frage, dann erreichen Sie mich <a href="/private_new.php?sendto=1" target="_blank">hier</a>.</div>
 
</div>
</div>
 
<!-- Infobox 3 --> 
<div class="infobox infobox3">
<div class="boxtext">
<h2>Überschrift zu Thema 3</h2>
<img src="https://files.homepagemodules.de/b104774/pictures_u491_soANLdST.jpg">
 
<ul>
<li>Info 1</li>
<li>Info 2</li>
<li>Info 3</li>
<li>Info 4</li>
</ul>
 
<div class="infomail">Haben Sie noch eine Frage, dann erreichen Sie mich <a href="/private_new.php?sendto=1" target="_blank">hier</a>.</div>
 
</div>
</div>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Die Mouseover-Boxen in Aktion: Mouseover-Boxen ohne JavaScript

Bis dann und viel Erfolg beim Einbau!
Und besten Dank an ichwersonst für den Vorschlag

844er, ichwersonst und Nara finden das Top!

Antworten

#5 | XXL: Animierte Mouseover-Boxen ohne JavaScript - Teil 1+2 datum

12.06.2021 23:57

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3314
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1246

XXL: Animierte Mouseover-Boxen mit JavaScript - Teil 2

Was ist hinzu gekommen:

Das folgende Skript hat alle Funktionen aus Teil 1!
Hinzu kommt eine freie Auswahl der Laufrichtung fürs Öffnens und Schließen der Boxen!
In einigen Fällen kann es besser aussehen die Informationen nicht von unter nach oben einlaufen zu lassen, sondern von rechts nach links oder auch diagonal!
Es stehen 7 weitere Laufrichtungen zur Verfügung.
Will man die Box schließen, ist es auf mobilen Endgeräten etwas schwierig eine freie Fläche zum Antippen zu finden!
Mit dem erweiterten Skript ist es möglich durch Antippen des Bildes die Box zu schließen!

Installation

In Grundstellung ist die Laufrichtung von unten nach oben und zurück eingestellt!
Auf mobilen Endgeräten reicht ein Antippen, um die Box zu öffnen und ein Antippen auf das Bild, um die Box zu schließen.
Es stehen 7 weitere Laufrichtungen zur Verfügung. Es müssen jeweils immer zwei Zeilen freigegeben werden, einmal fürs Öffnen und einmal fürs Schließen (z.B. Zeile 31 + 125)

Zum Testen oder als Info-Boxen kann das Skript im Template (v1-4) in die "Kopfzeile" und im Xobor (v6) + Mobil in "Eigene Kopfzeile" kopiert werden!
In den Zeilen 16, 19, 22, 25, 28, 31 +34 kann die Laufrichtung für das Öffnen und in Zeile 110, 113, 116, 119, 122, 125 + 128 für das Schließen bestimmt werden!
Um die gleiche Laufrichtung fürs Öffnen und Schließen beizubehalten, werden die gleichzahligen Laufrichtungen freigegeben!
Es ist auch möglich hier abzuweichen, aber nicht alle Kombinationen funktionieren ordnungsgemäß!
In Zeile 2+12 kann die Größe der Boxen einstellen werden.
Es ist darauf zu achten, dass die Werte übereinstimmen (height)!
In Zeile 6-8 können Hintergrundbilder für jede Box bestimmt werden!
Über Zeile 12 ist die Animation mit "transition" realisiert.
Zusätzlich ist noch eine Einschaltverzögerung mit "transition-delay" eingebaut, um ein kurzes Aufblitzen der Boxen zu vermeiden!
In Zeile 13 kann die Größe der Bilder und Videos in den Boxen anpasst werden!
In den Zeilen 45-48, 62-65, 79-82 sind die Informationen per Aufzählung zu finden.
In Zeile 51,68 und 85 sind die Verlinkungen zu den PN's hinterlegt.
Text und Verlinkung können beliebig ausgetauscht und angepasst werden!
In Zeile 41+76 sind Bilder in den Boxen eingefügt, in Zeile 42+59 Videos.
Bilder und Videos können beliebig ausgetauscht oder gelöscht werden!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
 
<style>
.infobox {max-width:250px;height:400px; font-size: 14px; font-family: 'Arial'; background-color:#eeeeee; display:inline-block; overflow:hidden; box-shadow:0px 0px 5px 1px rgba(25, 25, 25, 0.3); margin:10px 5px; text-align:center; cursor:pointer;} 
.infobox li {text-align:left; line-height:20px; padding-right:20px; } 
.infobox:hover .boxtext {bottom:0px;left:0px;top:auto;right:auto;}
 
.infobox1 {background: center / cover no-repeat url('https://files.homepagemodules.de/b104774/pictures_u456_FdCnaWfA.jpg');} 
.infobox2 {background: center / cover no-repeat url('https://files.homepagemodules.de/b104774/pictures_u490_lHFiQmUy.jpg');} 
.infobox3 {background: center / cover no-repeat url('https://files.homepagemodules.de/b104774/pictures_u491_soANLdST.jpg');} 
 
.infomail {text-align:left; padding: 10px 30px 30px 30px;}
 
.boxtext  {height:400px; bottom:-400px; left:0; background-color:#eeeeee; overflow-y:auto; position:relative; -moz-transition:2.0s; -webkit-transition:2.0s; -o-transition:2.0s; transition:1.5s; -moz-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; cursor:default;padding:15px;}
.boxtext img, .boxtext iframe {max-height:140px; max-width:190px;background-size: cover;background-repeat:no-repeat; background-position:center;} 
 
/** 1. Laufrichtung öffnen: Von Ecke rechts unten nach oben **/
/* .boxtext {top:400px;right:auto;bottom:auto;left:250px;} .infobox:hover .boxtext {top:0px;right:auto;bottom:auto;left:0px;} */
 
/** 2. Laufrichtung öffnen: Von rechts nach links **/
/* .boxtext {top: 0;right:auto;bottom:auto;left:250px;} .infobox:hover .boxtext {top:0px;right:auto;bottom:auto;left:0px;} */
 
/** 3. Laufrichtung öffnen: Von Ecke rechts oben nach unten **/
/* .boxtext {top:-400px;left:250px;bottom:auto;right:auto;} .infobox:hover .boxtext {top:0px;right:auto;bottom:auto;left:0px;} */
 
/** 4. Laufrichtung öffnen: Von oben nach unten **/
/* .boxtext {top:-400px;left:0;bottom:auto;right:auto;} .infobox:hover .boxtext {top:0px;right:auto;bottom:auto;left:0px;} */
 
/** 5. Laufrichtung öffnen: Von Ecke links oben nach unten **/
/* .boxtext {top:-400px;left:-250px;bottom:auto;right:auto;} .infobox:hover .boxtext {top:0px;right:0;bottom:0;left:0px;} */
 
/** 6. Laufrichtung öffnen: Von links nach rechts **/
/* .boxtext {bottom:0;left:-250px;top:auto;right:auto;} .infobox:hover .boxtext {top:auto;right:auto;bottom:0px;left:0px;} */
 
/** 7. Laufrichtung öffnen: Von Ecke links unten nach oben **/
/* .boxtext {bottom:-400px;left:-250px;top:auto;right:auto;} .infobox:hover .boxtext {top:auto;right:auto;bottom:0px;left:0px;} */
</style>
 
<center>
<div class="infobox infobox1">
<div class="boxtext">
<h3>Überschrift zu Thema 1</h3>
<img src="https://files.homepagemodules.de/b104774/pictures_u456_FdCnaWfA.jpg">
<iframe src="https://www.youtube.com/embed/IHvIasgmtOc" frameborder="0" allowfullscreen></iframe>
 
<ul>
<li>Info 1</li>
<li>Info 2</li>
<li>Info 3</li>
<li>Info 4</li>
</ul>
 
<div class="infomail">Haben Sie noch eine Frage, dann erreichen Sie mich <a href="/private_new.php?sendto=1" target="_blank">hier</a>.</div>
 
</div>
</div>
 
<div class="infobox infobox2">
<div class="boxtext">
<h3>Überschrift zu Thema 2</h3>
<iframe src="https://www.youtube.com/embed/BDitrYIkJF4" frameborder="0" allowfullscreen></iframe>
 
<ul>
<li>Info 1</li>
<li>Info 2</li>
<li>Info 3</li>
<li>Info 4</li>
</ul>
 
<div class="infomail">Haben Sie noch eine Frage, dann erreichen Sie mich <a href="/private_new.php?sendto=1" target="_blank">hier</a>.</div>
 
</div>
</div>
 
<div class="infobox infobox3">
<div class="boxtext">
<h3>Überschrift zu Thema 3</h3>
<img src="https://files.homepagemodules.de/b104774/pictures_u491_soANLdST.jpg">
 
<ul>
<li>Info 1</li>
<li>Info 2</li>
<li>Info 3</li>
<li>Info 4</li>
</ul>
 
<div class="infomail">Haben Sie noch eine Frage, dann erreichen Sie mich <a href="/private_new.php?sendto=1" target="_blank">hier</a>.</div>
 
</div>
</div>
</center>
 
<script>
window.addEventListener('load',function(){
 
function hasTouch() {
 try {
  document.createEvent("TouchEvent");
  return true;
} catch (e) {
  return false;
 }
};
 
if (hasTouch()) {
 
$('.boxtext').hover(function(e) {
/** Grundstellung: Laufrichtung von unten nach oben und zurück! **/
$(this).css({'top':'','right':'','bottom':'-400px','left':'0'});
 
/** 1. Laufrichtung schließen: Von Ecke links oben nach unten **/
/* $('.boxtext').css({'top':'400px','right':'','bottom':'','left':'250px'}); */
 
/** 2. Laufrichtung schließen: Von links nach rechts **/
/* $('.boxtext').css({'top':'0','right':'','bottom':'','left':'250px'}); */
 
/** 3. Laufrichtung schließen: Von Ecke links unten nach oben **/
/* $('.boxtext').css({'top':'-400px','right':'','bottom':'','left':'250px'}); */ 
 
/** 4. Laufrichtung schließen: Von unten nach oben **/
/* $('.boxtext').css({'top':'-400px','right':'','bottom':'','left':'0'}); */ 
 
/** 5. Laufrichtung schließen: Von Ecke rechts unten nach oben **/
/* $('.boxtext').css({'top':'-400px','right':'','bottom':'','left':'-250px'}); */
 
/** 6. Laufrichtung schließen: Von rechts nach links **/
/* $('.boxtext').css({'top':'','right':'','bottom':'0','left':'-250px'}); */ 
 
/** 7. Laufrichtung schließen: Von Ecke rechts oben nach unten **/
/* $('.boxtext').css({'top':'','right':'','bottom':'-400px','left':'-250px'}); */ 
 
},function(){
  $('.boxtext').css({'bottom':'','left':'','top':'','right':''});
});
};
 
});
</script>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Die Mouseover-Boxen in Aktion: Mouseover-Boxen mit JavaScript

Bis dann und viel Erfolg beim Einbau!
Und besten Dank an creator für die Unterstützung

Nara und Mato finden das Top!

Antworten

#6 | RE: XXL: Animierte Mouseover-Boxen ohne JavaScript - Teil 1+2 datum

25.01.2022 23:49

Ich find das gut und hab es mir auch mal eingebaut, allerdings unten
Was ich rein mache, weiß ich noch nicht, aber da fällt mir sicher noch was ein.

Liebe Grüße von Mato

Wolfgang findet das Top!

Antworten

#7 | RE: XXL: Animierte Mouseover-Boxen ohne JavaScript - Teil 1+2 datum

10.02.2022 07:32

Hallo.
nun hab ich auch Infobox mit Hilfe von Mato.
Aber seitdem hab ich eine seltsame Erscheinung im Forum. Hängt garantiert mit der Infobox zusammen, ich hab es ausprobiert. Entferne ich die Box ist alles normal.
Und zwar verschwindet im Browser der Scrollbalken rechts wenn man auf die Startseite zurück geht nach dem schreiben oder was immer.
Dann muß man nochmal die Startseite anklicken, dann ist der Scrollbalken wieder da.
Kann man das irgendwie beheben?

Liebe Grüße, Rika

Antworten

#8 | Fehlersuche: XXL: Animierte Mouseover-Boxen datum

10.02.2022 21:42

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3314
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1246

Fehlersuche: XXL: Animierte Mouseover-Boxen

Hallo Rika,
eigentlich sollte der Scrollbalken beim Zurückkehren nicht ausgeblendet werden!
Wo genau hast Du das Skript eingetragen?
Ist es noch aktiv?

Frage:
Eigentlich kann es nur am CSS-Eintrag "overflow:hidden" liegen oder an der Class ".infobox", die auch woanders Verwendung findet!
Was passiert, wenn Du aus Zeile 2 "overflow:hidden" löscht?
Wo kann man mal nachschauen?

Wenn alles nicht hilft:
Das folgende Skript verwendet andere Classes.....
Was passiert, wenn Du das installierte Skript durch das folgende ersetzt, funktioniert dann der Scrollbalken, wie er soll?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
<style>
.infobox_f {max-width:250px;height:400px; font-size: 14px; font-family: 'Arial'; background-color:#eeeeee; display:inline-block; overflow:hidden; box-shadow:0px 0px 5px 1px rgba(25, 25, 25, 0.3); margin:10px 5px; text-align:center; cursor:pointer;} 
.infobox_f li {text-align:left; line-height:20px; padding-right:20px; } 
.infobox_f:hover .boxtext_f {bottom:0px;left:0px;top:auto;right:auto;}
 
.infobox_f1 {background: center / cover no-repeat url('https://files.homepagemodules.de/b104774/pictures_u456_FdCnaWfA.jpg');} 
.infobox_f2 {background: center / cover no-repeat url('https://files.homepagemodules.de/b104774/pictures_u490_lHFiQmUy.jpg');} 
.infobox_f3 {background: center / cover no-repeat url('https://files.homepagemodules.de/b104774/pictures_u491_soANLdST.jpg');} 
 
.infomail_f {text-align:left; padding: 10px 30px 30px 30px;}
 
.boxtext_f  {height:400px; bottom:-400px; left:0; background-color:#eeeeee; overflow-y:auto; position:relative; -moz-transition:2.0s; -webkit-transition:2.0s; -o-transition:2.0s; transition:1.5s; -moz-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; cursor:default;padding:15px;}
.boxtext_f img, .boxtext_f iframe {max-height:140px; max-width:190px;background-size: cover;background-repeat:no-repeat; background-position:center;} 
</style>
 
<center>
<div class="infobox_f infobox_f1">
<div class="boxtext_f">
<h3>Überschrift zu Thema 1</h3>
<img src="https://files.homepagemodules.de/b104774/pictures_u456_FdCnaWfA.jpg">
<iframe src="https://www.youtube.com/embed/IHvIasgmtOc" frameborder="0" allowfullscreen></iframe>
 
<ul>
<li>Info 1</li>
<li>Info 2</li>
<li>Info 3</li>
<li>Info 4</li>
</ul>
 
<div class="infomail_f">Haben Sie noch eine Frage, dann erreichen Sie mich <a href="/private_new.php?sendto=1" target="_blank">hier</a>.</div>
 
</div>
</div>
 
<div class="infobox_f infobox_f2">
<div class="boxtext_f">
<h3>Überschrift zu Thema 2</h3>
<iframe src="https://www.youtube.com/embed/BDitrYIkJF4" frameborder="0" allowfullscreen></iframe>
 
<ul>
<li>Info 1</li>
<li>Info 2</li>
<li>Info 3</li>
<li>Info 4</li>
</ul>
 
<div class="infomail_f">Haben Sie noch eine Frage, dann erreichen Sie mich <a href="/private_new.php?sendto=1" target="_blank">hier</a>.</div>
 
</div>
</div>
 
<div class="infobox_f infobox_f3">
<div class="boxtext_f">
<h3>Überschrift zu Thema 3</h3>
<img src="https://files.homepagemodules.de/b104774/pictures_u491_soANLdST.jpg">
 
<ul>
<li>Info 1</li>
<li>Info 2</li>
<li>Info 3</li>
<li>Info 4</li>
</ul>
 
<div class="infomail_f">Haben Sie noch eine Frage, dann erreichen Sie mich <a href="/private_new.php?sendto=1" target="_blank">hier</a>.</div>
 
</div>
</div>
</center>
 
<script>
window.addEventListener('load',function(){
 
function hasTouch_f() {
 try {
  document.createEvent("TouchEvent");
  return true;
} catch (e) {
  return false;
 }
};
 
if (hasTouch_f()) {
 
$('.boxtext_f').hover(function(e) {
  $(this).css({'top':'','right':'','bottom':'-400px','left':'0'});
 
},function(){
  $('.boxtext_f').css({'bottom':'','left':'','top':'','right':''});
});
};
 
});
</script>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Bis dann
Wolfgang

Antworten

#9 | RE: Fehlersuche: XXL: Animierte Mouseover-Boxen datum

11.02.2022 09:19

Rika

Informationen anzeigen

Beitr�ge:	17
Registriert seit:	02.02.2022

Homepage:	Link
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Nicht angegeben
Likes	4

Erstmal vielen Dank Wolfgang.
Ist mir ein Rätsel, aber ich hab die Box jetzt wieder rein gestellt und bisher verschwindet der Scrollbalken nicht mehr!
Ich hab es im "Eigenes Javascript" und ich glaube ich hatte es davor im Footer, die alte Möglichkeit von v4.
Da ist es jetzt drin: https://www.seniorenforum50plus.de/
Sollte es wieder auftreten mit dem Scrollbalken probiere ich Deine Ratschläge aus, ansonsten melde ich mich wieder.

Das ist das verwendete Skript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<script>
window.addEventListener('load', function ( ) {
 
$('#forumstats').after(`<div class="card mb-3 fadeIn">
<div class="card-header clearfix">
 
<h5 class="card-title">Hank Marvin Music</h5>
 
</div>
<div class="card-body">
 
<p><a target="_blank" href="https://www.youtube.com/channel/UCBQi-8WuzBKNIDnutQ11ljQ"><img border="0" src="//files.homepagemodules.de/b759842/a_359_479ee78a.jpg" width="509px" height="141px" /></a></p>
 
</div>
</div>`);
 
});
</script>
 
 

Liebe Grüße, Rika

Antworten

#10 | RE: Fehlersuche: XXL: Animierte Mouseover-Boxen datum

11.02.2022 10:06

Funktioniert immer noch, hab eine zweite Infobox erstellt.
Nur hab ich noch ein anderes "Problem".

Damit die Boxen in der richtigen Reihenfolge stehen hab ich in der Administration die Boxanzeige-Nummerierung alles auf Null gestellt, sonst stehen die selbst erstellten Boxen ganz oben, da sollen aber die Standardboxen von Xobor stehen.
Das funktioniert prima solange man eingeloggt ist.
Aber Gäste sehen die selbst erstellten Boxen oben als erstes und erst drunter die Anmeldung, Besucherstatistiken...
Kann man da was machen das die selbst erstellten Boxen unter den Standardboxen stehen?

Liebe Grüße, Rika

Antworten

Kopieren-Button zu Code-Block hinzufügen � � [Erledigt] In den Forenbeiträge für Gäste kein reCapcha

Seite 1 von 2 � Seite 1 2 Seite �

�hnliche Themen

Antworten

Letzter Beitrag

Bereiche in einem Bild anklicken und klickbare Informationen anzeigen
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von WolfgangP

24.02.2023 16:06
von

Wolfgang • Zugriffe: 208

Webseiten automatisch einblenden
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 0 24.05.2022 19:43
Wolfgang • Zugriffe: 389

Passwortstärke einstellen und Berechtigung Benutzernamen erweitern!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

08.05.2020 20:02
von

Wolfgang • Zugriffe: 858

Verlinkung zur Adminstration in Beiträgen - Nur für Admins und Moderatoren!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

30.07.2019 13:06
von

Wolfgang • Zugriffe: 494

Im Beitrag eine Datei anhängen
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Eduard Heimerl 1 29.07.2019 23:05
Wolfgang • Zugriffe: 428

Verlinkte Grafik - Hinweis auf spezielle Beiträge, Ereignisse und Favoriten!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

19.03.2017 08:25
von

Wolfgang • Zugriffe: 2014

Formatierbare Tooltipps oder Quickinfos - Version 1-5
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 11 19.09.2020 13:45
Wolfgang • Zugriffe: 9951
TAB-Menü / TAB-Spoiler / Boxen für Texte und Bildern
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 20 28.10.2022 18:49
Daishi • Zugriffe: 14019

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 85 €

78%