まったくの素人ですが、お教えください。
以下のようなテーブルにそれぞれ画像とリンクをつけようとしています。
<table>
<tr>
<td rowspan="3"><a href="hoge.html"><img src="hoge.jpg"></a></td>
<td><a href="a.html"><img src="a.jpg"></a></td>
</tr>
<tr><td><a href="b.html"><img src="b.jpg"></a></td></tr>
<tr><td><a href="c.html"><img src="c.jpg"></a></td></tr>
</table>
a.jpg/b.jpg/c.jpg(以下、abc) がそれぞれメニューバーの項目で、
hoge.jpgを大きなメインの画面にしたいと思っています。
このとき、abcのいずれかをマウスオーバーするたびに、それぞれのイメージがhogeのエリアにスワップされ、かつそれぞれの項目のリンク(a.html/b.html/c.html)がhoge.htmlと置き換わるようなjavascriptを作りたいと考えています。
イメージのスワップだけならいくつも見つけることができたのですが、イメージとリンクが両方ともスワップされるようなものを、見つけることができませんでした。もしそのようなjavascriptがweb上にありましたら、お教えください。
No.2ベストアンサー
- 回答日時:
じゃ、データを隠しておいておいて、それをひっぱってきましょうか
<script>
window.onload=function(){
var tags=document.getElementsByTagName("img");
for(var i=0;i<tags.length;i++){
var cn=tags[i].className;
if(cn!=""){
var img=document.getElementById(cn);
if(img){
tags[i].img=img;
hideimg=tags[i].nextSibling;
while(hideimg){
if(hideimg.className=="hide") break;
hideimg=hideimg.nextSibling;
}
tags[i].hideimg=hideimg;
tags[i].onmouseover=function(){
this.img.src=this.hideimg.src;
this.img.parentNode.href=this.parentNode.href;
};
}
}
}
}
</script>
<style>
.hide{
display:none;
}
</style>
<table>
<tr>
<td rowspan="3"><a href="hoge.html"><img src="hoge.jpg" id="swap1"></a></td>
<td><a href="a.html"><img src="a.jpg" class="swap1"><img src="a-hoge.jpg" class="hide"></a></td></tr>
<tr><td><a href="b.html"><img src="b.jpg" class="swap1"><img src="b-hoge.jpg" class="hide"></a></td></tr>
<tr><td><a href="c.html"><img src="c.jpg" class="swap1"><img src="c-hoge.jpg" class="hide"></a></td></tr>
</table>
No.1
- 回答日時:
どのくらい汎用性が必要かわからないのである程度調整しておきました
hoge側のidと選ぶ側のclassを同じものを付けると動きます。
<script>
window.onload=function(){
var tags=document.getElementsByTagName("img");
for(var i=0;i<tags.length;i++){
var cn=tags[i].className;
if(cn!=""){
var img=document.getElementById(cn);
if(img){
tags[i].img=img;
tags[i].onmouseover=function(){
this.img.src=this.src;
this.img.parentNode.href=this.parentNode.href;
};
}
}
}
}
</script>
<table>
<tr>
<td rowspan="3"><a href="hoge.html"><img src="hoge.jpg" id="swap1"></a></td>
<td><a href="a.html"><img src="a.jpg" class="swap1"></a></td>
</tr>
<tr><td><a href="b.html"><img src="b.jpg" class="swap1"></a></td></tr>
<tr><td><a href="c.html"><img src="c.jpg" class="swap1"></a></td></tr>
</table>
この回答への補足
早速のお返事ありがとうございます!!
ただ、ちょっとこちらの質問に不備がありました。
上の例でhoge.jpgが300x225、abcが200x75というサイズを持っていて、すき間の無いテーブルの中に置かれている状況です。
(abcが右側の縦に3つ並んで、左にhoge.jpgがある)
このとき、例えばa.jpgにマウスオーバーすると、hoge.jpgと「同じ大きさの画像(a-hoge.jpgとします)がhoge.jpgのエリアに表示され」かつ「リンクもhoge.htmlからa.htmlに変更される」というようなjavascriptにしたいのです。
質問が言葉足らずで申し訳ありません。
なにとぞよろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- SEO googleサーチコンソールで、重複URLが多数発生、その修正方法について 2 2023/06/23 16:15
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
<td>の中を移動する、外部J...
-
idの振り直しについて
-
テーブルのtdの中に、重複避け...
-
クリックごとに文字色が交互に...
-
プルダウンメニューを表の中に...
-
追加ボタンを押した際に ok ボ...
-
onchangeイベントを強制的に発...
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
javaScriptの変数をJavaの変数...
-
tableの任意行にfocusをあてる
-
value内に変数を入れたい
-
特定<table>内の<td>の色を変える
-
hiddenのvalueの値を変えたい
-
VBscriptの配列変数をJavascrip...
-
チェックボックスのON/OFFでVal...
-
onclickをEnterキーでも行いたい
-
フォームのPOSTデータをサブウ...
-
プルダウン選択を変更すると、...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
selectのonChangeが動作しません
-
テーブルの行数を可変長にした...
-
画面表示とともに、テーブルの...
-
javascriptで<table>背景色の取得
-
javascriptでクリックするごと...
-
テキストエリアに入力した改行...
-
JQueryでテーブルの行を追加し...
-
カレンダーに印を付けたい
-
クリックごとに文字色が交互に...
-
javascriptで画像をテーブルに...
-
任意に文字数指定のできる原稿...
-
idの振り直しについて
-
tbody要素のinnerHTMLが書き換...
-
マウスが重なったら画像の上に...
-
jQueryでの親の親の隣の子供の...
-
JavaScript 保守性の高めたい 2
-
指定のテキストをクリックする...
-
複数画像のロールオーバー
-
Javascriptでテーブルタグの座...
おすすめ情報