WMS OpenLayers click on thumbnail image to show Layer

by Birkadze

HTML

<script src="//maps.google.com/maps/api/js?v=3&amp;amp;sensor=false"></script>
<script src="//dev.openlayers.org/OpenLayers.js"></script>
<body onload="init()">
     <h1></h1>

    <div id="map-canvas" class="smallmap"></div>

    
</body>

CSS

#map-canvas {
    width: 100%;
    height: 400px;
    border: 1px solid #dddddd;
    margin-top:10px;
}
.vorschau {
    width: 150px;
    height:80px;

    cursor:pointer;
    border: 1px solid #00008B;
}
#thumbnails
{
    
   margin-bottom: 15px;
}
      .olControlDrawFeaturePointItemInactive { 
                  background-image: url("../theme/default/img/editing_tool_bar.png");
                  background-repeat: no-repeat;
                  background-position: -77px 0px; 
              }

          .olControlDrawFeaturePointItemActive { 
            background-image: url("../theme/default/img/editing_tool_bar.png");
            background-repeat: no-repeat;
            background-position: -77px -23px ;                                                                   
        }

JavaScript

var map, wfs;

 var DeleteFeature = OpenLayers.Class(OpenLayers.Control, {
            initialize: function(layer, options) {
                OpenLayers.Control.prototype.initialize.apply(this, [options]);
                this.layer = layer;
                this.handler = new OpenLayers.Handler.Feature(
                    this, layer, {click: this.clickFeature}
                );
            },
            clickFeature: function(feature) {
                // if feature doesn't have a fid, destroy it
                if(feature.fid == undefined) {
                    this.layer.destroyFeatures([feature]);
                } else {
                    feature.state = OpenLayers.State.DELETE;
                    this.layer.events.triggerEvent("afterfeaturemodified", 
                                                   {feature: feature});
                    feature.renderIntent = "select";
                    this.layer.drawFeature(feature);
                }
            },
            setMap: function(map) {
                this.handler.setMap(map);
                OpenLayers.Control.prototype.setMap.apply(this, arguments);
            },
            CLASS_NAME: "OpenLayers.Control.DeleteFeature"
        });

function init() {
    

var styles = new OpenLayers.StyleMap({
                "default": new OpenLayers.Style(null, {
                    rules: [
                        new OpenLayers.Rule({
                            symbolizer: {
                                "Point": {
                                    pointRadius: 5,
                                    graphicName: "square",
                                    fillColor: "white",
                                    fillOpacity: 0.25,
                                    strokeWidth: 1,
                                    strokeOpacity: 1,
                                    strokeColor: "#333333"
                                },
                                "Line": {
                            ...