TABLEを利用したリンクの方法

解決済

  • 質問者：takeyoshi
  • 質問日時：2002/02/01 07:34
  • 回答数：3件

　TABLEのTD内全てをリンク範囲とし、カーソルを上に持っていくと背景色が変わるようなソースを探しているのですが、なかなか見つけることが出来ません。ＭＳＮニュースのメニュー部分のようなものを探しています。

　参考ページ・MSNニュース
　http://news.msn.co.jp/articles/snews.asp?w=110824

　御存知の方、お手数ですが宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

このQ&Aに関連する最新のQ&A

「HTML5 画像」に関するQ&A： HTML5の宣言で画像に隙間が出来るのは何故？

さらに表示

「ニュース MSN」に関するQ&A： 【祝】 MSN産経ニュースが亡くなりました。

「英語 ソース」に関するQ&A： ウースターソースを英語で何と言う？

A 回答 (3件)

No.3ベストアンサー

こんにちは。


画像での切り替えが難しい（ひとつの外部jsファイルで管理したい）という場合には

１．http://popup.jscentral.com/
２．http://www.dhtmlcentral.com/projects/coolmenus/
などが解説もついてて良いかと思います。
少し難解かもしれせんが、おそらくご希望のソースに一番近いかと。
・・・ただし、英語のサイトです・・・。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： starjet
  • 回答日時：2002/02/01 08:25

補足です。



http://shopside.fc2web.com/homepage5.html

ここのページなんかはどうでしょう？？

この回答への補足

starjetさん、御回答有難う御座います。
CSSの応用は試してみたのですが、どうしてもTD全体をリンク指定することが出来ませんでした（＾＾；
作っているサイトが頻繁にメニュー項目の拡張が必要になるので、OnMouseoverとOnMouseoutを利用した画像切り替えは厳しく、ＭＳＮニュースのような演出に魅せられたのですが・・・もう少し探してみようかと思います。

　お手数お掛けしてしまい申し訳ありませんでした<(_ _)>

補足日時：2002/02/03 00:21
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： starjet
  • 回答日時：2002/02/01 08:13

A:hover { color:○○○; text-decorationion:none;background-color:○○○}


を応用してどうにか……ならないかも。。ごめんなさい。

テーブルの大きさをちっちゃめにして文字がそのなかいっぱいに表示できるようにすれば、MSNのとこみたいに
なるかも。。

http://crafts.jp/~momojam/hp.htm#link
↑ここから引っ張ってきました。
    • good
    • 0
    • 件
通報する
この回答へのお礼

お返事が遅れてしまい申し訳ありませんでした。
お礼の意味も込めて完成したものをお見せしたかったのですが、
時間が足りず、結局、習得しきれませんでした。

なんとか今後も勉強して、これをものにできるように努力します。

御両人、御対応有難う御座いました。

通報する
お礼日時：2002/02/09 04:30

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するQ&A

関連するカテゴリからQ&Aを探す

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

Q質問する（無料）

他の専門家の回答をチェック

このQ&Aと関連する良く見られている質問

Qhttp://news.com.com/　みたいなナビゲーションは？

http://news.com.com/　のサイトの上部にあるような、マウスを持っていくとその下にサブメニューがポンポンと出てくるような動きは、どのような仕組みでやっているのでしょうか？
ヒントだけでも教えてください。お願いします。

Aベストアンサー

CSS と JavaScript を組み合わせています。
（CSS や JavaScript を無効にして、動作の違いを確認。）

たぶん、CSS で要素の表示するしないを設定し、
JavaScript でそれを制御しているのでしょう。

他の回答も見る

Q特定内の
の色を変える

お世話になります。
特定<table>内の<td>の色を変える
<table id="abc">
<tr>
<td>あああああ</td>
<td>いいい</td>
<td>ううう</td>
</tr>
</table>
<table>にはidを定義します。
その<td>タグにはidを定義していません。
このとき、あああああ、いいい、うううの表示色を
<input type="button" value="色を変える" onClick="ChngColor()">

なんてことで、
マウスをクリックすることにより変更できないものでしょうか。
よろしくお願いいたします。

Aベストアンサー

#1さんへの補足より――

> functio ChngColor(){
> var Obj=document.getElementById('abc');
> Obj=document.getElementsByTagName("td");
> for (var i=0;i<Obj.length;i++){
> Obj.style.color="red";
> }
> }

特に3行目がいけない。こう変えましょう。
（あと、詰めすぎは見づらいので、適当に空白を入れました）

function ChngColor() {
var Obj1 = document.getElementById('abc');
var Obj2 = Obj1.getElementsByTagName("td");
for (var i = 0; i < Obj2.length; i++) {
Obj2[i].style.color = "red";
}
}

他の回答も見る

QTable内TDの子要素を移動させたいのですが・・

初心者的な質問になるかもしれませんが、宜しくお願いします。
唐突ですが、こんなTable付きのHTMLがあります(ちょっと省略してます)。

