KAWANO's PukiWiki Plus! - Lecture/JouhouC2010/11th/exercise2 の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Lecture/JouhouC2010/11th/exercise2 へ行く。

TITLE:第11回の課題(2)
*課題(2): スタイルシートの切り替えの準備をする [#be0dc49c]

>
HTMLファイルを編集して、
スタイルシートを切り替えるプログラムを追加します。
<

**スクリプトをHTMLファイルに組み込む [#q0f6a98b]

スタイルシートを指定した link タグ内に id="cssid" の属性を書き加えます。 

＜/head＞の直前にスクリプト（プログラムの一種）を書き加えます。
スクリプトのみ部分だけを、下に書いておきました。
コピーして使ってかまいません。 
「第10回のCSSファイル名」というところは、
&color(Red){第10回の課題のCSSファイル名（0622'''学籍番号'''.css）に書き換えて};ください。

#code(html,nolink){{
  ...
  <link id="cssid" rel="stylesheet" href="第10回のCSSファイル名" type="text/css">
<script type="text/javascript">
<!--
function replace_css(id,url){
  if(!document.getElementById) return false;
  var element = document.getElementById(id);
  if(!element || !element.cloneNode) return false;
  var new_node = element.cloneNode(true);
  new_node.href = url;
  element.parentNode.replaceChild(new_node,element);
  return true;
}
// -->
</script>

}}

修正結果は、次の図ようになります。&br;
なお、&color(Red){図の中の「style.css」の部分は、前回の課題で作成したCSSファイル};と読み替えてください。
#ref(Lecture/JouhouC2007/10th/exercise2/script1.png,nolink,スクリプト)


**切り替えのためのタグを記述する [#h3d4abee]
タイトルと目次の間、
またはプロフィールの次あたりにスクリプトを使うためのタグを追加します。

#pre(novervatim){{
<a href="#" onclick="replace_css('cssid','CSSファイルの名前');">基本</a> 
COLOR(red):（注：「CSSファイルの名前」には、前回の課題のCSSファイルを入力してください）
}}

これは「基本」という文字をクリックしたら、スタイルシートを前回までの課題のCSSファイルに切り替えるという意味になります。
「基本」という文字の部分は別の言葉に変えてもかまいません。他の箇所は変更しないでください。 

さらに次の2行を追加します。

#pre(novervatim){{
<a href="#" onclick="replace_css('cssid','0629'''学籍番号'''.css');">第11回</a>
<a href="#" onclick="replace_css('cssid','');">なし</a> 
COLOR(red):（注：「学籍番号」には、自分の学籍番号（c2092XXX）を入力してください）
}}

ここまでの設定ができると、次のようなことができます。
-「基本」という文字をクリックすると、前回の課題のスタイルシートでの表示に切り替わる
-「第11回」という文字をクリックしたら、
スタイルシートを「0629'''学籍番号'''.css」（今回作成）に切り替わる
-「なし」をクリックするとスタイルシートを使わない表示に切り替わる

たとえば、リンク部分をdiv要素で囲んでおけば、次のような内容になります。
#code(html,nolink){{
<div>
[
<a href="#" onclick="replace_css('cssid','0622c2092000.css');">基本</a> |
<a href="#" onclick="replace_css('cssid','0629c2092000.css');">第11回</a> |
<a href="#" onclick="replace_css('cssid','');">なし</a> 
]
</div>
}}


----

&navi2(Lecture/JouhouC2010/11th,next);に進んでください。

&br;
----
#navi2(Lecture/JouhouC2010/11th,prev,toc,next)