No.1ベストアンサー
- 回答日時:
<html>
<body>
<img src="" id="a1"><hr>
<div id="a2"></div><hr>
<a href="#" onMouseOver="chg('img0.jpg','なんと、もうしましょうか')">aaaa</a>
<a href="#" onMouseOver="chg('img1.jpg','あぁ~入院かぁ~')">bbbb</a>
<a href="#" onMouseOver="chg('img2.jpg','気が重いなぁ~')">cccc</a>
<script>
function chg(i,m){
document.getElementById('a1').src=i;
document.getElementById('a2').innerHTML=m;
}
</script>
</body>
</html>
No.2
- 回答日時:
マウスの位置に説明(テキストでも画像でも)を表示するサンプル。
<html>
<head>
<title></title>
<style type="text/css">
#description div{
position:absolute;
border:dashed thin black;
padding:0.1em 0.2em;
background-color:white;
}
</style>
<script type="text/javascript">
document.onmouseover=function(e){
if(! e) e=window.event;
var s = e.srcElement||e.target;
var m=document.getElementById('description').getElementsByTagName('div');
for(var i=0;m[i];i++){
if(s.nodeName=='A' && m[i].title == s.href){
m[i].style.display = '';
m[i].style.left = (e.clientX+5)+'px';
m[i].style.top = (e.clientY+5)+'px';
} else m[i].style.display = 'none';
}
}
</script>
</head>
<body>
<p>
質問サイトの<a href="http://oshiete.goo.ne.jp/">教えてgoo</a>
は<a href="http://okwave.jp/">OKWave</a>
のプラットフォームを利用しています。
</p>
<div id="description">
<div style="display:none" title="http://oshiete.goo.ne.jp/">
<img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif"><br>
<em>教えてgooの説明文</em>
</div>
<div style="display:none" title="http://okwave.jp/">
<img src="http://okwave.jp/images/logo_top.gif"><br>
<em>OKWaveの説明文</em>
</div>
</body>
</html>
No.3
- 回答日時:
この回答へのお礼
お礼日時:2008/06/25 21:16
ありがとう御座います。
工夫で素人でも複雑なHPが作れることが分かりました。
いろいろ勉強させていただきます。今後も宜しくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- WordPress(ワードプレス) ワードプレスで、左寄せ画像と文字を横並びにせず、画像の下に文字を表示される方法を教えてください 1 2022/04/24 11:06
- その他(ブログ) シーサーブログのタイトル文字位置とブログ説明文字位置の変更方法 2 2022/09/22 20:55
- ヤフオク! ヤフオクに出品したいのですが、タグを実行出来ません。 2 2022/09/16 12:36
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- Chrome(クローム) googleアカウントのアイコンをローマ字または漢字で表示させたい 2 2023/05/06 22:25
- HTML・CSS 要素の幅をいろんな写真の幅に合わせたい。 1 2022/07/25 20:11
- WordPress(ワードプレス) 投稿記事のタイトル上部に「広告」の文字が表示される 1 2022/06/12 09:36
- Photoshop(フォトショップ) 画像編集ソフトPhotopeaのツールバーなどの文字の大きさを変える方法を教えてください。 1 2023/02/25 19:09
- その他(プログラミング・Web制作) このWEB用語、WEB文章、意味が分かりますか? 理解できない人が多いようなんですが・・・ 7 2022/10/22 09:13
- ビジネスマナー・ビジネス文書 【大至急】æの上に点をつけた発音記号の表示方法 1 2022/04/01 20:56
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
背景色を一定時間ごとにランダ...
-
javascriptでURLにマウスオーバー
-
[急ぎ] videoタグで埋め込んだm...
-
タブで開いてさらにタブ内をア...
-
javascriptでpostした値が取得...
-
jQueryでシンプルドラッグドロ...
-
プルダウンとチェックボックス...
-
ダブルクォーテーションが消え...
-
<前 次> のようなリンクを見...
-
【jquery】スクロールで背景画...
-
jqueryを使って無駄なspanタグ...
-
displayの状態を取得したい
-
jTweetsAnywhereでハッシュタグ...
-
iframe内のリンクが飛ばないの...
-
取得した要素がインライン要素...
-
htmlの記述で link rel=styles...
-
画像の上に画像リンクを貼る方法
-
スライダーを実装した場合、ペ...
-
文字を固定したいのですが…
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
IFRAMEの表示/非表示を切り替え...
-
タブで開いてさらにタブ内をア...
-
変数名をどのようにつけるのが...
-
クリックで色変更後に既に変更...
-
表示・非表示のスクリプトで、...
-
HTMLとJavaScriptで作ったタイ...
-
console.log結果をhtmlで表示し...
-
jQueryでクリックされた要素のi...
-
HTMLタグに複数のクラスを設定...
-
指定したパスが現URLに含まれて...
-
iframe内のリンクが飛ばないの...
-
背景色を透明化
-
テキストエリア内の一部の文字...
-
変数内容をHTML内で表示する方法
-
classの中の<a>タグにidを追加
おすすめ情報