SO17778841

by Dave Mednick

HTML

<div class="container">175 221 110 64	<span class="i_connection" data-pos-x="175" data-pos-y="221" data-pos-width="110" data-pos-height="64"> </span>

    <br>
    <div class="image_panel">
        <img alt="Un40eh5300inputs" src="http://s3.amazonaws.com/mymanual/images/images/000/000/005/large/UN40EH5300Inputs.jpg?1373419416" />
        <div class='planetmap'></div>
    </div>174 150 110 76	<span class="i_connection" data-pos-x="174" data-pos-y="150" data-pos-width="110" data-pos-height="76"> </span>

    <br>
    <div class="image_panel">
        <img alt="Un40eh5300inputs" src="http://s3.amazonaws.com/mymanual/images/images/000/000/005/large/UN40EH5300Inputs.jpg?1373419416" />
        <div class='planetmap'></div>
    </div>

JavaScript

$(document).ready(function () {
     $("span.i_connection").each(function () {
         var pos_width = $(this).data('pos-width');
         var pos_height = $(this).data('pos-height');
         var xpos = $(this).data('pos-x');
         var ypos = $(this).data('pos-y');

         $(".tagged_box").css("display", "block");
         $(".tagged").css("border", "5px solid red");
         $('.planetmap').append('<div class="tagged"  style="width:' + pos_width + 'px;height:' + pos_height + 'px;left:' + xpos + 'px;top:' + ypos + 'px;" ><div class="tagged_box" style="width:' + pos_width + 'px;height:' + pos_height + 'px;" ></div>');
     }); //END OF SPAN.CONNECTION ITERATION
 });