画像を使わず、JavaScriptで図形が描けると言う＜canvas＞タグを使って、リニューアル作業の進捗状況を円グラフにしてみました。
これなら進捗状況が進んでも、値を変えるだけで、画像を作る必要がないので楽チンです。
ただし、IE７、IE8はCanvasに対応していないようなので、Googleが提供のExplorerCanvasというJavaScriptライブラリ（excanvas.js）を組み込んでやる必要があります。
Canvasは、円グラフだけでなく、折れ線グラフなんかも描けるようです。
そればかりか、JavaScriptが使えるので動的な画像（アニメーション）を表示させることもできるようです。
私のレベルでは、ひとまずこの程度で満足しております。
しかし、この円グラフを見ると、コンテンツ移管が、まだまだ進んでいないのがバレますね。
こんなテクニックにばかり時間を割いている場合じゃないな。
単調作業でも気合い入れて頑張らないと、リニューアル完了は程遠いです・・・。＾＾
おそまつなサンプルソース
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvasで円グラグ</title>
<!--[if IE]>
<script type="text/javascript" src="_shared/js/excanvas.js"></script>
<![endif]-->
<script language="JavaScript">
<!--
function progressArc(num) {
var imgcanvas = document.getElementById('imgcanvas'+num);
// canvas要素がｻﾎﾟｰﾄされているか確認
if (imgcanvas.getContext){
var ctx = imgcanvas.getContext("2d");
// ｾｯﾄする変数
var xPos = imgcanvas.width / 2;
var yPos = imgcanvas.height / 2;
var radius = 80;
var sAngle = 0;
var eAngle = 0;
var colors_a = ["#383", "#C63", "#338"];
var colors_b = ["#CCC", "#DCC", "#CCD"];
var progress = [ 6, 10, 5 ]; // ■ここに進捗率を入力する■
var prog = Math.round( (360/100) * progress[num] );
// 進捗（完了）部分の円弧を描く
sAngle = ( 0 - 90 ) * Math.PI / 180;
eAngle = ( prog - 90 ) * Math.PI / 180;
ctx.beginPath();
ctx.moveTo(xPos , yPos);
ctx.arc(xPos, yPos, radius, sAngle, eAngle, false);
ctx.closePath();
ctx.fillStyle = colors_a[num];
ctx.fill();
// 進捗（未完）部分の円弧を描く
sAngle = ( prog - 90 ) * Math.PI / 180;
eAngle = ( 360 - 90 ) * Math.PI / 180;
ctx.beginPath();
ctx.moveTo(xPos , yPos);
ctx.arc(xPos, yPos, radius, sAngle, eAngle, false);
ctx.closePath();
ctx.fillStyle = colors_b[num];
ctx.fill();
// 進捗％を文字で表示
document.getElementById('imgcanvas_txt'+num).innerHTML = progress[num] + "%";
}
}
function firstTime() {
progressArc(0);
progressArc(1);
progressArc(2);
}
-->
</script>
<style type="text/css">
.progress_arc {
float: left;
width: 180px;
height: 224px;
margin: 0px 0px 5px 15px;
padding: 0px;
border: solid 1px #999999;
}
#imgcanvas_title {
font-size: 14px;
text-align: center;
}
#imgcanvas0, #imgcanvas1, #imgcanvas2 {
margin: 10px 10px 0px 10px;
}
#imgcanvas_txt0, #imgcanvas_txt1, #imgcanvas_txt2 {
font-size: 14px;
text-align: center;
}
</style>
</head>
<body onload="firstTime();">
<div class="progress_arc">
<div id="imgcanvas_title">コンテンツを移管</div>
<canvas id="imgcanvas0" width="160" height="160">
<p>canvas非対応ブラウザかJavaScriptが無効になっています。</p>
</canvas>
<div id="imgcanvas_txt0"></div>
</div>
<div class="progress_arc">
<div id="imgcanvas_title">デザイン改良</div>
<canvas id="imgcanvas1" width="160" height="160">
<p>canvas非対応ブラウザかJavaScriptが無効になっています。</p>
</canvas>
<div id="imgcanvas_txt1"></div>
</div>
<div class="progress_arc">
<div id="imgcanvas_title">ブラッシュアップ</div>
<canvas id="imgcanvas2" width="160" height="160">
<p>canvas非対応ブラウザかJavaScriptが無効になっています。</p>
</canvas>
<div id="imgcanvas_txt2"></div>
</div>
</body>
</html>