https://barsinghausen-info.de/

1<!DOCTYPE html>
2<html lang="de">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
7<title>Tourismus Barsinghausen e.V.</title>
8
9<!-- Automatische Weiterleitung nach 4 Sekunden -->
10<meta http-equiv="refresh" content="4;url=home.html">
11
12<!-- Hand-Bild für den Mouseover-Effekt vorladen -->
13<link rel="preload"
14      as="image"
15      href="einstieg/vorspann/vor_test/navi_neu_r3_c3_f2.jpg">
16
17<style>
18
19html,
20body {
21    margin: 0;
22    padding: 0;
23}
24
25body {
26    background-image: url("einstieg/vorspann/vor_test/hintergrund.jpg");
27    background-repeat: repeat;
28    font-family: Arial, Helvetica, sans-serif;
29}
30
31
32/* Bereich für die alte Startgrafik */
33#splash-wrapper {
34    position: relative;
35    width: 100%;
36    overflow: visible;
37}
38
39
40/*
41 * Originalgröße der alten Grafik:
42 * 959 x 780 Pixel
43 */
44#splash {
45    position: absolute;
46
47    top: 0;
48    left: 50%;
49
50    width: 959px;
51    height: 780px;
52
53    transform-origin: top center;
54
55    cursor: pointer;
56}
57
58
59/* Tabellen der alten Fireworks-Grafik */
60#splash table {
61    border-collapse: collapse;
62    border-spacing: 0;
63}
64
65#splash td {
66    padding: 0;
67}
68
69#splash td img {
70    display: block;
71}
72
73
74/*
75 * Der mittlere Teil des Ortsschildes bekommt
76 * beim Überfahren wieder die alte Hand.
77 */
78#ortsschild {
79    cursor: pointer;
80}
81
82
83/*
84 * Deutlich sichtbarer Einstieg unterhalb
85 * der eigentlichen Grafik.
86 */
87.enter-area {
88    position: absolute;
89
90    left: 50%;
91    bottom: -55px;
92
93    transform: translateX(-50%);
94
95    z-index: 100;
96
97    text-align: center;
98    white-space: nowrap;
99
100    cursor: default;
101}
102
103
104/* Gelber Weiter-Button */
105.enter-button {
106    display: inline-block;
107
108    padding: 12px 32px;
109
110    background: #ffd928;
111    color: #111;
112
113    border: 3px solid #222;
114    border-radius: 9px;
115
116    font-size: 20px;
117    font-weight: bold;
118
119    text-decoration: none;
120
121    box-shadow: 0 3px 8px rgba(0,0,0,0.35);
122}
123
124
125.enter-button:hover,
126.enter-button:focus {
127    background: #ffe766;
128    transform: translateY(-1px);
129}
130
131
132/* Countdown unter dem Button */
133.redirect-info {
134    margin-top: 6px;
135
136    color: white;
137
138    font-size: 13px;
139    font-weight: bold;
140
141    text-shadow:
142        0 1px 2px rgba(0,0,0,0.8),
143        0 0 4px rgba(0,0,0,0.5);
144}
145
146</style>
147</head>
148
149
150<body>
151
152
153<div id="splash-wrapper">
154
155
156<div id="splash"
157     role="link"
158     tabindex="0"
159     aria-label="Zur Website Tourismus Barsinghausen"
160
161     onclick="window.location.href='home.html';"
162
163     onkeydown="
164        if(event.key==='Enter' || event.key===' ') {
165            window.location.href='home.html';
166        }
167     ">
168
169
170<!--
171========================================================
172Komplette alte Startgrafik
173========================================================
174-->
175
176<table
177    align="center"
178    border="0"
179    cellpadding="0"
180    cellspacing="0"
181    width="959">
182
183
184<tr>
185
186
187    <!-- ==================================================
188         LINKER RAND
189         ================================================== -->
190    <td>
191
192        <img
193            src="einstieg/vorspann/vor_test/navi_neu_r1_c1.jpg"
194            width="24"
195            height="780"
196            alt="">
197
198    </td>
199
200
201
202    <!-- ==================================================
203         MITTELTEIL
204         ================================================== -->
205    <td>
206
207
208        <table
209            align="left"
210            border="0"
211            cellpadding="0"
212            cellspacing="0"
213            width="914">
214
215
216            <!-- ==========================================
217                 KOPF
218                 ========================================== -->
219            <tr>
220                <td>
221
222                    <img
223                        src="einstieg/vorspann/vor_test/navi_neu_r1_c2.jpg"
224                        width="914"
225                        height="120"
226                        alt="">
227
228                </td>
229            </tr>
230
231
232
233            <!-- ==========================================
234                 LANDSCHAFT
235                 ========================================== -->
236            <tr>
237                <td>
238
239                    <img
240                        src="einstieg/vorspann/vor_test/navi_neu_r2_c2.jpg"
241                        width="914"
242                        height="150"
243                        alt="">
244
245                </td>
246            </tr>
247
248
249
250            <!-- ==========================================
251                 ORTSSCHILD
252                 ========================================== -->
253            <tr>
254                <td>
255
256
257                    <table
258                        align="left"
259                        border="0"
260                        cellpadding="0"
261                        cellspacing="0"
262                        width="914">
263
264
265                        <tr>
266
267
268                            <!-- Linker Teil -->
269                            <td>
270
271                                <img
272                                    src="einstieg/vorspann/vor_test/navi_neu_r3_c2.jpg"
273                                    width="202"
274                                    height="192"
275                                    alt="">
276
277                            </td>
278
279
280
281                            <!-- Mittlerer Teil mit Hand-Rollover -->
282                            <td>
283
284                                <img
285                                    id="ortsschild"
286
287                                    src="einstieg/vorspann/vor_test/navi_neu_r3_c3.jpg"
288
289                                    width="517"
290                                    height="192"
291
292                                    alt="Barsinghausen - der Urlaubsort am Deister"
293
294                                    onmouseover="
295                                        this.src='einstieg/vorspann/vor_test/navi_neu_r3_c3_f2.jpg';
296                                    "
297
298                                    onmouseout="
299                                        this.src='einstieg/vorspann/vor_test/navi_neu_r3_c3.jpg';
300                                    ">
301
302                            </td>
303
304
305
306                            <!-- Rechter Teil -->
307                            <td>
308
309                                <img
310                                    src="einstieg/vorspann/vor_test/navi_neu_r3_c4.jpg"
311                                    width="195"
312                                    height="192"
313                                    alt="">
314
315                            </td>
316
317
318                        </tr>
319
320
321                    </table>
322
323
324                </td>
325            </tr>
326
327
328
329            <!-- ==========================================
330                 UNTERER BILDBEREICH
331                 ========================================== -->
332            <tr>
333                <td>
334
335                    <img
336                        src="einstieg/vorspann/vor_test/navi_neu_r4_c2.jpg"
337                        width="914"
338                        height="180"
339                        alt="">
340
341                </td>
342            </tr>
343
344
345
346            <!-- ==========================================
347                 FUSS
348                 ========================================== -->
349            <tr>
350                <td>
351
352                    <img
353                        src="einstieg/vorspann/vor_test/navi_neu_r5_c2.jpg"
354                        width="914"
355                        height="138"
356                        alt="">
357
358                </td>
359            </tr>
360
361
362        </table>
363
364
365    </td>
366
367
368
369    <!-- ==================================================
370         RECHTER RAND
371         ================================================== -->
372    <td>
373
374        <img
375            src="einstieg/vorspann/vor_test/navi_neu_r1_c5.jpg"
376            width="21"
377            height="780"
378            alt="">
379
380    </td>
381
382
383</tr>
384
385
386</table>
387
388
389
390<!--
391========================================================
392WEITER-BUTTON
393========================================================
394-->
395
396<div
397    class="enter-area"
398    onclick="event.stopPropagation();">
399
400
401    <a
402        href="home.html"
403        class="enter-button">
404
405        Zur Website &rsaquo;
406
407    </a>
408
409
410    <div class="redirect-info">
411
412        Automatische Weiterleitung in
413

