- 締切済み
アメブロのフリースペースにメニュー
アメブロのフリースペースにオンマウスで画像が変わるメニューを作りたいのです。 http://ameblo.jp/pigg-rules/ ↑ここ↑の左上の方にあるようなメニューです。 「はじめに」、「ピグのマナー」、「ピグのルール」等々・・・・・・です。 普通にこんな感じで記述すると、使用できない語句を含んでいるとかで表示されません。 <img src="menu1.png" border="0" onMouseOver="this .src='menu2.png'" onMouseOut="this .src='menu1.png'"> どうしたらいいのか教えて下さい。
- cococomail2
- お礼率35% (28/80)
- ブログ
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- susy-xx
- ベストアンサー率69% (339/485)
関連するQ&A
- VBA WEB上の画像をクリック
VBAでWEB上の画像にあるリンクをクリックしたいのですが、 うまくいきません。 WEB上のソースは下記の様になっています。 <a href="******" target="_top"><img src="/image/menu/5.png" border="0" alt="あああああ" onMouseOver="chgImg('/image/menu/4.png',this)" onMouseOut="chgImg('/image/menu/5.png',this)" ></a> この部分をクリックさせ、ページを移動させたいのですが、 どうすればいいでしょうか？
- ベストアンサー
- Visual Basic
- mapでロールオーバー
以下のようにmapでロールオーバーをしようとしたのですが、機能しません。 <div align="center"><img src="images/main.png" alt="" usemap="#map1" border="0" /></div> <map name="map1"> <area href="taku.html" alt="" shape="rect" coords="766,0,996,69" onmouseover="this.src='images/mainleft1_on.png'" onmouseout="this.src='images/mainleft1.png'" src="images/mainleft1.png" alt="" border="0" /> <area href="taku2.html" alt="" shape="rect" coords="766,70,996,137" onmouseover="this.src='images/mainleft2_on.png'" onmouseout="this.src='images/mainleft2.png'" src="images/mainleft2.png" alt="" border="0"/></map> 全体の画像main.png の上にボタンmainleft1.png mainleft2.png がロールオーバーするようにしたいんですができないんでしょうか？
- ベストアンサー
- HTML
- メニュー作成方法を教えて下さい。
JavaScriptとHTMLを使ってＨＰを作成しています。onmouseoverとonmouseoutを利用して（トップメニューにマウスを置くとサブメニューが出るという）メニューを作りたいんですが、上手くいきません。 トップメニューにマウスを置くとサブメニューーは出ますが、トップメニューにマウスを置いてもいない時に、サブメニューの画像が×となって出ています。この×が表示されないようにするにはどうすればいいのかわかりません。 どうすればいいのでしょうか。 教えて下さいm(__)m function showMenu(selfObj){ document.menu1.src="bana/albumb.jpg"; document.menu2.src="bana/mib.jpg"; document.menu3.src="bana/picb.jpg"; if(selfObj==0){ document.menu0.src="bana/prr.jpg"; } if(selfObj==1){ document.menu1.src="bana/albumr.jpg"; } if(selfObj==2){ document.menu2.src="bana/mir.jpg"; } if(selfObj==3){ document.menu3.src="bana/picr.jpg"; } } function hideMenu(){ document.menu0.src="bana/prb.jpg"; document.menu1.src=""; document.menu2.src=""; document.menu3.src=""; } <a href="4.html" onMouseout="hideMenu();" onMouseover="showMenu(0);" class="navi0"> <img src="bana/prb.jpg" alt="自己紹介" name="menu0" id="menu0" border color=""> </a><br /> <a href="5.html" onMouseout="hideMenu();" onMouseover="showMenu(1);" class="navi1"> <img src="" alt="アルバム" name="menu1" id="menu1" border color=""></a><br /> <a href="6.html" onMouseout="hideMenu();" onmouseover="showMenu(2);" class="navi2"> <img src="" alt="ミッキー" name="menu2" id="menu2" border color=""> </a><br /> <a href="7.html" onmouseout="hideMenu();" onmouseover="showMenu(3);" class="navi3"> <img src="" alt="写真" name="menu3" id="menu3" border color=""> </a>
- ベストアンサー
- HTML
- マウスオーバーの合体
マウスオーバーのプルダウンメニューと マウスオーバー画像変更スクリプトを組み合わせることは可能なのでしょうか？ イメージとしては所期画面に画像Ａがあり、マウスを載せると画像Ａが画像Ｂになり、 更に画像Ｂの下にプルダウンメニューが表示されるイメージです。 尚、現在は以下の組み合わせがうまくいかない為（不可能？） 個々にスクリプトを記載しておきます。 ↓↓↓↓↓↓マウスオーバーのプルダウンメニュー↓↓↓↓↓↓ <html> <head> <script language="JavaScript"><!-- vType = ["hidden","visible"]; function pdMenu(mName) { Menu = document.all[mName].style; Menu.visibility = vType[Menu.visibility.indexOf("hidden") + 1]; } // --></script> </head> <body> <img src="main.png" onMouseover="pdMenu('Menu')"><br> <div id="Menu" style="visibility:hidden" onMouseout="pdMenu('Menu')"> <a href="http://www.yahoo.co.jp/" ><img src="sub01.png" border="0"></a><br> <a href="http://www.google.co.jp/"><img src="sub02.png" border="0"></a><br> </div> </body> </html> ↑↑↑↑↑↑マウスオーバーのプルダウンメニュー↑↑↑↑↑↑ ↓↓↓↓↓↓マウスオーバー画像変更スクリプト↓↓↓↓↓↓ <img border="0" src="main.png" onmouseover="this.src='main2.png'" onmouseout="this.src='main.png'"> ↑↑↑↑↑↑マウスオーバー画像変更スクリプト↑↑↑↑↑↑
- 締切済み
- JavaScript
- cssヘッダー画像の下に配置したい画像が重なります
css勉強し始めた初心者なので、説明やソースなどめちゃくちゃだと思いますが、教えてください。 固定ヘッダー（常に画面の上にヘッダーがあるように）を作成し、その下に画像を配置したのですが、ヘッダーの下にその画像が入り込んでしまいました。ヘッダーの下に重ならず配置するにはどうすればよいでしょうか？ よろしく御願いいたします。 body内に <div id="header"> <h1><a href="/" title="website"></a></h1> <img src="img/b01.gif" width="108" height="68" border="0" onmouseover="this.src='../ao/img/b01-.gif" onmouseout="this.src='../ao/img/b01.gif"> <img src="img/b02.gif" width="88" height="68" border="0" onmouseover="this.src='../ao/img/b02-.gif'" onmouseout="this.src='../ao/img/b02.gif'"> <img src="img/b03.gif" width="59" height="61" border="0" onmouseover="this.src='../ao/img/b03-.gif'" onmouseout="this.src='../ao/img/b03.gif'"> <img src="img/b04.gif" width="50" height="68" border="0" onmouseover="this.src='../ao/img/b04-.gif'" onmouseout="this.src='../ao/img/b04.gif'"> <img src="img/b05.gif" width="39" height="68" border="0" onmouseover="this.src='../ao/img/b05-.gif'" onmouseout="this.src='../ao/img/b05.gif'"> <img src="img/b06.gif" width="80" height="68" border="0" onmouseover="this.src='../ao/img/b06-.gif'" onmouseout="this.src='../ao/img/b06.gif'"> <img src="img/b07.gif" width="51" height="68" border="0" onmouseover="this.src='../ao/img/b07-.gif'" onmouseout="this.src='../ao/img/b07.gif'"> <img src="img/b08.gif" width="47" height="68" border="0" onmouseover="this.src='../ao/img/b08-.gif'" onmouseout="this.src='../ao/img/b08.gif'"> <img src="img/b09.gif" width="54" height="68" border="0" onmouseover="this.src='../ao/img/b09-.gif'" onmouseout="this.src='../ao/img/b09.gif'"> <img src="img/b10.gif" width="125" height="68" border="0" onmouseover="this.src='../ao/img/b10-.gif'" onmouseout="this.src='../ao/img/b10.gif'"> </div> <h2><img src="img/panichi.gif" alt="TOP" width="700" height="450" class="centering" /></h2>
- ベストアンサー
- HTML
- cssファイルへリンクできないです。
今回からCSSファイルでホームページを作り出している超初心者なので、 専門用語の使い方など間違っているかも分かりませんが知恵を貸してください。 Dreamweaverを使用して、上部に固定ヘッダーのソースをhtmlファイル内に打ち込んで作業をしてます。ヘッダーの下部分の作業をし始めてDreamweaverのデザイン部分の画面で、ヘッダー画像の下に載せる画像や文字が入り込んで隠れてしまうので、作業がしにくいです。 そのため固定ヘッダーデータをcssファイルにした方がいいのかなと思い、 リンクさせようとしたのですが反映されないです。リンクした方がいいのか、その他より効率がいい方法があるのか分からないのでよろしく御願いいたします。 htmlファイルには <body> <link rel="stylesheet" type="text/css" href="banner.css"> と入力してます。 cssファイルには <div id="header"> <img src="img/b01.gif" width="108" height="68" border="0" onmouseover="this.src='../house/img/b01-.gif" onmouseout="this.src='../house/img/b01.gif"> <img src="img/b02.gif" width="88" height="68" border="0" onmouseover="this.src='../house/img/b02-.gif'" onmouseout="this.src='../house/img/b02.gif'"> <img src="img/b03.gif" width="59" height="61" border="0" onmouseover="this.src='../house/img/b03-.gif'" onmouseout="this.src='../house/img/b03.gif'"> <img src="img/b04.gif" width="50" height="68" border="0" onmouseover="this.src='../house/img/b04-.gif'" onmouseout="this.src='../house/img/b04.gif'"> <img src="img/b05.gif" width="39" height="68" border="0" onmouseover="this.src='../house/img/b05-.gif'" onmouseout="this.src='../house/img/b05.gif'"> <img src="img/b06.gif" width="80" height="68" border="0" onmouseover="this.src='../house/img/b06-.gif'" onmouseout="this.src='../house/img/b06.gif'"> <img src="img/b07.gif" width="51" height="68" border="0" onmouseover="this.src='../house/img/b07-.gif'" onmouseout="this.src='../house/img/b07.gif'"> <img src="img/b08.gif" width="47" height="68" border="0" onmouseover="this.src='../house/img/b08-.gif'" onmouseout="this.src='../house/img/b08.gif'"> <img src="img/b09.gif" width="54" height="68" border="0" onmouseover="this.src='../house/img/b09-.gif'" onmouseout="this.src='../house/img/b09.gif'"> <img src="img/b10.gif" width="125" height="68" border="0" onmouseover="this.src='../house/img/b10-.gif'" onmouseout="this.src='../house/img/b10.gif'"> </div> と入力してます。 よろしく御願いいたします。
- ベストアンサー
- HTML
- オンマウスで画像を変えたい。
オンマウスで画像を変えたいのですが、 ------------------------------------------ <img src="画像１URl" onmouseover="this.src='画像２URl';" onmouseout="this.src='画像１URl';"> ------------------------------------------ や、 ------------------------------------------ <script> var src1="http://img.yahoo.co.jp/images/phonebook/jp_pb.gif" var src2="http://i.yimg.jp/images/news/yjnews.gif" </script> <img src="http://img.yahoo.co.jp/images/phonebook/jp_pb.gif" onMouseOver="this.src=src2" onMouseOut="this.src=src1" /> ------------------------------------------ など。 どれを使っていいか分からず困っています。 これぞ、っていうタグがあったらよろしくお願いします。
- ベストアンサー
- HTML
- ページを開くと”セキュリティ保護～”がでる
ページをひらくと、ツールバーの下に添付画面の確認がでます。 <A href="xxx.html"><IMG src="image/aaa.png" width="191" height="103" border="0" onmouseover= "this.src='image/bbb.png'" onmouseout="this.src='image/aaa.png'"></A> マウスのポイントで、画像が切り替わるようにしている上記の部分が原因ですが、 （この部分を削除すると表示されなくなります）、この機能を有効にして、かつ 確認のバーが表示されなくすることはできないのでしょうか？
- ベストアンサー
- CSS
- アコーディオンメニューが開いている間の親の色変更
jQueryでアコーディオンメニューを作成中です。 雛形を参考に形にはなりましたが、開いている状態でどの親メニューに属する子メニューなのかがわかりづらいため、子を表示している間の親画像を変更したいです。 参考URLのデモページで言いますと、親メニューの背景がオンマウスで黒からオレンジになります。しかし、子メニューを選択しようとマウスが親から外れると黒に戻ってしまいます。これを子が表示されている間、オレンジの状態にしたいのです。 現在私が作成中のメニューもオンマウスのときのみ色が変わるような状態になっています。web初心者のため、やさしく具体的に教えていただければ幸いです。 参考にしたURL http://blog-imgs-48-origin.fc2.com/j/q/u/jqueryintro/accordion.html 以下、HTMLの記述です。 文字数の関係上いろいろと省いたため、回答の際に足りない部分があれば追加いたしますのでお教えください。 お力をお貸しください。よろしくお願いいたします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <link rel="stylesheet" type="text/css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript" ></script> <script src="js/jquery-1.7.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ /* 開く・閉じる*/ $("ul.menu").hide(); $("ul.menu2").hide(); $("div#title").click(function(){ $("div#title").not(this).next().hide('fast'); $(this).next().slideToggle('fast'); }); $("#menu2 #title2").click(function(){ $(this).next().slideToggle('fast'); }); }); </script> </head> <body> <div style="text-align:left; width: 220px; height: 40px;"> <!--HOME--> <div> <ul><a href="#"><img src="imgs/a01.gif" width="200" height="40" onMouseOver="this.src='imgs/a02.gif'" onMouseOut="this.src='imgs/a01.gif'"></a> </ul> </div> <!--MENU1--> <div id="title"><img src="imgs/b01.gif" width="200" height="40" onMouseOver="this.src='imgs/b02.gif'" onMouseOut="this.src='imgs/b01.gif'"></div> <ul class="menu"> <li><a href="#"> <img src="imgs/c01.gif" width="220" height="40" onMouseOver="this.src='imgs/c02.gif'" onMouseOut="this.src='imgs/c01.gif'"></a></li> <li><a href="#"> <img src="imgs/d01.gif" width="220" height="40" onMouseOver="this.src='imgs/d02.gif'" onMouseOut="this.src='imgs/d01.gif'"></a></li> </ul> <!--MENU2--> <div> <ul><a href="#"><img src="imgs/e01.gif" width="200" height="40" onMouseOver="this.src='imgs/e02.gif'" onMouseOut="this.src='imgs/e.gif'"></a> </ul> </div> </div> </body> </html>
- 締切済み
- JavaScript
- document.writeln内でマウスオーバー
現在、HPを制作中なんですがページ数が増えサイドメニューを javascriptで一括管理するようになりました。（SEO的に不利なのを承知の上） しかし、ナビゲーションの画像を↓ <img src='/img/sonota-1.png' hspace='0' vspace='0' onmouseover='this.src='/img/sonota-2.png'' onmouseout='this.src='/img/sonota-1.png'' width='240' height='65' alt='その他'> のように記述していたのですがdocument.writelnで、これを表示させるとマウスオーバー時の 画像がマウスを重ねても表示されません。 要は、「document.writeln」内で「onmouseover='this.src='/img/sonota-2.png'」使うにはどうしたらいいのでしょうか。
- 締切済み
- JavaScript
