概要

cssassistは画像にて<a>,<h1~h6>,<li>を設定する時に楽にコーディングできるコーディング補助のscriptです。

Example

非常に簡単なHTML記述のみで画像置換のためのCSSを書く必要がなく(面倒な、画像の幅や高さもJSで勝手に取ってくれます＞＜)、画像に置換できます。

h2について

テストはこちら テスト2はこちら 
<h2 id="h2_about_jpg" class="cssassist">h2について</h2>
<a href="#" id="btn_sample_gif" class="cssassist">テストはこちら</a>
<a href="#" id="btn_sample2_gif" class="cssassist">テスト2はこちら</a>

使い方

  1. 画像を準備します。<h1~h6>,<li>の場合は何も気にしなくていいですが、<a>の場合は下半分がロールオーバー画像のものを準備します。 

    例：

  2. 画像に置換したいaやh1～h6のclass名をclass="cssassist" とし、id名を画像のファイル名を拡張子前の.(ドット)を_（アンダースコア）に変えたものとします。 
    <h2 id="h2_about_jpg" class="cssassist">h2について</h2>
<!--↑画像名は　h2_about.jpg-->
<a href="#" id="btn_sample_gif" class="cssassist">テストはこちら</a>
<!--↑画像名は　btn_sample.gif-->
<a href="#" id="btn_sample2_gif" class="cssassist">テストはこちら</a>
<!--↑画像名は　btn_sample2.gif-->
  3. head内等で、cssassist.jsを読み込み、画像のディレクトリを設定します。また、外部CSSのない場合は空のstylesheetを用意します。window.onloadなどでcssAssistInit()を実行します 
    <script type="text/javascript" src="cssassist.js"></script>
<script language="javascript" type="text/javascript">
    	<!--
    	var imageDirectory = './images/';//スラッシュで終わらせる。
    	window.onload=cssAssistInit;
    	//-->
    </script>
<style type="text/css"></style>

Download:

履歴

2007/09/10 v 1.1をリリース（liタグでも使用可に。IEの不具合対応）
2007/09/10 IEでの不具合に対処中
2007/09/10 v 1.0をリリース

お問い合わせ・要望等

何かあれば、emailまでどうぞ。対応できそうならば考えさせていただきます。

免責事項

cssassist JSを使用した場合、または使用できなかった等のいかなる損害も、むらけんは、その責を負いません。
ご自身の責任においてご使用ください。

back to top