- ベストアンサー
画像の上に画像リンクを貼る方法
初めまして。今、HPを制作中です。 壁紙ではない画像の上に、マウスを乗せると変化する画像リンクを作りたいのですが、可能でしょうか？ できれば初心者にも分かりやすいような方法があればいいのですが…（汗） よろしくお願いします。
- ow1
- お礼率100% (29/29)
- ホームページ作成ソフト
- 回答数3
- ありがとう数8
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
私もあまり知識はないのですが、 ページ内にテーブルタグを置くんです。 テーブルタグの背景を画像に変えると、テーブルタグの数値で画像をIMGタグの用に移動させられます。そして、テーブルの上にIMGタグで画像を張れば、画像の上に画像を載せられます。 この方法なら、画像を重ねまくれます。 タグの見本っぽいのを置いておきますね。 <table background="背景画像名" wigth="横幅" height="縦幅" border="0" （ETC...）> <tr> <td> <a herf="リンク先"> <IMG="リンク画像"> </a> </td> </tr> </table> ↑の<tr>内を任意の数値に書き換えればいいと思います。
その他の回答 (2)
- future-boy
- ベストアンサー率25% (1/4)
１．まずは<head></head>の中にscriptコードを入れてください <script type="text/JavaScript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> ２．次に<body></body>の中に次のコードを入れます。 <a href="（ここにクリック後のURLを入れる）" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','（ここに最初の画像の名前を拡張子まで入れる。例 hogehoge.gif）',0)"><img src="（ここに切り替わる画像の名前を拡張子まで入れる。例 hogehoge.gif）" alt="あああああ" name="Image1" border="0" id="Image1" /></a> ３．以上です。
お礼
いろんな方法があるんですね… 難しそうです；が やってみます！ 返信が遅くなってすみません。 ご回答ありがとうございました！
- 三郷北 M君（@mkun55555）
- ベストアンサー率47% (43/90)
■マウスオーバーで画像を変えるには <img src="最初の画像ファイル名" onmouseOver="this.src='差し替える画像ファイル名'" onmouseOut="this.src='最初の画像ファイル名'" /> ★this.src=の指定で、画像のソースを変えます。 ★onmouseOverのようなイベントハンドラについては、参考URL１ ★this.srcの所はいろいろ応用が可能です。参考URL２を見てください。 ■画像にリンクをつけるなら、上記を<a>タグで囲む。 <a href="リンク先アドレス"><img ・・・ /></a>
お礼
参考URLありがとうございます。 色々試してみます！ 返信が遅くなってすみません。 ご回答ありがとうございました！
お礼
重ねることができました！ 返信が遅くなってすみません。 ご回答ありがとうございました！