<p class="thumb"><img src="http://web-marketing.zako.org/wp-content/uploads/2009/05/image-splitter.jpg" alt="画像をスライス、リンク付きのHTMLも生成するサービス" title="画像をスライス、リンク付きのHTMLも生成するサービス" width="514" height="204" class="alignnone size-full wp-image-5724" /></p><p>一つの画像をスライスして、画像内の位置によって、違うページへのリンクを設定したいときがあると思います。</p><p>決してきれいなコーディングではありませんが、それをカンタンに、しかもマウスオーバーで色を反転させることも出来るサービスをご紹介します。</p><!--more--><h3 class="header-label">画像をスライス、リンク付きのHTMLも生成するサービス</h3><p>「<a class="web-site-link" href="http://www.chami.com/html-kit/services/is/" onclick="window.open('http://www.chami.com/html-kit/services/is/'); return false;">Online Image Splitter</a>」は、<strong>アップした画像を最大8×8までスライスして、マウスオーバーで色を反転させることが出来る</strong>サービス。</p><p>リンクを付けるかどうかも選択することができ、ナビゲーションメニューもサクッと作ることが出来ます。（等間隔のみ）</p><h4 class="header-label">「Online Image Splitter」の特徴</h4><ul>	<li>設定した効果を反映したHTMLを生成</li>	<li>画像の拡張子変換も可能</li>	<li>通常表示をグレーにし、マウスオーバーでカラーにできる</li>	<li>スライス毎にリンクを付与できる</li>	<li>最大8×8までスライス可能</li></ul><h4 class="header-label">サンプルHTML</h4><iframe src="http://web-marketing.zako.org/test/imgsplit_200905170351540904/" width="522" height="400" frameborder="0" scrolling="no"></iframe><p>↑リンク先は指定していませんが、ロールオーバー設定をしています。</p><h4 class="header-label">スライスの手順</h4><ol>	<li><a class="web-site-link" href="http://www.chami.com/html-kit/services/is/" onclick="window.open('http://www.chami.com/html-kit/services/is/'); return false;">Online Image Splitter</a>のページを開き、アップする画像を選択し、「Start >>」ボタンを押します<br /><img src="http://lh6.ggpht.com/_fRSz8mJZTZY/Sg_hnROZtLI/AAAAAAAAXZc/3drdMmrFQLE/s400/Image-Splitter2.jpg" /></li>	<li>スライスの設定を行い、「Process」ボタンを押すとプレビューすることができ、「Download」ボタンを押すとZip形式でダウンロードできます<br /><img src="http://lh3.ggpht.com/_fRSz8mJZTZY/Sg_e-YiyLAI/AAAAAAAAXZY/f_Oz1yV4bjI/s400/Image-Splitter1.jpg" /></li></ol><p>試してみたい方は<a class="web-site-link" href="http://www.chami.com/html-kit/services/is/" onclick="window.open('http://www.chami.com/html-kit/services/is/'); return false;">Online Image Splitter</a>へどうぞ。</p><p>シンプルですが、面倒なことをカンタンにしてくれるサービスは、やっぱり便利ですよね。</p><p>Via：<a class="website-link" href="http://delicious.com/url/248de2fceabe963c0a2992dc08fd56d8" onclick="window.open('http://delicious.com/url/248de2fceabe963c0a2992dc08fd56d8'); return false;">delicious</a></p>