Feature Style

HTML

<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/lib/OpenLayers.js"></script>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body onload="init()">
    <div id="map" class="smallmap"></div>
  </body>

JavaScript

var map;

function init() {
    map = new OpenLayers.Map("map");

    var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {
        layers: "basic"
    });

    /**
     * Create 50 vector features.  Your features would typically be fetched
     * from the server.  These are created here to demonstrate a rule based
     * style.  The features are given an attribute named "foo".  The value
     * of this attribute is an integer that ranges from 0 to 100.
     */
    var features = new Array(25);
    for (var i = 0; i < features.length; i++) {
        features[i] = new OpenLayers.Feature.Vector(
        new OpenLayers.Geometry.Point((340 * Math.random()) - 170, (160 * Math.random()) - 80), {
            foo: 100 * Math.random() | 0
        });
    }

    /**
     * Here we create a new style object with rules that determine
     * which symbolizer will be used to render each feature.
     */
    var style = new OpenLayers.Style(
    // the first argument is a base symbolizer
    // all other symbolizers in rules will extend this one
    {
        graphicWidth: 64,
        graphicHeight: 64,
        graphicYOffset: -64,
        labelYOffset: 40,
        labelOutlineWidth: 1,
        fontColor: "#999",
        fontOpacity: 0.9,
        fontSize: "12px",
        externalGraphic: 'http://cdn1.iconfinder.com/data/icons/super-mono-reflection/green/balloon_green.png',
        //externalGraphic: "http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/pin_sq_down.png",
        color: '#ffffff',
        // shift graphic up 28 pixels
        label: "${foo}" // label will be foo attribute value
    });

    // create the layer styleMap that uses the above style for all render intents
    var vector = new OpenLayers.Layer.Vector("Points", {
        styleMap: new OpenLayers.StyleMap(style)
    });
    vector.addFeatures(features);

    map.addLayers([wms, vector]);
    map.setCenter(new OpenLayers.LonLat(0, 0), 1);
}