--- a/integration/js/treemap.js	Tue Oct 30 18:04:28 2012 +0100
+++ b/integration/js/treemap.js	Tue Nov 27 18:08:06 2012 +0100
@@ -91,6 +91,7 @@
     '<div class="actu" style="left: <%=x%>px; top: <%=y%>px; width: <%=w%>px; height: <%=h%>px; background: <%=color%>">'+
         '<a href="#">'+
             '<img src="img/home-visuel-<%-i%>.jpg" alt="" />'+
+        '<div class="voile"></div>'+
         '</a>'+
         '<div class="inner-actu">'+
             '<h2><a href="#"><%-label%></a></h2>'+
@@ -103,44 +104,52 @@
             '</div>'+
         '</div>'+
     '</div>';
-var tmpl = _.template(actu);
 
-squarify(data,0,0,760,358);
-
-document.getElementById('treemap1').innerHTML = _(data).reduce(function(mem, d) {
-    return mem + tmpl(d);
-},"");
 
-//redimensionnement d'image
-$(".actu").each(function(k,v){
-    var wActu = $(this).width();
-    var hActu = $(this).height();
-    var img = $(this).find('img');
-    var wImg = img.width();
-    var hImg = img.height();
+$(function(){
+    //treemap
+    var tmpl = _.template(actu);
+    var hTreemap = 800;//à définir
+    $('#treemap').height(hTreemap);
+    squarify(data,0,0,760,hTreemap);
+    var treemapHtml = _(data).reduce(function(mem, d) {
+        return mem + tmpl(d);
+    },"");
+    $('#treemap #actus').html(treemapHtml);
 
-    var ratioImg = wImg/hImg;
-    img.css('height',hActu);
-    img.css('width',hActu*ratioImg);
-    wImg = img.width();
-    hImg = img.height();
+    //redimensionnement d'image
+    $(".actu").each(function(k,v){
+        var wActu = $(this).width();
+        var hActu = $(this).height();
+        var img = $(this).find('img');
+        var wImg = img.width();
+        var hImg = img.height();
 
-    if(wActu>wImg){
-        var ratioImg = hImg/wImg;
-        img.css('width', wActu);
-        img.css('height',wActu*ratioImg);
+        var ratioImg = wImg/hImg;
+        img.css('height',hActu);
+        img.css('width',hActu*ratioImg);
         wImg = img.width();
         hImg = img.height();
-    }
+
+        if(wActu>wImg){
+            var ratioImg = hImg/wImg;
+            img.css('width', wActu);
+            img.css('height',wActu*ratioImg);
+            wImg = img.width();
+            hImg = img.height();
+        }
 
-    if (wImg<wActu) {
-        img.css('margin-left',(wActu-wImg)/2);
-    }else{
-        img.css('margin-left',-(wImg-wActu)/2);
-    }
-    if (hImg<hActu) {
-        img.css('margin-top',(hActu-hImg)/2);
-    }else{
-        img.css('margin-top',-(hImg-hActu)/2);
-    }
-});
\ No newline at end of file
+        if (wImg<wActu) {
+            img.css('margin-left',(wActu-wImg)/2);
+        }else{
+            img.css('margin-left',-(wImg-wActu)/2);
+        }
+        if (hImg<hActu) {
+            img.css('margin-top',(hActu-hImg)/2);
+        }else{
+            img.css('margin-top',-(hImg-hActu)/2);
+        }
+    });
+
+    $("#liste").hide();
+})
\ No newline at end of file