Popup

Communities Deutschland (Germany)
1

Hi, ich möchte statt der abgerundeten Ecken ein rechteckiges Popup; wo muss ich da “schrauben”?
Danke, Michael

2

dann zeigt doch erst mal deine Werkstatt.

3

Werkstatt:

4

Die CSS-Eigenschaft “border-radius” für Elemente der Klasse “ol-popup” auf 0 setzen sollte tun was du willst. Tipp: Lerne die Web-Konsole und den Inspektor von Firefox zu nutzen ([F12] drücken).

5

Nahmd,

Der Hintergrund der Popup-Box wird aus Schnipseln einer Graphik zusammengesetzt. Wenn Du das OpenLayers-Javscript von http://www.openlayers.org/api/OpenLayers.js ziehst, findet sich die Graphik unter http://www.openlayers.org/api/img/cloud-popup-relative.png.

Hostest Du das OpenLayers.js (mitsamt der Styles und Images) selbst, so liegt auch die Graphik auf Deinem Server und Du kannst sie gegen eine eigene austauschen (auch mit Blümchen in den Ecken). Lass dabei aber unbedingt das Format pixelexakt gleich, denn die Dimensionen sind im OpenLayers.js fest codiert.

Gruß Wolf

6

Hi,
hat geklappt, war aber ziemlich aufwändig wegen dieser keinen Änderung im Design. Gibt es tatsächlich keinen einfacheren Weg?
Danke
Michael

7

Nahmd,

Alternativ kannst Du die Implementierung der Klasse OpenLayers.Popup.FramedCloud bearbeiten und in Deiner Applikation eine oder mehrere Methoden oder gleich die ganze Klasse überschreiben.

Ich stelle im Forum grundsätzlich die jeweils kompliziertestmögliche Lösung vor.
Einfach kann jeder.

Gruß Wolf

8

Nun ja, auch die Grafiken werden nur via CSS gesetzt. Das hier wäre mal ein Anfang um das rein via Stylesheet zu lösen:

#popup_contentDiv {
	background-color: #ffffff;
	padding: 10px 0px 0px 10px;
	margin: 0px;
}
#popup_FrameDecorationDiv_0, #popup_FrameDecorationDiv_1, #popup_FrameDecorationDiv_2, #popup_FrameDecorationDiv_3 {
	background-color: #ffffff;
}
#popup_FrameDecorationDiv_0 {
	border-left: 1px solid #cc0000;
	border-top: 1px solid #cc0000;
	border-top-left-radius: 0px;
}
#popup_FrameDecorationDiv_1 {
	border-top: 1px solid #cc0000;
	border-right: 1px solid #cc0000;
	border-top-right-radius: 0px;
}
#popup_FrameDecorationDiv_2 {
	border-left: 1px solid #cc0000;
	border-bottom: 1px solid #cc0000;
	border-bottom-left-radius: 0px;
}
#popup_FrameDecorationDiv_3 {
	border-right: 1px solid #cc0000;
	border-bottom: 1px solid #cc0000;
	border-bottom-right-radius: 0px;
}
#popup_FrameDecorationDiv_0 img, #popup_FrameDecorationDiv_1 img, #popup_FrameDecorationDiv_2 img, #popup_FrameDecorationDiv_3 img {
	display: none;
}
#popup_FrameDecorationDiv_4 img {
	background-color: transparent;
}
9

Moins,

bitte versucht nicht weiter, unseren neuen Mitstreiter an der Nase herumzuführen.

Das Style-Attribut eines HTML-Elementes hat Priorität gegenüber allen CSS-Regeln.


block.div.style.width = (w < 0 ? 0 : w) + 'px';
block.div.style.height = (h < 0 ? 0 : h) + 'px';

block.div.style.left = (l != null) ? l + 'px' : '';
block.div.style.bottom = (b != null) ? b + 'px' : '';
block.div.style.right = (r != null) ? r + 'px' : '';
block.div.style.top = (t != null) ? t + 'px' : '';

block.image.style.left = positionBlock.position.x + 'px';
block.image.style.top = positionBlock.position.y + 'px';

CSS-Regeln helfen hier eben so viel wie Kaugummi kauen oder in der Nase popeln.

Gruß Wolf

10

Hier siehst Du das Ganze live: http://www.gpxtour.com/de/user/240/ - die Rahmen haben reinen Radius von 10px via CSS (ohne Verwendung von Grafiken), und das ist nicht was OL via JS (mit Verwendung von Grafiken) strickt. Auch hatte ich mein obiges CSS zuvor kurz lokal getestet :wink:

11

Nahmd,

sorry, ich hatte nicht runtergescrollt und deshalb das “display: none” auf den Images nicht gesehen. :frowning:

Die leider nicht trivial per JS auszutauschende Hintergrundgraphik einfach komplett verschwinden zu lassen ist natürlich eine äußerst pfiffige Lösung. Damit braucht es den Austausch der Graphik nur noch für den ungewöhnlichen Fall, dass man inklusive der Sprechblasen“anschlüsse” umfärben will.

Und schon notiert. :slight_smile:

Zerknirschte Grüße
Wolf