こんにちは、javascript初心者です。
現在、Dreamweaver CS4でサイトを作っています。
以下のような構成になっており、menuの画像をオンマウスすると、ロールオーバーして画像の色が変わるようにしています。
(javascriptはDreamweaverが自動生成しています)
▼ココカラ ------------------------------------------
<head>
<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>
</head>
<body>
<div id="menu">
<a href="a.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menua','','a2.jpg',1)"><img src="a.jpg" alt="a" name="menua"></a>
<a href="b.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menub','','b2.jpg',1)"><img src="b.jpg" alt="b" name="menub"></a>
<a href="c.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menuc','','c2.jpg',1)"><img src="c.jpg" alt="c" name="menuc"></a>
<a href="e.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menud','','d2.jpg',1)"><img src="d.jpg" alt="d" name="menud"></a>
</div>
<div id="submenu">挨拶文</div>
<div id="main"></div>
<div id="footer"></div>
</body>
</html>
▲ココマデ ------------------------------------------
このメニューのオンマウスですが、ロールオーバーの動作は残したまま、submenu部分の挨拶文を各ページのサブメニューに差し変えることは可能でしょうか?
(aのメニューをオンマウスすると画像の色が変わり、aのサブメニューがsubmenuに表示される等)
同じような事例を見つけたのですが、
http://oshiete.goo.ne.jp/qa/4651643.html
こちらは画像が1箇所だったので、初心者の私では応用の仕方が分かりませんでした。
現在のjavascriptに追加する形でもまったく違うものでも良いですので、ご教授いただけると助かります。
よろしくお願いいたします。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
回答がないみたいなので…
>submenu部分の挨拶文を各ページのサブメニューに
>差し変えることは可能でしょうか?
「各ページのサブメニュー」がどこにあるのか不明だし、質問のタイトルは「テキスト変更」となっているので、何をどうしたいのかわかりませんが…
>まったく違うものでも良いですので
とのことなので、勝手に空想して違うタイプを。
(HTMLの構成は勝手に想像したものなので、ご質問の内容と合っているのか不明)
* メニュー(?)の画像は「○○.jpg」が「○○2.jpg」と入れ替わるルールと仮定。
スクリプトオフの環境では動きません。(あたりまえだけど)
(以下全角空白は半角に)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
body { padding:3px; }
ul.menu, ul.menu li ,ul.submenu, ul.submenu li
{ list-style-type:none; padding:0; margin:0 }
ul.menu .submenu
{ display:none; }
//-->
</style>
<script type="text/javascript">
<!--
/*@cc_on@*/
document./*@if(1)attachEvent('on'+@else@*/addEventListener(/*@end@*/'mouseout', function(evt){
var e, t = evt./*@if(1)srcElement@else@*/target/*@end@*/;
var r = evt./*@if(1)toElement@else@*/relatedTarget/*@end@*/;
if(check(t)) t.src = t.src.replace(/2\.jpg$/, ".jpg");
if(check(r)){
r.src = r.src.replace(/\.jpg$/, "2.jpg");
while(r && !/(^| )submenu( |$)/.test(r.className)) r = r.nextSibling;
if(r){
e = document.getElementById("submenu");
while(e.firstChild) e.removeChild(e.firstChild);
e.appendChild(r.cloneNode(true));
}
}
function check(e){
if(!e || e.tagName != "IMG") return false;
while(e && !/(^| )menu( |$)/.test(e.className)) e = e.parentNode;
return !!e;
}
}, false);
//-->
</script>
</head>
<body>
<ul class="menu">
<li><img src="a.jpg" alt="a">
<ul class="submenu">
<li>menu1_sub1</li>
<li>menu1_sub2</li>
<li>menu1_sub3</li>
</ul>
</li>
<li><img src="b.jpg" alt="b">
<ul class="submenu">
<li>menu2_sub1</li>
<li>menu2_sub2</li>
<li>menu2_sub3</li>
</ul>
</li>
<li><img src="c.jpg" alt="c">
<ul class="submenu">
<li>menu3_sub1</li>
<li>menu3_sub2</li>
<li>menu3_sub3</li>
</ul>
</li>
</ul>
<div id="submenu">挨拶文??</div>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【javascript で動的に a タグ...
-
ネストされたチェックボックス...
-
どの<li><a> が押されたか判別...
-
多階層ドロップダウンのスマホ...
-
文字と数字が混在する要素のsor...
-
JavaScriptのクッキーによるリ...
-
javascriptで、クリックしたら...
-
複数の画像をランダム(シャッ...
-
javascriptでEnterキーをtabキ...
-
jQueryセレクタ/複数要素の指...
-
javascriptで正規表現の検索が...
-
【jQuery】hoverしたn秒後にイ...
-
同一ページ内で、任意の文字列...
-
jQueryで、リンクURLの一致を確...
-
アコーディオン自動開閉メニュ...
-
クリックした<a>タグのみにClas...
-
MAX関数を使ってからLEFT JOIN...
-
javascriptで毎月替わる画像
-
HTMLで条件分岐はできますか?
-
HTMLですCSSです 画像のように...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
クリックした<a>タグのみにClas...
-
JQueryタブのアクティブ アン...
-
javascriptでEnterキーをtabキ...
-
「jQuery」アコーディオンメニ...
-
【jQuery】遅延実行(タイムラ...
-
ネストされたチェックボックス...
-
【javascript で動的に a タグ...
-
jquery ドロップダウンメニュー...
-
文字と数字が混在する要素のsor...
-
Jquery の slide.toggle で要素...
-
【jQuery】hoverしたn秒後にイ...
-
チェックボックスに入っている...
-
クリックで表示、非表示するメ...
-
同一ページ内で、任意の文字列...
-
オンマウスで画像ロールオーバ...
-
javascriptで、クリックしたら...
-
PHPでログインフォーム
-
<li>タグの順番を入れ替える方法
-
jQuery タブメニューへのダイ...
おすすめ情報