- 締切済み
画像を分割したい
いつもお世話になってます。 アイフレームのサイトを作ろうと思い画像を制作したのですが 画像を分割するのを忘れて一枚画像にしてしまいました。 リンクを付けたりするのはクリッカブルマップに出来ますが アイフレームにする為にはテーブルタグを使わなければならず 一枚画像を分割しなければならなくなりました。 しかし何度やってもずれてしまい、上手く分割できません。 そこで質問です。 画像をうまく分割する方法を教えてください。
- miyahime69
- お礼率30% (3/10)
- 画像・動画・音楽編集
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞限られた環境のみを今回はターゲットにしている為、 であっても、tableは表を示す要素(element)であって、配置をするためのものではありません。 たとえ作っても、訪問者があなたと同じOS,ブラウザ,バージョンがまったく同じわけではないです。 いずれにしても、画像を分割してtableで配置する必要はありません。 下記サンプルは、画像は一枚しか使ってません。 body部分は <body> <h1>メニュー</h1> <div> <ul id="nav"> <li id="pa1"><a href="p1.html">１ページへ</a></li> <li id="pa2"><a href="p2.html">２ページへ</a></li> <li id="pa3"><a href="p3.html">３ページへ</a></li> </ul> <iframe src="./foo.html" width="150" height="300" scrolling="auto" frameborder="1" title="テスト"> こちらの <A href="foo.html">関連文書</A> を御覧ください。 </iframe> </div> </body> </html> というシンプルなものです。 具体的な手持ちのサンプルを・・・ 1) 見やすくするため、タブ(\t)を全角スペース２個に置換してあります。 タブに戻してテストすること 2) 適当な画像(w600×h400)をbackground.jpgとして同じ場所に保存する いちおう、 Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) でチェック済みです。・・確認してください。・・・ ここから <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="MADE" href="mailto:hoge@hoge.com"> <style type="text/css"> <!-- body>div,ul#nav ul#nav li{margin:0px;padding:0px;} body>div{ position:relative;width: 600px;height:400px; background: black url(./background.jpg); } ul#nav{position:relative;display:block; margin-left:auto;margin-right:auto; } ul#nav li{position:absolute; display:block;list-style:none; width: 120px;height: 30px;text-align:center;} ul#nav li a:link{display:block; width:100%;height:100%;border-style: outset; border-width: 2px 6px 6px 2px;border-color: gray;} ul#nav li a:focus,ul#nav li a:hover{color: yellow;} ul#nav li a:active{border-style: inset;padding-left:2px; border-width: 6px 2px 2px 6px;color:blue;padding-top:2px;} ul#nav li#pa1{left: 30px;top: 20px;} ul#nav li#pa2{left: 400px;top: 120px;} ul#nav li#pa3{left: 30px;top: 220px;} ul#nav li#pa1 a:active{background-image:url(./background.jpg); background-position: -28px -18px;} ul#nav li#pa2 a:active{ background-image:url(./background.jpg); background-position: -398px -118px;} ul#nav li#pa3 a:active{background-image:url(./background.jpg); background-position: -27px -218px;} iframe{position:absolute;width:200px;top:50px;left:180px} --> </style> <link rel="START" href="../index.html"> </head> <body> <h1>メニュー</h1> <div> <ul id="nav"> <li id="pa1"><a href="p1.html">１ページへ</a></li> <li id="pa2"><a href="p2.html">２ページへ</a></li> <li id="pa3"><a href="p3.html">３ページへ</a></li> </ul> <iframe src="./foo.html" width="150" height="300" scrolling="auto" frameborder="1" title="テスト"> こちらの <A href="foo.html">関連文書</A> を御覧ください。 </iframe> </div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
画像を分割する必要はありません。 ＞アイフレームにする為にはテーブルタグを使わなければならず これは誤った方法です。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 非視覚系メディアでのレンダリングに際して問題を起こすことがあるため、単に文書内容を整形する目的だけで表を用いるべきでない。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )］より 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから Webページのプレゼンテーションを向上させようという志は素晴らしいものではあったが、そのためのテクニックには思わぬ副産物があった。こうしたテクニックは、特定の人々、特定の時代状況でしか成り立たず、すべての人々、すべての時代状況において成り立つものではないのだ。こうしたテクニックの例を挙げよう。 ・・・【中略】・・・ ・ テキストを画像に置き換えて表現する。 ・余白制御のために画像を用いる。 ・ページレイアウトの目的で表を用いる。 ・・・【中略】・・・ こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より 明らかに、HTMLの目的に反しています。 2.2 HTMLとは何か? ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2 ) 具体的にどうしたしたいかを簡単なイメージ図でも上げてみてください。
関連するQ&A
- クリッカブルマップとアイフレームを並べる
初めまして。こんにちは。 クリッカブルマップとアイフレームを 並べる方法を教えてください。 ↓こんな風にです ＿＿＿＿＿＿＿ ＿＿＿＿＿＿＿＿ C-map ｜ ｜ アイフレーム ｜ ｜ ｜ のメニュー画像｜ ｜＿＿＿＿＿＿＿｜ ￣￣￣￣￣ どうしても平行に並ばないのですが・・。
- 締切済み
- HTML
- 画像を分割して並べる？
ウェブサイトで、見かけるのですが、大きな画像を いくつかに分割して、複数の小さな画像がうまく配置され、 １つの大きな画像になっているものがあります。 なぜ、そのようなことをしているのでしょうか？ 私もホームページを作っているのですが、 大きな画像の場合は、こうゆうことをしたほうが良いのでしょうか？ そして、その方法ですが、 1：（分割の方法） 画像を、マウスでの範囲選択で、いくつもに分割すれば、微量のズレも出るはずです。 2：（表示の方法） 分割できたとして、サイトに表示するには、 テーブルタグかなにかで、並べるのでしょうか？ 解説と共に、1と2の方法をレクチャーしてください。
- ベストアンサー
- HTML
- クリッカブルマップ＋カーソル変更
私のサイトでは、カーソルを画像に変更して使っていて、リンクに触れるとカーソル画像が変わる、っていう設定にしているんですが、クリッカブルマップで指定したリンクではカーソルが変わりません。 どうすればクリッカブルマップのリンクもカーソルをかえられますか？ ちなみに、カーソルの指定はスタイルシートの外部指定でやっていますが、クリッカブルマップではないリンクでは、ちゃんとカーソルが変わります。
- 締切済み
- HTML
- 画像のスライスiモードサイトでも使える？
携帯サイトを作っています。携帯ではマウスがないのでクリッカブルマップは使えないと思いますが1枚の画像に複数のリンクを貼っているサイトを見たことがあります。画像の切り方からしてスライスしていると思われますが携帯でHTMLに書き出すためにはどうしたらいいのでしょうか？
- ベストアンサー
- HTML
- 入れ替えた画像をクリッカブルマップにしたい
スクリプトで変更した画像をクリッカブルマップにしたいのですがよくわかりません。 入れ替える為のスクリプトとクリッカブルマップについては単体では、ほぼ理解できていますが、それを結びつける知識がありません。 果たして、スクリプトで実現できるものなのでしょうか。
- ベストアンサー
- JavaScript
- クリッカブルマップとインラインフレームを組み合わせたい
こんにちは。自分でも検索してしらべたのですが、どうしてもわからないので、質問させていただきます。 現在、ページを製作中なのですが、タイトルのとおり、クリッカブルマップ画像の上にインラインフレームを組み合わせる方法がわからず、困っています。 透過したインラインフレームを、女の子の画像に重ねて表示してあります。この女の子の画像にメニューが書いてあるので、それをクリッカブルマップにして、インラインフレームにリンクを表示したいと思っています。 画像の上にインラインフレームを重ねて表示するのには成功しましたが、クリッカブルマップのタグを書き加えると、画面が真っ白になってしまいます。 クリッカブルとインラインを組み合わせたデザインのサイトは結構あるので参考にしようとしてみましたが今いちわからなくて・・・ 回答よろしくお願いします。
- 締切済み
- HTML
- クリッカブルマップで画像と画像の間に隙間が出来てしまう
現在、ホームページを作ってみようと思い作成しているのですが、クリッカブルマップを使い、画像の特定の場所からリンクをさせようと思っているのですが、 クリッカブルマップを使っている画像Aと同じくクリッカブルマップを使っている画像Bを上下に隙間なく並べようとすると数pxほど隙間が開いてしまいます。 単なる画像データを上下に並べた時にはぴったりとくっついていたので、マージンやパディングの設定がおかしい訳ではないだろうと思っているのですが、これはクリッカブルマップを追加した事によって何か追加でスタイルシートを設定してあげなければいけないのでしょうか？ それとも、クリッカブルマップを使った時はどうしても隙間を埋める事ができないのでしょうか？ 1つの画像でやればいいのですが、HPのデザイン上・管理上の都合(画像データの差し替え頻度)どうしても分けて使いたいと思っています。 ご回答お願いします。 該当部分のHTMLソースです。 <img src="top.jpg" alt="ようこそ" usemap="#map1" width="600" height="200" /> <map name="map1"> <area shape="rect" coords="0,0,200,200" href="auto.html" /> </map> <img src="top.jpg" alt="ようこそ" usemap="#map2" width="600" height="200" /> <map name="map2"> <area shape="rect" coords="400,0,600,200" href="auto.html" /> </map>
- ベストアンサー
- HTML
- クリッカブルマップとロールオーバー
現在、クリッカブルマップを使ってINDEXを制作しようとしています。 INDEXは通常の内容のサイトと、季節限定のサイトの分帰路として使いたいと思っています。 現在、普通にクリッカブルマップの機能を使えていますし、それぞれキチンと移動してくれます。 なので、視覚効果として２つリンクを内包した画像があって、それぞれカーソルが重ねられた時に、任意の画像に一方だけが変化するようにしたいのですが、上手くいきません。 どうしたら、それぞれを使うことができるのでしょうか？ また、サイトの公開はハロウィンの二週間前にはおこないたいので、できる限り早く答えて頂きたいです。
- ベストアンサー
- その他（インターネット・Webサービス）
- 背景固定画像にイメージマップ
今、ホームページ・ビルダーver６でＨＰを作ってるんですが、 アイフレームの外に画像を置いて、その画像をイメージマップにしてメニューリンクを張りたいです。 普通に画像の挿入で入れた画像にはイメージマップが出来るんですが、 背景固定で背景として設置した画像にはイメージマップが出来ません。 どうやったら、背景固定で設置した画像にイメージマップでリンクを入れられるんでしょうか？？ 是非とも教えて下さい！！！！！
- ベストアンサー
- HTML
- クリッカブルマップとテーブルの間に隙間が…
クリッカブルマップとテーブルタグを ・・・・・クリッカブルマップ画像・・・・・ テーブル左（画像貼り付け） テーブル右 という配置で併用したところ、マップ画像とテーブル左の間に隙間ができてしまいます。 border="0" cellpadding="0" cellspacing="0"などを入れてみても変化がありません。 左テーブルに貼る画像はマップ画像の続き（例：マップ画像の左下に花の花弁部分、テーブル画像に茎部分、といった感じです）なので、どうしても隙間なく並べたいのですが、それは可能でしょうか？ 解る方がいらっしゃいましたら教えてください。 よろしくお願いいたします。
- ベストアンサー
- HTML
補足
具体的な図をＵＰしようとしたら何故か弾かれて出来ないのです。 すでにエンコード再トライが２０回目に突入しました(汗) 目的がどうというよりは知り合い限定のサイトを 今作っているので複数の方に見せるものではありません。 まず入口からパスワード制の予定です。 限られた環境のみを今回はターゲットにしている為、 二つ目の引用は当てはまらないものと思います。