HTML generated on the mainpage

HTML Generated

  		<span class="i_contact i_contact1" data-pos-x="175" data-pos-y="221"  data-pos-width="110" data-pos-height="64" ="spanid1" data-index="1"></span>

						
			<span class="o_contact o_contact1" data-pos-x="222" data-pos-y="201"  data-pos-width="93" data-pos-height="53" id="spanid1" data-index="1"> </span>

					
<div class="main_panel">
	<div style='margin: auto; width: 600px;'>
		<div id="image_panel1" style="float:left; width:600px; position:relative;">
			<img alt="Un40eh5300inputs" src="http://s3.amazonaws.com/mymanual/images/images/000/000/005/large/UN40EH5300Inputs.jpg?1373419416" />
	<div class="i_tagmap1"></div>
	</div>
</div>
</div>

<div class="main_panel">
	<div style='margin: auto; width: 600px;'>
		<div id="image_panel1" style="float:left; width:600px; position:relative;">

			<img alt="Apple-appletv12-rear-lg" src="http://s3.amazonaws.com/mymanual/images/images/000/000/012/large/apple-appletv12-rear-lg.jpg?1373465902" />
	<div class="o_tagmap1"></div>
	</div>	
</div>	
</div>


			<span class="i_contact i_contact2" data-pos-x="174" data-pos-y="150"  data-pos-width="110" data-pos-height="76" ="spanid2" data-index="2"></span>

						
			<span class="o_contact o_contact2" data-pos-x="393" data-pos-y="219"  data-pos-width="43" data-pos-height="25" id="spanid2" data-index="2"> </span>

					
<div class="main_panel">
	<div style='margin: auto; width: 600px;'>
		<div id="image_panel2" style="float:left; width:600px; position:relative;">
			<img alt="Un40eh5300inputs" src="http://s3.amazonaws.com/mymanual/images/images/000/000/005/large/UN40EH5300Inputs.jpg?1373419416" />
	<div class="i_tagmap2"></div>
	</div>
</div>
</div>

<div class="main_panel">
	<div style='margin: auto; width: 600px;'>
		<div id="image_panel2" style="float:left; width:600px; position:relative;">

			<img alt="Xbox360_hdmi_203w_back" src="http://s3.amazonaws.com/mymanual/images/images/000/000/017/large/Xbox360_HDMI_203W_back.jpg?1373489559" />
	<div class="o_tagmap2"></div>
	</div>	
</div>	
</div>




<script type="text/javascript">
$(document).ready(function(){

    $('span.i_contact').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');
        var taggedNode = $('<div class="tagged" />')
        taggedNode.css({
            "border":"5px solid red",
            "width":pos_width,
            "height":pos_height,
            "left":xpos,
            "top":ypos
        });

        var n = $(this).data('index')
        $('.i_tagmap' + n).append(taggedNode)  
        console.log(taggedNode.position())    
    });

    $("span.o_contact").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');

        var taggedNode = $('<div class="tagged" />')
        taggedNode.css({
            "border":"5px solid red",
            "width":pos_width,
            "height":pos_height,
            "left":xpos,
            "top":ypos  
        });
        var n = $(this).data('index')
        $('.o_tagmap' + n).append(taggedNode)        
    });
});
</script>