- 締切済み
Dreamweaverにロールオーバーの挿入方法
fireworksでロールオーバーした画像（htmlと画像で書き出し)をDreamweaverのどこに挿入すればいいでしょうか？ <div class="navi"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Menu</a></li> </ul> また、書き出しはHTMLと画像でして、サイトのなかに書き出ししたのですが合ってますか?
- wknuuy
- お礼率0% (0/38)
- ホームページ作成ソフト
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
Fireworksでロールオーバーを作った場合は、書き出したHTMLが完成した状態ですから、 Dreamweaverには丸ごとコピーするか、そのHTMLファイルをベースにして作っていけばいいです。 Dreamweaverでロールオーバーを作るなら、画像を選択してビヘイビアインスペクタからスワップイメージを設定してください。 CSSスプライトを使うとか、FireworksやDreamweaverの機能を越えるものを作るなら、いわゆる手打ちしてください。
関連するQ&A
- CSSでロールオーバーのやり方を教えてください。
はじめまして。 現在CSS勉強中の者です。 初心者サイトには2つ分画像一枚にして移動させるようなことが書いてありましたが、これ以外に方法はありますでしょうか？ なければこの方法で作ろうと思うのですが、すでにオンマウス時とオフマウスの時の画像を別々に作っていますので、こちらでマウスオーバーさせる方法があればうれしいです。 htmlは以下のように記述しています。 <ul> <li><a class="home" href="index.html">home</a></li> <li><a class="menu" href="menu/index.html">menu</a></li> <li><a class="access" href="access/index.html">access</a></li> <li><a class="coupon" href="coupon/index.html">coupon</a></li> <li><a class="rec" href="menu/index.html#recom_item">rec</a></li> <li><a class="qa" href="qanda/index.html">qa</a></li> <li><a class="contact" href="contact/index.html">contact</a></li> <li><a class="recruit" href="recruit/index.html">recruit</a></li> <li><a class="company" href="company/index.html">company</a></li> <li><a class="school" href="school/index.html">school</a></li> </ul> これはとあるサイトを参考にしたのですが、なぜか<a>○○○</>の中の文字が表示されていません・・・これもわからずじまいでした。 基本的なCSSは理解しているような気がしてたんですが・・・ どうかご教授よろしくお願いいたします。
- ベストアンサー
- HTML
- cssを使ったロールオーバについて どちらの記述が良いでしょうか？
cssを使ったロールオーバについて どちらの記述が良いでしょうか？ cssでのロールオーバを使いたく、以下のようなタグに辿りつきました。 ---------------------------------------------------------------------- ul.menu { margin:0px 0px 25px 0px; padding:0px; clear:both; float:left; width:200px;} ul.menu li {float:left; width:100px; display:inline; text-indent:-9999px; overflow:hidden; ist-style:none;} ul.menu li a {display:block; width:100px; height:50px;} li.menu1 a {background:url(image/menu.gif) 0 0 no-repeat;} li.menu1 a:hover {background:url(image/menu.gif) 0 -50px no-repeat;} li.menu2 a {background:url(image/menu.gif) -100px 0 no-repeat;} li.menu2 a:hover {background:url(image/menu.gif) -100px -50px no-repeat;} <ul class="menu"> <li class="menu1"><a href="a.html" title="a">a</a></li> <li class="menu2"><a href="b.html" title="b">b</a></li> </ul> ---------------------------------------------------------------------- 表示はそれで上手く行ったのですが、overflow:hidden;を使うとIE7でスクロールバーが出ないんじゃないか？と言われ、下記のように書き直しました。 ---------------------------------------------------------------------- #menu { width:200px; height:50px; margin : 0px 0px 25px 0px ; } #menu h2 {width:100px; height:50px; margin:0; float:left;} #menu h2 a {display:block; width:100px; height:50px; background-image:url(image/menu.gif) ;} a.menu1 { background-position: 0 0 ;} a:hover.menu1 { background-position: 0 -50px ;} a.menu2 { background-position: -100px 0 ;} a:hover.menu2 { background-position: -100px -50px;} <div id="navi"> <h2><a href="a.html" class="menu1" title="a"></a></h2> <h2><a href="b.html" class="menu2" title="b"></a></h2> </div> -------------------------------------------------------- こちらでも表示は出来たのですが、後からIE7で確認した所初めのタグでもスクロールバーは表示出来ました。 とはいえやはり不安ですし後者で行こうかと思ったのですが、後者の場合も<a></a>の間に何もないことが気にかかり決めかねています。詳しい方がいらっしゃいましたら、どっちの方がいいかのアドバイス等頂けないでしょうか。よろしくお願いします。
- ベストアンサー
- HTML
- cssのulタグについて質問です。
cssの初心者ですがよろしくお願いします。 以下内容です。 #headerの中にulタグで float:left; display: inline; を使って横のメニューを作りました。 その下に幅いっぱいの画像を入れたかったので 一度 <div class="clear"></div>で区切って<div id=""></div>を使って画像を入れました。 そして、更にその下に上で使ったulタグをコピーしてclassを変更して新しい横のメニューを作ったのですが ２段目の１番左の画像だけマウスオーバーの画像だけが小さくなってしまいました。（横に短くなっている） 画像の大きさは元の画像もマウスオーバーの画像も同じ大きさです。 cssで指定している画像の大きさも間違いありません。 試しに上のメニューを<div id="header">にして <div class="clear"></div>で区切って 下のメニューを<div id="gnavi">にして分けてもその画像だけが小さくなっています。 htmlはこれです <div id="header"> <ul class="yama"> <li class="logo"><a href>ロゴ</a></li> <li class="kyouiku"><a href="">教育</a></li> <li class="syoukai"><a href="">紹介</a></li> <li class="shizen"><a href="">自然</a></li> <li class="mura"><a href="">村</a></li> </ul> <div class="clear"></div> <div class="line"></div> <ul class="rei"> <li class="name"><a href="">あいうえお</a></li> <li class="abc"></li> <li class="map"><a href="">マップ</a></li> </ul> </div> <li class="name"><a href="">あいうえお</a></li>これが問題のタグです。 文字が足りなかったのでcssの一部ですが /* rei */ #header ul.rei{ float:left; } #header ul.rei li{ float:left; display: inline; } で <li class="name"> のcssですが #header ul.rei li.name { display: block; width:295px; height:51px; } #header ul.rei li.name a { display: block; background: url(../img/name.jpg) no-repeat top left; text-indent:-9999px; height:100%; width:100%; } #header ul.rei li.name a:hover { display: block; text-indent:-9999px; height:100%; width:100%; background: url(../img/name_om.jpg) no-repeat top left; } という風にしています。 初心者のため使い方が間違っているところが多々あると思いますがよろしくお願いします。
- ベストアンサー
- CSS
- リストタグ以外でfloatしたものをセンター寄せに
下記のようにHTMLを組みました。 「.footerNav」を「float:left」して横並びにした上でセンター寄せをしたいと思いました。 しかし何をどうやってもセンター寄せになってくれません。 ちなみに各「div class="footerInner"」の幅設定はしません。 <footer> <nav> <div class="footerInner"> <h4>○○○</h4> <ul class="XXXXX"> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> </ul> </div> <div class="footerInner"> <h4>○○○</h4> <ul class="XXXXX"> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> </ul> </div> <div class="footerInner"> <h4>○○○</h4> <ul class="XXXXX"> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> </ul> </div> </nav> </footer> 調べて見ると、<div class="footerInner">～</div>の単体であれば、 センター寄せができる手段はありました。 <div class="footerInner"> <h4>○○○</h4> <ul class="XXXXX"> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> </ul> </div> しかし自分のはリストタグではなく、divタグをフロートしたもの。 リストタグではないものを「float:left」してセンタリングは可能なのでしょうか？ 何度かこの手のことにはまって、その度にいろいろな手段を試したり検索していたのですが、 検索しても見つからず、結局出来たためしがありません。 それで今回は投稿させていただきました。 ご存知の方いらっしゃいましたらご教授いただければ幸いです。
- ベストアンサー
- CSS
- ＦｉｒｅＷｏｒｋｓで作った画像をＤｒｅａｍＷｅａｖｅｒに・・
お世話になっています。 FireWorksでほぼまるまるトップページを作成して、 ボタン部分をスライスして、 シンプルロールオーバーで、マウスを乗せると色が変わる設定をしました。 FireWorksからブラウザで確認すると、ちゃんとうごきます。 書き出すときに、 ファイルの種類・・HTMLとイメージ HTML・・HTMLファイルを書き出し スライス・・スライスの書き出し を選びました。 これをDreamWeaverに読み込む前に他になにか注意することはありますか・・？DreamWeaverでは動きません・・。 DreamWeaverに読み込むときというのは、ひょっとして 書き出したときにたくさん出てきたスライス部分の 画像を配置するのでしょうか・・？ 全然見当違いのことを言ってたらすみません・・。 よろしくお願いします。
- 締切済み
- ホームページ作成ソフト
- 初心者です jQueryのマウスオーバーについて
jQueryを使った画像を使ったメニューを作成しています。 <ul class="drop2">をマウスオーバーしたときに親の位置にある画像１.gifが画像１_o.gifに 切り替わるようにしたいと思っています。 調べながら作ってみたのですが、画像の切替がうまくいきません。 parentを使わずに画像1.gifをdivで囲って指定すれば切り替わったのですが、2つ以上メニューを 作ると、他のulにマウスオーバーしたときも切り替わってしまいます。 ご教授して頂けると嬉しいです。 よろしくお願いいたします。 ■スクリプト部分 jQuery(function ($) { $('ul.drop2').mouseover(function () { // console.log('mouseover'); デバック用 var onSrc = $（this).parent('ul.drop1 a img').attr('src').replace('.gif', '_o.gif'); $（this).parent('ul.drop1 a img').attr('src', onSrc); }); $('ul.drop2').mouseout(function () { var onSrc =$（this).parent('ul.drop1 a img').attr('src').replace('_o.gif', '.gif'); $（this).parent('ul.drop1 a img').attr('src', onSrc); }); }); ■html部分 <ul class="drop1"> <li><a href="/"><img src="画像1.gif" alt="HOME" /></a> <ul class="drop2"> <li><a href="#"><img src="画像1-1.gif" alt="HOME" /></a></li> <li><a href="#"><img src="画像1-2.gif" alt="HOME" /></a></li> </ul> </li> </ul>
- ベストアンサー
- JavaScript
- CSSで横並びのロールオーバーの表示がおかしいです
知人に頼まれて、ホームページを作成中なのですが、一枚の組み合わせた画像を使い、横に5つの内容を表示してbackground-positionで表示を指定して、ロールオーバーの横並びのナビを作っています。 当方はあまり知識がないなりに、様々なサイト様を参考にしたのですが、うまく表示されませんのでご助力をお願いいたします。 症状としては、画像が横並びに5つ表示はされるものの、position: 0 0; の値の画像が5つ並んで表示されます。 オンマウスも効いていません。 使用ソフトは、HeTeMULU Creator 確認ブラウザは、FireFox5 表示したい画像は、width 190px height 60pxを5つ横に繋げた950pxの画像とそれの色違いをもう一つ用意して、加工して上下に繋げた、950px 120pxの画像です。 以下ソースです。 /*---HTML*/ <?xml version="1.0" encoding="shift_jis "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"><head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <title>###</title> </head> <body> <div id="main"> <div id="menu"> <ul> <li class="menu1"><a href="#">sample</a></li> <li class="menu2"><a href="#">sample</a></li> <li class="menu3"><a href="#">sample</a></li> <li class="menu4"><a href="#">sample</a></li> <li class="menu5"><a href="#">sample</a></li> </ul> </div> </div> </body> </html> /*---CSS*/ #menu{ width: 950px; height: 60px; margin-top: 20px; margin-bottom: 20px; padding: 0px; } #menu ul{ margin: 0px; padding: 0px; } #menu li{ width: 190px; margin: 0px; padding: 0px; float: left; text-indent: -9999px; } #menu a{ display: block; width: 100%; height: 60px; background-image: url(../img/menu001.png); background-repeat: no-repeat; .menu1 a{ background-position: 0px 0px;} .menu2 a{ background-position: -190px 0px;} .menu3 a{ background-position: -380px 0px;} .menu4 a{ background-position: -570px 0px;} .menu5 a{ background-position: -760px 0px;} #menu a:hover{ background-image: url(../img/menu001.png); background-repeat: no-repeat; .menu1 a:hover{ background-position: 0px -60px;} .menu2 a:hover{ background-position: -190px -60px;} .menu3 a:hover{ background-position: -380px -60px;} .menu4 a:hover{ background-position: -570px -60px;} .menu5 a:hover{ background-position: -760px -60px;} ご指摘を宜しくお願いいたします。
- ベストアンサー
- ブログ
- androidタブレット、モバイルで手作り辞書
Androidのスマホとタブレットでつかえる辞書を作りたいのですが、 HTML5+jquerymobileで作れるものでしょうか？ dreamweaverのHTML5＋jquerymobileの開発をセットを試してみたら、 <div data-role="page" id="page"> <div data-role="header"> <h1>Page One</h1> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="#page2l">Page Two</a></li> <li><a href="#page3">Page Three</a></li> <li><a href="#page4">Page Four</a></li> </ul> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> となっています。 この#page2をfunction.htmlに変更し、同じディレクトリにあるfunction.htmlにリンクさせようかと思ったのですが、クリックしたらloading errorと表示されました。 普通は、例えばエクセル関数辞書のように100以上の項目がある場合、100以上のHTMLファイルを多層のディレクトリに作ることで、1ページ辺りの容量を減らすと思うのですが、HTML5+jquerymobileで、一度に読む込む容量を減らすにはどうしたらいいのでしょうか？ それとも、HTML5、jquerymobileは、<div data-role="page" id="page">とが暗喩するように、ひとつのファイルを分割して読み込むのでしょうか？
- ベストアンサー
- CSS
- 横並びのメニューにならない
初心者です。 dreamweaverで、メニューを横並びにしたいのですが、縦のままです。 <div id="#navi"> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="#">お支払・送料</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div> という風に作って CSSが、 #navi { height: 30px; width: 750px; } #navi ul { list-style: none; } #navi li { display: inline; float: left; } #navi li a{ text-align: center; display:block; } としました。 どこが間違っているのでしょうか？ あるいは何か足りないのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- cssで背景を重ねることができるのでしょうか？
CSSでナビゲーションバーを作っていますが、ナビゲーションバーのボタンの一つ一つを背景画像であらわしています。ナビゲーションバー全体の背景にまた違う画像を表示させたい（ボタンが途切れた後ろにも画像があるように）のですが、そういうことは可能なのでしょうか？ちなみにＨＴＭＬは <body> <div id="navigation"> <div> <ul> <li class="linkhome"><a href="/"><span>Home</span></a></li> <li class="linkkaisha"><a href="/"><span>kaisha</span></a></li> <li class="linkdoituriq"><a href="/"><span>doituriq</span></a></li> <li class="linkwine"><a href="/"><span>wine</span></a></li> <li class="linkchugoku"><a href="/"><span>chugoku</span></a></li> <li class="linkotoiawase"><a href="/"><span>otoiawase</span></a></li> </ul> </div> </div> </body> </html> という感じで、最初のdivにz-index2を次のdivにz-index1を指定したらできると思ったのですが、表示はナビゲーションバーの後ろに表示させたい画像がまず表示され、その下にナビゲーションバーが表示されます。 重ねて表示するのはどうすればいいのでしょうか？ 質問が分かりづらくて申し訳ございません。どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
補足
回答ありがとうございます。コピーというのは具体的にはどこにコピーすればいいでしょうか？ コピーはHTMLファイルのみをコピーすればいいですか？