土曜日, 9月 26, 2020

HTML_CSS_09　
画像配置とリンクにalt設定

画像配置とリンク、そしてalt設定にロールオーバー設定を行います。

上が、前回までの状態です。<div>設定が完了し、配置が決定したので画像を配置していきます。修正箇所は2つ。<div id="side_menu">と<div id="main_picture">です。

■画像追加前のside_menu
----------------
<div id="side_menu">
<div class="menu_button">
</div>
<div class="menu_button">
</div>
<div class="menu_button">
</div>
<div class="menu_button">
</div>
</div>
----------------

追加箇所はブルーで表示
■画像追加後のside_menu
----------------
<div id="side_menu">
<div class="menu_button">
<img src="links/home.gif"
alt="トップぺージへのリンクボタン">
                         <!-- <img src ="画像ファイル">で配置画像を指定
                         <alt = "説明文">で画像の説明 -->
</div>
<div class="menu_button">
<img src="links/cake_01.gif"
alt="cake01へのリンクボタン">
                         <!-- <img src ="画像ファイル">で配置画像を指定
                         <alt = "説明文">で画像の説明 -->
</div>
<div class="menu_button">
<img src="links/cake_02.gif"
alt="cake02へのリンクボタン">
                        <!-- <img src ="画像ファイル">で配置画像を指定
                        <alt = "説明文">で画像の説明 -->
</div>
<div class="menu_button">
<img src="links/cake_03.gif"
alt="cake03へのリンクボタン">
                        <!-- <img src ="画像ファイル">で配置画像を指定
                        <alt = "説明文">で画像の説明 -->
</div>
----------------

設定後のindex.htmlは以下の様になります。

続けてメイン画像を配置します。

■画像追加前のmain_picture
----------------
<div id="main_picture">
</div>
----------------

追加箇所はブルーで表示
■画像追加後のmain_picture
----------------
<div id="main_picture">
<img src="links/home.jpg">
    alt="象のイメージキャラクター画像">
                           <!-- <img src ="画像ファイル">で配置画像を指定
                           <alt = "説明文">で画像の説明 -->
</div>
----------------


追加箇所はブルーで表示
■リンクとロールオーバー設定後のside_menu
----------------

<div id="side_menu">

<div class="menu_button">

<a href="index.html">    <!-- リンクを設定する<a>タグの開始 -->

<img src="links/home.gif"

onmouseover="this.src='links/home_over.gif'"

onmouseout="this.src='links/home.gif'"

                <!-- onmouseover="マウスが近づいたときに表示する画像を指定"

                onmouseout="マウスが放れたときに元の画像に戻す" -->

alt="トップぺージへのリンクボタン">

</a>    <!-- <a>タグの終了 -->

</div>

<div class="menu_button">

<a href="menu01.html">    <!-- リンクを設定する<a>タグの開始 -->

<img src="links/cake_01.gif"

onmouseover="this.src='links/cake_01_over.gif'"

         onmouseout="this.src='links/cake_01.gif'"

                 <!-- onmouseover="マウスが近づいたときに表示する画像を指定"

                onmouseout="マウスが放れたときに元の画像に戻す" -->

alt="cake01へのリンクボタン">

</a>    <!-- <a>タグの終了 -->

</div>

<div class="menu_button">

<a href="menu02.html">    <!-- リンクを設定する<a>タグの開始 -->

<img src="links/cake_02.gif"

onmouseover="this.src='links/cake_02_over.gif'"

onmouseout="this.src='links/cake_02.gif'"

                <!-- onmouseover="マウスが近づいたときに表示する画像を指定"

                onmouseout="マウスが放れたときに元の画像に戻す" -->    

                          alt="cake02へのリンクボタン">

</a>    <!-- <a>タグの終了 -->

</div>

<div class="menu_button">

<a href="menu03.html">    <!-- リンクを設定する<a>タグの開始 -->

<img src="links/cake_03.gif"

onmouseover="this.src='links/cake_03_over.gif'"

onmouseout="this.src='links/cake_03.gif'"

alt="cake03へのリンクボタン">

</a>    <!-- <a>タグの終了 -->

</div>

----------------

これでマウスカーソルを近づけるとが゛卯が変わり、話すと元の画像に戻ります。まそれぞれのボタン画像にはそれぞれのページのhtmlファイルへのリンクが設定されました。またこれでindex.htmlファイル派感性となります。ただし、リンク先のページはまだ作成していないので、続きは次回に行います。

以下はindex.htmlファイルの最終状況です。

<!-- index.html -->

<!DOCTYPE html>

<html lang="ja">

<head>

<title>森のお菓子屋さん</title>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="rule.css">

</head>

<body>

<div id="main_box">

<div id="header">

<img src="links/title.png"

alt="森のお菓子屋さんのタイトルロゴ">

</div>

<div id="side_menu">

<div class="menu_button">

<a href="index.html">

<img src="links/home.gif"

onmouseover="this.src='links/home_over.gif'"

onmouseout="this.src='links/home.gif'"

alt="トップぺージへのリンクボタン">

</a>

</div>

<div class="menu_button">

<a href="menu01.html">

<img src="links/cake_01.gif"

onmouseover="this.src='links/cake_01_over.gif'"

onmouseout="this.src='links/cake_01.gif'"

alt="cake01へのリンクボタン">

</a>

</div>

<div class="menu_button">

<a href="menu02.html">

<img src="links/cake_02.gif"

onmouseover="this.src='links/cake_02_over.gif'"

onmouseout="this.src='links/cake_02.gif'"

alt="cake02へのリンクボタン">

</a>

</div>

<div class="menu_button">

<a href="menu03.html">

<img src="links/cake_03.gif"

onmouseover="this.src='links/cake_03_over.gif'"

onmouseout="this.src='links/cake_03.gif'"

alt="cake03へのリンクボタン">

</a>

</div>

</div>

<div id="content">

<div id="message">

<h2 class="main_text">大自然に囲まれた素敵なお店です</h2>

<p class ="sub_text">素材を吟味した自然の味わいを大切にした<br>

マスター自慢のパンとお菓子をお楽しみ下さい。</p>

</div>

<div id="main_picture">

<img src="links/home.jpg"

alt="象のイメージキャラクター画像">

</div>

</div>

</div>

</body>

</html>

<!-- index.html -->

投稿者 時刻:
ラベル: , , ,