• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：メニュー部分をスタイルシートで画像置換するには？）

メニュー部分の画像をスタイルシートで置換する方法

このQ&Aのポイント
  • CSS初心者の方へ、メニュー部分の画像をスタイルシートを使用して置換する方法について説明します。
  • メニュー部分の画像をスタイルシートで置換することにより、同じ画像を複数のページで使う際に便利です。
  • 具体的には、スタイルシート内で背景画像を設定し、HTMLの要素に対してそのスタイルを適用する方法を使用します。
  • HTML
  • 回答数1
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
  • leap_day
  • ベストアンサー率60% (338/561)
回答No.1

こんにちは メニューボタンの使い方によってまた作り方が変わってくると思いますけど・・・ 一般的なものとしては [CSS} <head> <link rel="stylesheet" href="****.css" type="text/css"> </head><body> <div id="container"> <a href="" id="menu1">メニュー1</a> <a href="" id="menu2">メニュー2</a> <a href="" id="menu3">メニュー3</a> <a href="" id="menu4">メニュー4</a> </div> ==****.css=== #container a { display:block; width:100px; height:20px; text-indent:-999999px; background-repeat:no-repeat; } #menu1 { background-image:url(images/menu01.jpg); } #menu2 { background-image:url(images/menu02.jpg); } #menu3 { background-image:url(images/menu03.jpg); } #menu4 { background-image:url(images/menu04.jpg); } [Javascript] <head> <script type="text/javascript" src="####.js"></script> </head><body> <div id="container"> 　<img src="" id="menu0"> 　<img src="" id="menu1"> 　<img src="" id="menu2"> 　<img src="" id="menu3"> </div> ==####.js== window.onload=function() { MENU = new Array("images/menu01.jpg","images/menu02.jpg","images/menu03.jpg","images/menu04.jpg"); for(i=0;i<MENU.length;i++) { menuid = "menu"+i; document.getElementById(menuid).src = MENU[i]; } } のような感じでできると思います ****.cs、####.jsは適当に名前を付けてください

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

質問する