mieki256's diary

前述のサンプルページを書く際に、radioボタンを押したら背景色が変わるようにしたくて、ちょっとだけ勉強。というか解説記事からコピペ。忘れそうなのでメモ。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
  <!--
    $(function(){
    $("[name='bg']").click(function(){
    $("td.img").css("background-color", $("input[name='bg']:checked").val());
    });
    });
    -->
</script>

  <form>
    <p>画像背景色を変更</p>
    <INPUT type="radio" name="bg" value="#000000" checked>黒
    <INPUT type="radio" name="bg" value="#ffffff">白
    <INPUT type="radio" name="bg" value="#ff0000">赤
  </form>

  <tr><td class="img"><img src="src.png"></td><td>元画像(アルファチャンネル付きpng)</td></tr>

name="bg" が指定されたhtmlタグ(この場合はradioボタン)に、クリックされたときに呼ばれる関数？を割り当てる。関数の中では、img というクラス名が付いた td の背景色を、cssを使って変化させる。変化させる値は、チェックがついたradioボタンのvalueを使う。ということだと思うけど、ちと自信無し。