Changes between Initial Version and Version 1 of CodeSamples/JavaScript/WaterMark

Timestamp:

10/31/08 02:03:32 (16 years ago)

Author:

ksgeograf

Comment:

--

CodeSamples/JavaScript/WaterMark

@@ +1 @@
+[[PageOutline]]
+
+This page is one of the !MapGuide Community CodeSamples.  Visit the CodeSamples page to view more!
+
+== Displaying a watermark over the map in the AJAX viewer ==
+
+This page contains code from the MapGuide-users mail list, showing how to place a watermark over the map in the AJAX viewer.
+The code was submitted to the mailing list by Stuart Jones:
+http://n2.nabble.com/Watermarking-a-Map-td1085166.html
+
+{{{
+/**
+ * Place a tiled image between the map and the scale slider
+ * to represent a watermark on the map. The image is expected to have a 
+ * transparent background.
+ *
+ * @doc       The document object.
+ * @elName    The name of the element before which the watermark will be put.
+ * @imageUrl  The URL of the map image used for the watermark.
+ *
+ */
+ShowWatermark: function(doc, elName, imageUrl) {
+
+        if (!doc) return;
+        if ((!elName) || (!doc.getElementById(elName))) return;
+        if (!imageUrl) return;
+
+        //
+        // Create a DIV to hold the watermark.
+        //
+        var watermark = doc.createElement('div');
+
+        //
+        // Assign the passed-in background image URL.
+        //
+        watermark.style.backgroundImage = 'url(' + imageUrl + ')';
+
+        //
+        // This value is very important. It must be less than the lowest z-index
+        // value used by the scale slider (which happens to be 4 at the time of 
+        // writing.
+        //
+        watermark.style.zIndex = '3';
+
+        //
+        // The rest of the styles.
+        // TODO: Make this more sustainable. External CSS?
+        //
+        watermark.style.position = 'absolute';
+        watermark.style.width = '100%';
+        watermark.style.height = '100%';
+        watermark.style.opacity = 0.5;
+        watermark.style.filter = 'alpha(opacity=50)';
+
+        watermark.setAttribute('id', this.WATERMARK_ID);
+
+        //
+        // Insert it into the DOM. 
+        //
+        var el = doc.getElementById(elName);
+        el.parentNode.insertBefore(watermark, el);
+}
+
+}}}