- ベストアンサー
画像の上に画像リンクを貼る方法
初めまして。今、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ありがとうございます。 色々試してみます！ 返信が遅くなってすみません。 ご回答ありがとうございました！
関連するQ&A
- 教えて下さい！リンクボタンの画像をオンマウスで変える方法
今HPを縦フレームで左ページにメニュー、右ページにtarget指定でページが切り替わるようにしています。 左ページのメニューはgif画像のボタンなのですが、画像に触れると画像が変化し、画像からマウスを放すと元の画像に戻るようにしたいのです。 １．マウスで画像１に触れると画像２に変化（マウスを放すと画像２は１にもどる） ２．クリックした時に一瞬画像２がへこみ、離すと画像２に戻る。 ３．当然同時に右ページも変わる。 ４．右のページがくりっくしたメニュー画像のリンク先の間は画像２のまま変化しない。 ５．そのほかのメニュー画像をクリックすると画像２は画像１にもどる。 というのはどうすればいいのでしょうか？ リンクボタンをへこませる方法はどこかで見たのですが、 それを今のhtmlのどこに書けばいいのかもわかりません。 ちなみに、外部のcssがあります。テンプレートを加工しているので。 宜しくお願いします！
- ベストアンサー
- HTML
- マウスが上にあるリンク
HPビルダー7です。 マウスが上にあるリンクで文字の色が変わりません。 表示→スタイルシートマネージャー→追加→スタイルの設定→HTMLタグの候補→マウスが上にあるリンクで 設定しますが変わりません。 カラーと背景では「前景色」と「後景色」だけで、文字のバックの色は変化しますが、文字そのものの変更が出来ません。 文字の色そのものをマウスを置いたら変わる方法をご教授下さい。HPビルダー7のソフト内でお願いします。
- ベストアンサー
- その他(ソフトウェア)
- 画像でリンクを張る方法
ドロップシッピングのページを勉強してますが、画像でリンクを張る方法が理解できません。 リンクを貼りたい画像の前に<a href="http://www.～～">を挿入して、</a>を挿入すると、その画像をクリックすると指定したURＬへ飛ぶとあります。 もう一つ違う方法で、画像の上で右クリック「対象ファイルを保存」でダウンロードしたのですが、貼り付けかたが解かりません。 パソコン初心者で解かりませんのでよろしくお願いします。
- ベストアンサー
- ブログ
- サイトの画像にマウスを乗せただけでリンクの雰囲気を出すには
今、サイトの画像の下に、「クリックすると拡大」という意味の文字を入れて、画像をクリックすると、大きなサイズの画像が立ち上がるようにしています。 この文字をやめて、画像の上にマウスが来たときに、なにかいかにも「ここリンクするよ～」とアピールするみたいに変化をさせたいのです。 なにかいいイベントをご存知の方がいたら教えていただきたいのですが。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 画像をリンクにしたい
携帯電話のホームページで（パソコンでももちろん見れます） 画像をリンクにしたいのですが、そのホームページで画像を載せるには画像を登録して#12345といったものに変換してから載せます。 <A HREF="リンク先"><IMG SRC="画像"></A> この画像のところには何を入れたらいいのでしょうか？ 初心者で乱文すいません 汗
- ベストアンサー
- ブログ
- 画像について…
HP制作を独学でしてるのですが、困っています。 よく、画像の上でクイックすると大きい画像になる所って ありますよね？ あれってどういう風にしたらいいんでしょうか？ 大きいサイズをアップして、縮小してHPに張りリンクで元の画像の所に 行くと言う方法しか浮ばないんですが…？ お詳しい方、アドバイスお願いします！
- ベストアンサー
- その他([技術者向] コンピューター)
- リンク画像をホバーアニメーションで暗くする方法
html、css、js等でリンクの設定された画像を、マウスオーバーでゆっくりと暗くなりテキストが表示される方法はありませんでしょうか。 ・マウスオーバーでゆっくり画像が暗くなり、テキストが表示される ・画像を押すとリンク先へ移動する ・マウスを画像から離すと元に戻る もし上記のものが難しければ、ゆっくりと別の画像に入れ替わる方法はありませんでしょうか。 どなたかご教授お願い致します。
- ベストアンサー
- HTML
- 画像リンクの反応が無くなって困ってます
既に他の方が同じ用な内容の質問をしているんですが、 YouTube等を見る時に画像をクリックするとリンク先に行っていたんですが、最近になってから画像リンクの上にマウスポインタを当ててもただの画像の用にポインタが何の変化もしません。 右クリックで繋げようとしても項目の中に 開くから対象を印刷までが灰色文字になってクリックすることが出来ません。 こういう場合どうすればいいのか教えてください
- 締切済み
- Windows XP
お礼
重ねることができました！ 返信が遅くなってすみません。 ご回答ありがとうございました！