イメージマップと画像のスライスについて

このQ&Aのポイント
  • イメージマップと画像のスライスについてのメリットやデメリット、SEOへの影響などについて教えてください。
  • イメージマップと画像のスライス、どちらが良いのか迷っています。追加変更やHTML管理の手間を考えると、イメージマップの方が便利なように思えますが、SEO上の不利な点はありますか?
  • イメージマップでhover時に変化をさせることは可能でしょうか?もし不可能な場合、スクリプトでマップエリアの座標を取得して描画する方法はありますか?
回答を見る
  • ベストアンサー

イメージマップと画像のスライスについて

できればイメージマップで作業したいのですが 画像をスライスしてリンクを張るほうがいいのでしょうか? SEOで不利な点などあるのでしょうか? いちおう自分なりに調べてみたのですが知らない事も あるのではないかと思うので、両者メリットデメリットなど よろしければ教えてください。 なぜイメージマップかというと追加変更するかもしれないので スライスしなおす事や、画像やHTMLの管理のことを考えて 手間を掛けたくないからです。 (素人が変更することも考慮してFlashは使わないのを前提にしています。) あとイメージマップでhover時に変化をさせたい・・・・ というのは不可能なのでしょうか? (最悪スクリプトでマップエリアの座標を取得して描画とかも できそうなのですが・・・)

