初心者　ロールオーバー及びイメージマップ作成

解決済

質問者：huwayuu
質問日時：2013/07/10 09:47
回答数：1件

Dreamweaveとイラストレーターを使ってホームや商品説明や質問コーナーの画像を編集していますがなかなかわからないので質問です。

１２３４　　　　　　　　　　　　　　　　　　１２３４　　　　１２３４
□□□□→　マウスを乗せたら黒く　　■□□□　や　□■□□　という感じに
白□と黒■が画像です。

という風にしたいのですがどうしたらなるのでしょうか？
画像を用意してもうまくならなくて困ってます。

分かりにくい説明ですがよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2013/07/10 10:35

　Illustratorはビットマップ(ラスター)画像を扱うソフトですからこの質問には関係ないでしょう。

Dreanweaverで出来ますが、HTMLやCSSの知識があるほうが、断然早く簡単です。

普通に
<div class="nav">
　<ol>
　　<li><a href="./1">１</a></li>
　　<li><a href="./2">２</a></li>
　　<li><a href="./3">３</a></li>
　　<li><a href="./4">４</a></li>
　</ol>
</div>
とマークアップされていたとして
div.nav ol,div.nav ol li{
list-style-type:none; /* リストマークを消す */
margin:0;padding:0;/* margin,paddinをリセット */
text-align:center;/* 中央配置 */
line-height:2em;
}
div.nav ol li{
display:inline-block;/* 行内ブロックに */
width:2em;height:2em;
position:relative;/* 以下の位置基準にするため */
margin:0 5px;
}
div.nav ol li a{text-decoration:none;}/* 下線を消す */
div.nav ol li a:after{
content:"□";/* 画像ならurl() */
position:absolute;/* 位置の指定 */
top:2em;left:0.5em;
}
div.nav ol li:hover:after{
content:"■";
}
div.nav ol li a[href="./4"]:after{
content:"☆";/* 他の図形でもOK */
}
div.nav ol li a[href="./4"]:hover:after{
content:"★";
}
とスタイルシートを書きます。
★どのような優れたWebオーサリングツールであっても、HTMLやCSSの知識は必要、というか、テキストエディタで作成する以上に必要です。
★HTMLがきちんと書けていたら、どのようにもデザインできます。
　参考→ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )は、ブラウザの表示メニューから「スタイル」を選択するとデザインが変わります。
★Dreamweaberに限らず、スタイルシートのセレクタをHTML(の構造)を読み取って提案してくれる機能はありません。

[例]
★HTML4.01strict + CSS2.1 のウェブ標準
★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
　のDATAで検証済み
★タブは＿に置換してあるので戻す。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<div class="nav">
＿＿＿<ol>
＿＿＿＿<li><a href="./1">１</a></li>
＿＿＿＿<li><a href="./2">２</a></li>
＿＿＿＿<li><a href="./3">３</a></li>
＿＿＿＿<li><a href="./4">４</a></li>
＿＿＿</ol>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2012-08-10</dd>
＿＿</dl>
＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>