#1

piotr

Forum-Sponsor  (121 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 http://www.tukhut.nl

Responsives CSS/HTML Regen-Radar Script inkl. Marker-Funktionalität

Hallo Forum-Mitglieder,

Ich habe bei einigen von mir betreuten Homepages eine Wetter-Seite mit integriert.
Teil so einer Wetter-Seite ist auch ein paar "Regen-Radar" Bilder.

Über eine Marker wird ein bestimmtes Ort angezeigt
(können evt. auch mehrere sein).

Ein Beispiel kann man sich hier anschauen ...

Das verwendete CSS/HTML Script habe ich hierunten aufgenommen.
Das Script ist responsive, und auch die Markierungen bleiben schön fixiert,
falls man die Fensterbreite ändern würde.

Vielleicht kann einer von euch diese Script auch verwenden
und vielleicht gibt es noch Verbesserungsvorschläge.

Viele Grüsse, Piotr Linski

 

<style type="text/css">

.table1 { 
 width: 100%;
 margin-left: auto;
 margin-right: auto;
 border-width: 6px; 
 border-style: double;
 font-family: verdana;
 font-style: normal;
 font-weight: bold;
 font-size: 120%;
 text-align: center;
}
.td1 { 
 border-width: 6px; 
 border-style: double;
 padding: 5px;
}
.img {
 height: auto;
 width: 100%;
}

#outer-left {
 position:relative;
 z-index:0;
}
#outer-right {
 position:relative;
 z-index:0;
}
.inner-left {
 position:absolute;
 z-index:1;
 top: 31%;
 left: 65%;
}
.inner-right {
 position:absolute;
 z-index:1;
 top: 13%;
 left: 50%;
}
</style>


<table class="table1">
<tr>
<td class="td1">Niederschlagsradar West-Europa</td>
<td class="td1">Niederschlagsradar Deutschland</td>
</tr>

<tr>
<td id="outer-left" class="td1">
<img src="http://api.buienradar.nl/image/1.0/RadarMapEU?" height="auto" width="100%" >
<div class="inner-left"><img src="http://mirpir.eu/mark2.gif" alt="Rellingen" /></div>
</td>

<td id="outer-right" class="td1">
<img src="http://www.niederschlagsradar.de/image.ashx?type=loop1stunde&jaar=&regio=homepage&tijdid=201112050910&time=" style="float: left; filter: alpha(opacity=90); -moz-opacity: .9; opacity: .9; border-width: 0px; height="auto" width="100% " />
<div class="inner-right"><img src="http://mirpir.eu/mark2.gif" alt="Rellingen" /></div>
</td>

</tr>
</table>
<br><br>
66 Aufrufe | 1 Beiträge