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

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

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

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

A 回答 (3件)

こんにちは。


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

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

補足です。



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

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

この回答への補足

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

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

補足日時:2002/02/03 00:21
    • good
    • 0

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&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;
// テーブルタグを探して、1番目のテーブルを取得する
var rows = $("table")[0].rows;
// 列を1つずつ取り出す
$.each(rows, function(i) {
cells = rows[i].cells;
// 行を1つずつ取り出す
$.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&Aランキング

おすすめ情報