<DIV>.....</DIV> ← (*)

<Table>
<TR>
<TD>　　←　(1)
<SCRIPT ........</SCRIPT>
<A HREF="">........</A>
<LI>
<DIV class ..... </DIV>
<DIV class ..... </DIV>
<DIV class ..... </DIV>
<LI>
</TD>
<TD>　　←　(2)
<LI>
<DIV class ..... </DIV>
<DIV class ..... </DIV>
<DIV class ..... </DIV>
<LI>
</TD>
<TD>　　←　(3)
<LI>
<DIV class ..... </DIV>
<DIV class ..... </DIV>
<DIV class ..... </DIV>
<LI>
</TD>
</TABLE>

(1)は複数の子要素があり、(2)と(3)はLI要素(ただし、その中に複数要素がある)です。
この(1)～(3)のTDの子要素部分だけを抽出し、(*)の
DIVタグの真下に移動させるようなjquery文を作りたいのですが、
http://d.hatena.ne.jp/replication/20120113/1326382090
等の記事を参考に、

var cells, tblcell;
// テーブルタグを探して、１番目のテーブルを取得する
var rows = $("table")[0].rows;
// 列を１つずつ取り出す
$.each(rows, function(i) {
cells = rows[i].cells;
// 行を１つずつ取り出す
$.each(cells, function() {
// tdタグの値を書き換える
tblcell = $(this).detach();
console.log(tblcell);
// tdタグのスタイルシートを書き換える
$('div').after(tblcell);
});
});

このやり方だとrowの性質上、DIVの下へTD付きでそのまま来てしまいます。
そうではなく、TD直下のHTMLだけをそのままDIVの直下へつなげるように放り込みたいのですが、
中々うまいやり方がみつかりません・・・

なにか、よい方法はございませんでしょうか？

初心者的な質問になるかもしれませんが、宜しくお願いします。
唐突ですが、こんなTable付きのHTMLがあります(ちょっと省略してます)。

<DIV>.....</DIV> ← (*)

<Table>
<TR>
<TD>　　←　(1)
<SCRIPT ........</SCRIPT>
<A HREF="">........</A>
<LI>
<DIV class ..... </DIV>
<DIV class ..... </DIV>
<DIV class ..... </DIV>
<LI>
</TD>
<TD>　　←　(2)
<LI>
<DIV class ..... ...続きを読む

Aベストアンサー

なんでもかんでも jQuery をもちださなくても。
script 要素も移動する必要がありますか？というかそこに必要なのか？
テキストノードは適当に何かの要素で囲んでね。
（＊）の手前の要素には、id="piyo" を追加！
そのうち、insertAfter を使った回答が…

function i (e) {
　this.parentNode.insertBefore (e, this);
}

function hoge () {
　var c = document.querySelectorAll ('body > table:nth-of-type(1) td > *');
　var b = document.querySelector ('#piyo').nextElementSibling;
　
　Array.prototype.forEach.call (c, i, b);
}

hoge ();

他の回答も見る

QFlash Playerのような展開表示をJS/ASP/PHPで…。

いつもお世話になっております。

本日は、リンクボタンをクリックすると、そのリンクの下に他のメニュー等が展開するようなものについて、下記のサイトに近いものをjavascript、もしくはphpやaspなどで製作できないかと思い、ご質問させていただきます。

http://www.adobe.com/jp/products/flash/

adobe社の公式サイト（Flash Playerのページ)なのですが、こちらのページ左側にある"30日無償体験版"の下にある
『本製品を含む～…』から『購入方法』と並んである数個のリンクと同様の動作を
javascript、もしくはphpやaspなどで再現できないかと思っております。

滑らかな表示等は無理だとは思いますが、なにか方法がございましたら
ご教授ください。無理or非常に難しい、とご判断いただける場合その一言だけでも投稿いただけますとうれしいです。
よろしくお願いいたします。

Aベストアンサー

aspならAjaxControlToolkitだかにCollapsibleだかAccordionだかのコンポーネントがあるので、それを利用すれば比較的簡単にできたりします。

JavaScriptもAccordionでググれば似たような事やってるサンプルが出てくるかと。

他の回答も見る

Q[javascript]

HTML形式の文字列から</TDと</TRで始まるタグ以外を消去したいのですが、以下の記述ではうまくいきませんでした。

test = test.replace(/<\/T[^RD][^>]*>/g,"");

どのように記述すればよいでしょうか？

Aベストアンサー

すみません、考えすぎた。
否定読みはできたのでこんな感じで？

<script>
var test="<tr><td>aaa</td><th>bbb</th></tr>";
test=test.replace(/<(?!\/t[dr]).*?>/gi,"");
alert(test);
</script>

他の回答も見る
ページトップページトップ

Q質問する（無料）

人気Q&Aランキング

おすすめ情報