414        <span id="countdown">4</span>
415
416        Sekunden
417
418    </div>
419
420
421</div>
422
423
424</div>
425
426</div>
427
428
429

430<script>
431
432/*
433=========================================================
434RESPONSIVE DARSTELLUNG
435=========================================================
436
437Die alte Startgrafik ist exakt 959 x 780 Pixel groß.
438
439Auf Bildschirmen unter 959 Pixel Breite wird sie
440proportional verkleinert.
441*/
442
443function resizeSplash() {
444
445    var splash =
446        document.getElementById("splash");
447
448    var wrapper =
449        document.getElementById("splash-wrapper");
450
451
452    var originalWidth = 959;
453    var originalHeight = 780;
454
455
456    var availableWidth =
457        window.innerWidth;
458
459
460    var scale =
461        Math.min(
462            1,
463            availableWidth / originalWidth
464        );
465
466
467    splash.style.transform =
468        "translateX(-50%) scale(" + scale + ")";
469
470
471    /*
472     * 90 Pixel Extra-Platz für den Button
473     * unterhalb der Grafik.
474     */
475    wrapper.style.height =
476        (originalHeight * scale + 90) + "px";
477
478}
479
480
481resizeSplash();
482
483
484window.addEventListener(
485    "resize",
486    resizeSplash
487);
488
489
490
491/*
492=========================================================
493COUNTDOWN + AUTOMATISCHE WEITERLEITUNG
494=========================================================
495*/
496
497var countdown = document.getElementById("countdown");
498
499var countdownTimer;
500var redirectTimer;
501
502
503/*
504 * Timer neu starten.
505 * Das ist besonders für Firefox praktisch, wenn eine
506 * Seite aus dem Browser-Cache wiederhergestellt wurde.
507 */
508function startRedirect() {
509
510    clearInterval(countdownTimer);
511    clearTimeout(redirectTimer);
512
513    var seconds = 4;
514
515    countdown.textContent = seconds;
516
517
518    /*
519     * Sichtbarer Countdown
520     */
521    countdownTimer = window.setInterval(function () {
522
523        seconds--;
524
525        if (seconds > 0) {
526
527            countdown.textContent = seconds;
528
529        } else {
530
531            countdown.textContent = "0";
532            clearInterval(countdownTimer);
533
534        }
535
536    }, 1000);
537
538
539    /*
540     * Tatsächliche Weiterleitung nach 4 Sekunden.
541     *
542     * replace() statt href:
543     * Die Splashseite landet dadurch nicht im
544     * Zurück-Verlauf des Browsers.
545     */
546    redirectTimer = window.setTimeout(function () {
547
548        window.location.replace("home.html");
549
550    }, 4000);
551
552}
553
554
555/*
556 * "pageshow" funktioniert sowohl beim normalen Laden
557 * als auch dann, wenn Firefox die Seite aus seinem
558 * Back-Forward-Cache wiederherstellt.
559 */
560window.addEventListener("pageshow", function () {
561
562    startRedirect();
563
564});
565</script>

565
566
567
568</body>
569</html>