以前の質問と一部かぶってますが、既存のページに縦・横の
フレームがあります。その右側に入れ子で私がホームページ
をつくるのですが、社員紹介のリンクをいれて、座席表を
つけたいと思ってます。エクセルでは、コピペをすると
太いテーブルになり、私の目標が達成できない状態です。
座席表の線は細くしたいです。なお、座席表には、名前を
いれて、名前にリンクをはって、リンクをクリックすると
同一ページの座席表の下部に社員の紹介がでるように、したいです。
社員の紹介は、エクセルでいいです。
どうか、ご教示ください。よろしくお願いします。
表の枠線を細くするには、表の属性を編集するといいようです。
・表の枠に色をつけたり、太さを変更する
http://support.justsystems.com/faq/1032/app/servlet/qadoc?QID=047821
「罫線の幅」を「0」ピクセル、「枠表示」にチェックが入った状態のままで「1」ピクセルに設定してみてください。
※「セル内の余白」にも適当な数値を設定しておいた方がいいと思います。(枠線とセル内のテキスト等との間隔です。)
※CSSでも設定できるようですので、参考情報としてどうぞ。
・表の枠や線の色、種類を部分的に変更したい
http://support.justsystems.com/faq/1032/app/servlet/qadoc?QID=054066
社員紹介についてですが、そのような動作はjavascriptを使う事になると思います。
ホームページビルダーには、そのような動作を行うサンプルスクリプトは含まれていないようです。
・サンプル スクリプトの機能一覧
http://support.justsystems.com/faq/1032/app/servlet/qadoc?QID=046607
希望のような動作を行うスクリプトを書いてみたので、編集スタイルを「エディターズ」にして、HTMLソースを編集してみてください。(jQueryを使います。)
・HTML例(※名前にリンクを張る必要はありません)
<table id="seating-plan" border="1" cellspacing="0" cellpadding="3"> <tr> <td class="a">A</td><td class="b">B</td><td class="c">C</td> </tr> <tr> <td class="e">E</td><td class="f">F</td><td class="g">G</td> </tr> </table> <div id="profile"> <table class="a">Aのプロフィール</table> <table class="b">Bのプロフィール</table> <table class="c">Cのプロフィール</table> <table class="d">Aのプロフィール</table> <table class="e">Bのプロフィール</table> <table class="f">Cのプロフィール</table> </div>
※かなり省略していますが、ポイントは以下の通りです。
・それぞれの名前を囲むtdのクラス名とプロフィールのテーブル(※エクセルからペーストすると表になるのですね?)のクラス名を同じにしておきます。
・座席表のテーブルと、プロフィールのテーブルを囲むidは別のものを指定しておきます。
・CSS例(初期状態でプロフィールをすべて非表示にするスタイルシートです。)
#profile table {display:none;}
・jQuery例
$(function(){ $( "#seating-plan td" ).click(function() { var pid = $( this ).attr("class"); $("#profile table").hide(); $("table." + pid).show(); }); });
・jQuery
http://jquery.com/
・How jQuery Works
http://learn.jquery.com/about-jquery/how-jquery-works/
【※ 追記 ※】
もう一つの新しい質問の方も少し変更すると可能です。
アイコン画像の下に表示する内容のボックスを記述する場合です。
・HTML例
<img src="icon1.gif" width="130" height="55" border="0" class="menu-ico"> <p class="info">画像1の内容?</p> <img src="icon2.gif" width="130" height="55" border="0" class="menu-ico"> <p class="info">画像2の内容?</p> <img src="icon3.gif" width="130" height="55" border="0" class="menu-ico"> <p class="info">画像3の内容?</p> <img src="icon4.gif" width="130" height="55" border="0" class="menu-ico"> <p class="info">画像4の内容?</p> <img src="icon5.gif" width="130" height="55" border="0" class="menu-ico"> <p class="info">画像5の内容?</p>
※アイコン画像すべてに同じクラス名を指定しておきます。
・CSS例(初期状態で非表示にするスタイルシート)
.info {display:none;}
・jQuery例
$(function(){ $( "img.menu-ico" ).click(function() { $( this ).next(".info").toggle(); }); });
もう一つ、アイコン画像と内容のボックスを1セットにして同じ要素で囲む場合です。
・HTML例
<div class="box"> <img src="icon1.gif" width="130" height="55" border="0"> <p class="info">画像1の内容?</p> </div> <div class="box"> <img src="icon2.gif" width="130" height="55" border="0"> <p class="info">画像2の内容?</p> </div> <div class="box"> <img src="icon3.gif" width="130" height="55" border="0"> <p class="info">画像3の内容?</p> </div> <div class="box"> <img src="icon4.gif" width="130" height="55" border="0"> <p class="info">画像4の内容?</p> </div> <div class="box"> <img src="icon5.gif" width="130" height="55" border="0"> <p class="info">画像5の内容?</p> </div>
※画像と内容を囲むボックス同士に同じクラス名を、さらに表示する内容のボックス同士に同じクラス名を指定しておきます。
※CSS例は上記と同じです。
・jQuery例
$(function(){ $( "div.box" ).click(function() { $( this ).children(".info").toggle(); }); });
もう一つの質問も、今回の回答で応用すれば、達成できそうですね。
アイコンの下に、同一ページで社員の座席表がでて、名前をリンク
させてクリックすると、その下に紹介が、いまは出たら、最高です。
わからないときは、また質問するかも、しれないです。。。。。