noname#163110
noname#163110
  • HTML
  • 回答数1
  • ありがとう数2

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

 HTMLの最も重要な基本は文書構造に従って正しくマークアップするこどてす。SEOというものが存在するなら、それはまさにこれを意味しています。  たとえば、それがナビゲーションリンクでしたら、 <ul class="nav">  <li><a href=""><img alt="トップ"></a></li>  <li><a href=""><img alt="製品"></a></li>  <li><a href=""><img alt="サポート"></a></li>  <li><a href=""><img alt="コンタクト"></a></li> </ul>  ※HTML5なら、<nav>という要素がある。<ul class="nav">を<nav>に変更する。  そのうえで、スライスした画像をスタイルシートで並べればよいでしょう。  イメージマップほ使うときも、画像を見めないプラットフォーム--もちろんサーチエンジンも---のためにきちんとナビゲーションを書いておけばよいです。 したがってきちんとマークアップされていれば、イメージマップだろうが、画像スライスだろうがSEO的には大差ないでしょう。  もちろん、一枚の画像をまったくスライスせずにリンクを並べることもできます。(四角に限られますが)・・そのほうが良いかも・・最も楽ですしね。 【資料】読んでおくべき仕様書の該当部分 14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) 【引用】____________ここから ユーザエージェント及び著者は、グラフィックが得られない場合やユーザエージェントがグラフィックにアクセスできない場合のために、グラフィック系イメージマップに関する代替テキスト内容を提供する必要がある。 例えば、ユーザエージェントは、altテキストを用いてグラフィック系イメージマップの位置にテキストリンクを生成してよい。 こうしたリンクは、キーボード入力や音声入力など、様々な方法でアクティブにできる。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Objects, Images, and Applets in HTML documents( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/objects.html#h-13.6 )]より

noname#163110
質問者

お礼

回答ありがとうございます 最後に行き着いたのが四角に限られるリンク・・・だったのですが 日本地図の各県を・・・ということなのでマップかスライスにしようと しています。 サイトの紹介ありがとうございます。 時間をつくってじっくり読んでみます。

関連するQ&A

  • fancyboxにイメージマップを付けたい

    早急に解決しなければいけない問題なのですが、どうしてもわからず途方にくれています。 どなたか助けていただけませんでしょうか。 fancyboxで表示したイメージ画像にイメージマップを付け、リンクを飛ばしたいと思っています。 https://gist.github.com/2972293 上記のサイトを参考にして一時は上手く行ったのですが、 いくつかの画像にそれぞれ個別のリンクを設定しようとしたところ、同じリンク先にしか飛ばない事に気付きました。 #Mapを増やせばいいのかなと思ったのですが(#Map2や#Map3など) 自分で書いても上手くいきませんでした。 どうすれば複数の画像に別々のリンク先を設定するようにできるでしょうか。 ご回答宜しくお願いします。 一応自分で書いたhtmlを載せておきます。 ----------------------------- <script type="text/javascript"> $(function() { $(".fancybox").fancybox({ padding:0, margin:0, onComplete: function() { $('#fancybox-img').attr('usemap', '#Map'); } }); }); </script> <a href="images/test.jpg" class="fancybox"><img src="images/test.jpg" alt="イメージ" width="138" height="111" /></a> <map name="Map" id="Map"> <area shape="rect" coords="317,347,547,364" href="http://yahoo.co.jp/" target="_blank" /></map> <a href="images/test2.jpg" class="fancybox"><img src="images/test2.jpg" alt="イメージ" width="138" height="111" /></a> <map name="Map" id="Map"> <area shape="rect" coords="317,347,547,364" href="http://google.co.jp/" target="_blank" /></map>

  • イメージマップで画像変え

    イメージマップで作成したリンクボタンを使って別の場所の画像を変えることはできるのでしょうか? またイメージマップを使っている画像を上の方法で変えることはできますか? ↓のはためしに作っているプログラムですがうまく動きません。 <IMG SRC="picture1" WIDTH="500" HEIGHT="271" BORDER="0" usemap="#picture1" NAME="picture1"> <MAP name="picture1"> <a href="#" onMouseOver="document.picture2.src=btn.src;return true" onMouseOut="document.picture2.src=picture2.src;return true"> <AREA shape="rect" coords="365,62,373,70" ALT="ボタン"></a> </map>

  • イメージマップのhoverについて

    イメージマップのhoverで困っています。 以下のようなJavaとHTMLで実装しているのですが、メニューhoge2 は問題なくhoverできるのですが、 イメージマップを使ったメニューhoge1がうまくいきません。 IEだとhoverするのですが、chromeではhoverしません。 【Javaスクリプト】 <script type="text/javascript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> 【HTML】 <ul> <!-- メニュー hoge1 --> <li><img src="hoge.jpg" border="0" alt="hoge1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu1','','hoge_hover.jpg',1)" name="menu1" usemap="#prdlink" /> <map name="prdlink"> <area shape="rect" coords="20,40,75,80" href="./product/hoge1.html" alt="hoge1" /> <area shape="rect" coords="80,40,134,80" href="./product/hoge2.html" alt="hoge2" /> </map> </li> <!-- メニュー hoge2 --> <li><a href="top.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu2','','top_hover.jpg',1)"> <img src="top_off.jpg" alt="top" name="menu2" /></a> </li> </ul> なにぶん、前任者のソースを見よう見まねで修正しており、知識もないためご教示いただければと思っております。

    • ベストアンサー
    • HTML
  • イメージマップをクリックしたら枠がでてしまいます。

    <area shape="rect" coords="288,1,429,195" href="index.html" alt="ホーム"> このように画像にイメージマップでエリア設定したのですが、クリックするとイメージマップの枠がオレンジ色で表示されてしまいます。 CSSでborder:none;を適応させているんですが、枠が消えません。 普通の画像の枠は表示されません。イメージマップだけです。 どうしたら消えるでしょうか? よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • クリッカブルマップで切り替えた先の画像に部分リンク

    javaスクリプトを使ってクリッカブルマップで画像差し替えをしています。(下記コード) イメージでいうとボタン(1)(2)(3)とエリアAで成る一枚の画像の、ボタン(1)(2)(3)の箇所にマウスオンをすると画像が切り替わり、エリアAにそれぞれ違う説明が表示される(ように見える)・・・というものをJavaスクリプトを使って作りました。 この、切り替わった後のエリアAに表示された説明内に、更にクリッカブルマップを設定しリンクを貼りたいのですが、方法がわかりません。 詳しい方、教えてください。 <script type="text/javascript"> function button1_over(){ var objElement = document.getElementById( 'map' ); objElement.src = '画像1'; } function button2_over(){ var objElement = document.getElementById( 'map' ); objElement.src = '画像2'; } function button3_over(){ var objElement = document.getElementById( 'map' ); objElement.src = '画像3'; } <figure> <img src="元画像" alt="○" usemap="#image_map" id="map" /> <map id="image_map" name="image_map"> <area shape="poly" coords="省略1" onmouseover="button1_over()" href="#" alt="~~~" /> <area shape="poly" coords="省略2" onmouseover="button2_over()" href="#" alt="~~~" />    <area shape="poly" coords="省略3" onmouseover="button3_over()" href="#" alt="~~~" /> </map> </figure>

  • 入れ替えた画像をクリッカブルマップにしたい

    スクリプトで変更した画像をクリッカブルマップにしたいのですがよくわかりません。 入れ替える為のスクリプトとクリッカブルマップについては単体では、ほぼ理解できていますが、それを結びつける知識がありません。 果たして、スクリプトで実現できるものなのでしょうか。

  • 初心者です。クリッカブルマップonclickの後

    javascript初心者です。 クリッカブルマップにおいて指定area内をクリックすると 画像が差し替えになる状態です。 差し替え後の画像はarea範囲よりも大きい(マップ全体と同一サイズ)なのですが このarea座標外でクリックして、元画像に戻るようにしたいです。 現在は、area座標内をクリックしないと元画像に戻りません。 ■jabascript function circle01_over(){ var objElement = document.getElementById( '元画像マップ' ); objElement.src = 'ロールオーバー後の画像(元画像と同じサイズで一部だけ変えたもの)'; } function image_out(){ var objElement = document.getElementById( '元画像マップ' ); objElement.src = '元画像マップ'; } function circle01_click(){ var objElement = document.getElementById( '元画像マップ' ); objElement.src = 'クリック後の画像'; } ■html <img src="元画像" class="hover" alt="" width="XXX" height="XXX" usemap="#Map" id="元画像マップ" name="元画像マップ" /> <map name="Map" id="Map"> <area shape="circle" coords="***,***,***" href="javascript:void(0);" onmouseover="circle01_over()" onmouseout="image_out()"" onclick="circle01_click(); return false;" alt="サンプル" /> 初歩的な事で申し訳ありません・・・ 尚、jQueryも新規リンク(html)も使用不可です。 添付画像のように動作させたいです。 宜しくお願い致します。

  • FireWorksでグラデーションのイメージをスライスできません

    グラデーションイメージの中部分の一部分だけをスライスして、そこだけスワップイメージを適用しようとしているのですが、 ブラウザで動作確認すると、スワップイメージの動作としては、きちんとフレーム2のイメージに入れ替わるのですが、 スライス以外の部分の模様がなぜか変更してしまいます。グラデーションがぐちゃぐちゃになってスライスしている場所がバレバレになってしまって本当に困っています。 画像の一部部分のみをスワップイメージとして行うことは不可能なのでしょうか。

  • イメージマップ内での画像の変更【HTML・CSS・Java】

    <img src="imagemaptest.bmp" usemap="#imagemaptest" border="0"> <map name="imagemaptest"> <area shape="rect" coords="152,167,359,451" href="***.html"> このようなタグでイメージマップを作成します。 そしてcoords="152,167,359,451"で指定したリンクにマウスオンした時に画像を変更する事は可能でしょうか?簡単に言うと画像の中のリンクにマウスを当てると指定した部分だけ画像が変更される方法です。 また、 background="test.jpg"でTABLE内に背景を指定し、その背景にリンクを張ることはかのうでしょうか? おわかりになる方、お教え下さい(・・*)JavaでもCSSでもかまいません☆

    • ベストアンサー
    • HTML
  • イメージマップ内のロールオーバーで切替後の画像のURL設定について。

    イメージマップ内のロールオーバーで切替後の画像のURL設定について。 下記のURLでは、3枚の画像を用意し、tab1,tab2,tab3,と三つのタブの場所にそれぞれイメージマップを利用してロールオーバー効果を持たせ、tabにカーソルが乗ったとき3枚の画像が切り替わるようになっています。 http://sky.geocities.jp/make_it_move/index.html そこで、皆さんにお聞きしたいのは、切り替わった画像それぞれに異なったリンクを指定する方法です。 ソースは <SCRIPT type="text/javascript" > function imgHover(path){ var target=document.getElementById('AreaMap'); var imagePath='./img/'+path; target.src=imagePath; } </SCRIPT> <body> <img src="img/image1.jpg" id="AreaMap" alt="地図" width="825" height="300" usemap="#imagemap" border="0" /> <map name="imagemap" id="imagemap"> <area shape="rect" coords="554,16,811,105" href="ttp://www.yahoo.co.jp/" alt="" onmouseover="imgHover('image1.jpg')" > <area shape="rect" coords="556,104,811,196" href="ttp://www.i-mezzo.net/" alt="" onmouseover="imgHover('image2.jpg')"> <area shape="rect" coords="556,195,812,287" href="ttp://www.kotaro269.com/" alt="" onmouseover="imgHover('image3.jpg')"> </map> です。 area shape部分にはurlを指定出来るのですが、切り替わった画像の image1,image2,image3部分にも、tab部分と同じurlを指定して上げるには、どのようにすればいいのでしょうか? 宜しくお願い致します。

専門家に質問してみよう