イメージマップ作成ソフト「c-map」について

[新着] Webテンプレートを仮オープンしました



0   名前: シトロ : 2007/05/11(金) 23:49  ID:BcgRYQFR sub-Cl
【何をしたいのか】

イメージマップ作成ソフト「c-map」を使って、イメージマップを作りたいのですが・・・。

【現在の状況】

楕円ツールにて製作し、あとはHTMLのタグをHP上に貼るだけという状況だったのですが
画像が×印になり表示されません。


【何をしてみたのか】

HP上にイメージマップになる以前の画像をアップロードし、ある素材配布サイト様の
c-mapの説明を参考に、HTMLプレビュー→ソースを表示→<body></boby>の間をコピーし
画像を表示したい部分に貼り付けしました。公式ヘルプも見ましたが、よく分かりませんでした。

【検索用語】

「c-map 使い方」「c-map 表示されない」「c-map 画像表示」などなどです。

【備考】

c-mapのバージョンは0.77です。よろしくお願い致します。

1   名前: Newのり太 : 2007/05/11(金) 23:49  ID:/wOblFsW sub-1h
問題のページのURLを提示されると、より具体的な回答がつくかもしれません。

2   名前: シトロ : 2007/05/11(金) 23:49  [URL]  ID:BcgRYQFR sub-Cl
Newのり太さん、こちらにもご回答ありがとうございます。
まだトップは出来上がってないので、ページを作り
c-mapで製作したタグを加えてみました。

きっと私側に何らかの不備があると思うのですが・・・。
よろしくお願い致します。

3   名前: 匿名 : 2007/05/11(金) 23:49  ID:byCcMKxE sub-Ds
トップページできあがってますよ。アップもされてますが、広告が消されていますね?
すごい技術ですね、どうするんですか?

4   名前: 匿名 : 2007/05/11(金) 23:49  ID:ANmnEXBb sub-t1
シトロさん>
簡単に言えば、<body>の後になぜかjavascriptが来ているという問題。
JavaScriptは<head>ここ</head>に記入しましょう。

それと「あるサイト」とはどこのサイトでしょうか?そして、
「イメージマップ」は俗に「クリッカブルマップ(以下マップ)」というのですが、
マップを作るためにJavaScriptを入れる必要はありません。
アクセントをつける為に書く場合はあるとは思いますが。

簡単に書くとふつう、こうなります。(マップとリンクのみ)
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML i18n//EN">
<!-- Generated by C-MAP V0.79 -->
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
</head>
<body>
<img src="map.jpg" usemap="#map" border="0">
<map name="map">
<area shape="rect" coords="152,44,256,148" href="bbb.html" alt="bbb">
<area shape="poly" coords="279,100,317,138,354,98,343,79,331,70,314,68,295,73,285,83" href="ccc.html" alt="ccc">
<area shape="poly" coords="142,93,138,113,129,131,115,145,98,154,79,157,60,154,42,145,28,131,20,112,17,93,20,73,29,55,43,41,60,32,79,29,98,32,116,41,130,56,139,74" href="aaa.html" alt="aaa">
<area shape="default" nohref alt="background"><!-- デフォルトエリア -->
</map>
</body>
</html>
もちろん画像は同じフォルダ内です。

5   名前: Z ◆XTzyosZXcL : 2007/05/11(金) 23:49  ID:tWsRhjqj sub-Cl
>>4
 ちょ、ちょっとお待ちを・・・AREA要素はHTML2.xでは使えないはずです(^^;。しかもすでにobsolete(廃棄)された仕様ですから不適当です。

文書型宣言について:
http://members.jcom.home.ne.jp/pctips/www/DOCTYPE.html

Another HTML-lint 結果の解説該当部分:
http://htmllint.itc.keio.ac.jp/htmllint/explain.html#expired-doctype

 現行の仕様であればHTML4.01かXHTMLでしょう。
#JIS-HTMLという選択肢もあることはありますけど仕様書が有料ですので使いづらいです(^^;。

6   名前: シトロ : 2007/05/11(金) 23:49  ID:BcgRYQFR sub-Cl
皆様、たくさんの返答ありがとうございます。
トップは、広告消したつもりはないのですが・・・。
私の所だと表示されているのですが消えていましたか?
えっと、ALEA要素が・・・など、よく分からなくて;

当方知識が少なく、もう少し易しく教えていただけると助かります。
よろしくお願い致します。

7   名前: Z ◆XTzyosZXcL : 2007/05/11(金) 23:49  ID:tWsRhjqj sub-Cl
>>6 シトロさん
 仕様書にあたるのが一番正確な知識を身につける近道(遠回りに見えますが)です。HTML4.01の仕様書では説明だけではなく記述例も提示することで応用への手がかりを与えてくれます。例えばそもそも「イメージマップ」についてどんなルールが定められているかというと・・・

HTML4.01仕様書該当部分(イメージマップ):
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/objects.html#h-13.6
http://www.w3.org/TR/html401/struct/objects.html#h-13.6

仕様書の読み方などHTMLの基本について:
http://www.kanzaki.com/works/2001/pub/wsd01.html

 ですが、とかく分量が多く、またルール決めのためのものですので自分では使わない部分の説明もあることでしょう。したがってリファレンスやガイドブックなどの出番となりますが、中には間違った解釈のもとで書かれていたりするものがあるため実はそういうものを選ぶには注意が必要です。

おかしな書籍や講座サイトを批判する資料)
http://bakera.jp/html/book/index.html
http://web.xii.jp/iec/battle/

よい本の選び方:
http://deztec.jp/lecture/book/index.html

 Webページの本質をごく簡単にまとめた資料としては下記が私はお奨めだと思います。

初心者のためのホームページ作成講座:
http://members.jcom.home.ne.jp/jintrick/Personal/markup.html

8   名前: 匿名 : 2007/05/11(金) 23:49  ID:cTPPpRdl sub-Ds
>3です
消したつもりがないのに消える……?そっちは表示されている???
ちょっとだけわかりました。故意消しと思っていました。ごめんなさい。とはいえ、何とかしないと、スタッフにばれると、問答無用でコンテンツ削除されますよあそこは。

fc2は常識的な作りのページに広告を自動挿入します。シトロさんのページがすこしもともと非常識だった可能性がありますが、ページアップされると、自動挿入広告が邪魔して正しい検証が出来ません。自動挿入の広告はJavaScriptで出来ています。

>4 さん
たぶん、自動挿入のJavaScriptですそれ。で、もともとおかしい文法がさらにおかしくなっている可能性大。

シトロさん
アップしたソースでなく生のソースをここに出せますか?ページごと。シトロさんのフォルダの構成も出せますか?全て同じフォルダですか?

それも、わからなかったら、次のソフトを教えてください。
ソースを書いたソフト名
アップしたソフト名
そして
画像ファイルをアップした場所。

よろしくお願いします。誤解してごめんね。


9   名前: とおりすがり : 2007/05/11(金) 23:49  ID:UWsZexeD sub-gm
fc2で作成する際、ファイルマネージャから起動するhtmlエディタは使わないこと。
あれはタグを勝手に書き換えるので、不具合が起こりやすいです。

画像が×になるのは、指定した画像が指定した場所にないから。
画像はアップロードしてあるか(アップロードした場所−ディレクトリなど−は正しいか)、
画像の名前を間違えていないか(大文字小文字も注意)、
確認しましょう。

10   名前: Z ◆XTzyosZXcL : 2007/05/11(金) 23:49  ID:tWsRhjqj sub-Cl
>>8を読んで思い出しましたが、下記にも注意された方がいいかもしれません(より良いページ作りを目指すのであれば多少お金がかかっても有料のレンタルサーバの方が広告を気にせずに製作できるのでお奨めです)。

無償サーヴァを用いる上で注意したい事。:
http://www.marguerite.jp/Nihongo/HowToMakeYourWeb/Columns/FreeServer.html

Webサイトの公開場所を選ぼう:
http://www.mars.dti.ne.jp/~fuminG/yobi/space.htm

#今ではWeblogの方が気楽にページ作りが出来るかも(^^;。

11   名前: シトロ : 2007/05/11(金) 23:49  ID:BcgRYQFR sub-Cl
皆様、ご返答ありがとうございます。
>>7 様
HTML、頭に入れてるつもりでもなかなか入りません。
本の購入も検討いたしますね。ありがとうございました。

>>8 様
いえ、いいんですよ。気にしないで下さいね^^
確かにイメージマップでメニューを表示させようと思っていたので
説明文だけでリンクもないので非常識なページと判断されたのかもしれません。
ご忠告ありがとうございました。

そして、生のソースとはc-mapで生成されたソースの事でしょうか?
それなら・・・下記のソースです。
一部ファイル名が変わっていたようでして、作り直しました。
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML i18n//EN">
<!-- Generated by C-MAP V0.77 -->
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
</HEAD>
<BODY>
<IMG src="topcake.png" usemap="#topcake" border="0">
<MAP name="topcake">
<AREA shape="poly" coords="158,52,153,58,141,63,125,64,109,63,97,58,93,52,97,46,109,41,125,40,141,41,153,46" href="http://coulejour.web.fc2.com/about.html" alt="About"><!-- About -->
<AREA shape="poly" coords="106,92,101,98,87,103,69,104,51,103,37,98,33,92,38,86,51,81,69,80,87,81,101,86" href="http://coulejour.web.fc2.com/priere.html" alt="Priere"><!-- Priere -->
<AREA shape="poly" coords="229,93,225,98,214,103,197,106,178,107,159,106,142,103,131,98,128,93,131,88,143,83,159,80,178,79,197,80,214,83,225,88" href="http://coulejour.web.fc2.com/memoire.html" alt="Memoire"><!-- Memoire -->
<AREA shape="poly" coords="209,142,204,148,190,153,172,154,154,153,140,148,136,142,141,136,154,131,172,130,190,131,204,136" href="http://www3.rocketbbs.com/601/coule.html" alt="Board"><!-- Board -->
<AREA shape="poly" coords="156,190,152,196,142,200,129,201,116,200,106,195,103,190,106,184,116,180,129,179,142,180,152,185" href="http://coulejour.web.fc2.com/link.html" alt="Link"><!-- Link -->
<AREA shape="default" nohref><!-- デフォルトエリア -->
</MAP>
</BODY>
</HTML>

違うかもしれませんので、一応情報も載せさせていただきますね。

ソースを書いたソフト名:c-map Ver0.77
アップしたソフト名:FFFTP Ver1.17
画像ファイルをアップした場所:http://coulejour.web.fc2.com/topcake.gif

素材配布サイトのSnowDrops様の講座を見るとあとからgifに変換できると
記してありましたので、gifにしたのですが・・・。(gifは透過されるので・・・)
参考になりましたら幸いです。

>>10 様 確かにブログの方が簡単だとはつくづく感じますね。
有料、もしくは無料で広告無しのところも検討してみます。

12   名前: 匿名 : 2007/05/11(金) 23:49  ID:cTPPpRdl sub-Ds
8行目
<IMG src="topcake.png" usemap="#topcake" border="0">
をpngではなく、gifにしてください。

拡張子を変えるなら、ソースも変えてください。
別の指定になってしまいます。
多分これで表示されると思います。

意味が通じていないようですが、トップページも結構文法おかしく当方IE6ですが、広告が見えません。FC2で無料コースを借りていて広告を見せないのはドロボーと同じです。ばれたら、サイト全部消された上に同じメールアドレスからFC2のサービスを受けられなくなります。FC2は1行改行を入れて下に広告を下げても、コンテンツ削除という規約です。

約束を守られる人であることを願っています。これはマナーではなく、ルールです。がんばって、仕様書などをお読みになり、早急に対応してください。わかるまでは、アップされているものを自主的に消されることをオススメします。

13   名前: Z ◆XTzyosZXcL : 2007/05/11(金) 23:49  ID:tWsRhjqj sub-Cl
>>11
>そして、生のソースとはc-mapで生成されたソースの事でしょうか?
>それなら・・・下記のソースです。
(ソースは省略)

 出力されるHTML文書がルールに沿わないということになると、ツール作者に改善して頂くしかありませんねぇ・・・作者ページは

http://www.j-skai.com/

でしょうか?であれば、ユーザーであるシトロさんがバグレポートをメールで送ることで改善してもらえるかもしれません・・・ただ、バグとして扱ってもらえる話題かどうかはなんともいえません(文書型宣言の文字列を出力後に差し替えれば済むでしょう、と言われて終わりかもしれません)が(^^;。

#Weblogの方はまったく違う話題を取り扱っている模様ですのでコメント欄に本件についての報告をしても無視されてしまう可能性が高いですね。

14   名前: シトロ : 2007/05/11(金) 23:49  ID:caqBrN3h sub-Cl
>>12 様
ソースを変えなきゃいけませんでしたね。すみません。
おかげで出来ました。ありがとうございます!
文法、おかしかったのですね・・・。ルールは破るつもりはありません。
一応、こんな感じで合ってますでしょうか?メーカーは使わずタグ打ちしてみました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sucreries*</title>
<style type="text/css"> 
<!-- 

body { 
background-image: url(http://coulejour.web.fc2.com/mintonomizutama.gif); 
} 

--> 
</style> 
</head>
<body>
<p><font size="-2" color="#ffffff" face="MS ゴシック">Sucreriesとはフランス語で「砂糖菓子」という意味です。</font></p>
<p><font size="-2" color="#ffffff" face="MS ゴシック">お菓子って元は基本同じ砂糖から出来たものなのに</font></p>
<p><font size="-2" color="#ffffff" face="MS ゴシック">工程によって、いろんな形に変わるのだなぁと思ったのがきっかけです。</font></p>
<p><font size="-2" color="#ffffff" face="MS ゴシック">このサイトもいろんな顔を見せられたらなぁ、と願って付けました。</font></p>
<p><font size="-2" color="#ffffff" face="MS ゴシック">まったりしていって下さいね。</font></p>
<IMG src="http://coulejour.web.fc2.com/topcake.gif" usemap="#topcake" border="0">
<MAP name="topcake">
<AREA shape="poly" coords="158,52,153,58,141,63,125,64,109,63,97,58,93,52,97,46,109,41,125,40,141,41,153,46" href="http://coulejour.web.fc2.com/about.html" alt="About"><!-- About -->
<AREA shape="poly" coords="106,92,101,98,87,103,69,104,51,103,37,98,33,92,38,86,51,81,69,80,87,81,101,86" href="http://coulejour.web.fc2.com/priere.html" alt="Priere"><!-- Priere -->
<AREA shape="poly" coords="229,93,225,98,214,103,197,106,178,107,159,106,142,103,131,98,128,93,131,88,143,83,159,80,178,79,197,80,214,83,225,88" href="http://coulejour.web.fc2.com/memoire.html" alt="Memoire"><!-- Memoire -->
<AREA shape="poly" coords="209,142,204,148,190,153,172,154,154,153,140,148,136,142,141,136,154,131,172,130,190,131,204,136" href="http://www3.rocketbbs.com/601/coule.html" alt="Board"><!-- Board -->
<AREA shape="poly" coords="156,190,152,196,142,200,129,201,116,200,106,195,103,190,106,184,116,180,129,179,142,180,152,185" href="http://coulejour.web.fc2.com/link.html" alt="Link"><!-- Link -->
<AREA shape="default" nohref><!-- デフォルトエリア -->
</MAP>
<script type="text/javascript"><!--
var fhp_c_pc = navigator.userAgent.toLowerCase();
var fhp_ie = ((fhp_c_pc.indexOf("msie") != -1) && (fhp_c_pc.indexOf("opera") == -1));
var fhp_cs, fhp_wt, fhp_dm;

if (fhp_ie) {
        fhp_cs = document.charset;
}else{
        fhp_cs = document.characterSet;
}
fhp_dm = document.location;

fhp_wt = "";
fhp_wt = '<' + 'script src="http://web.fc2.com/footer/footer.php?cs=' + fhp_cs + '&dm=' + fhp_dm + '"><' + '/script>';
document.write(fhp_wt);
//--></script>
</body>
</html>
少し話は逸れるのですが、文が見えにくい場合隙間を空けることも広告下げと見なされるのでしょうか?
例えばですが、

・・・

次のページです・・・。
上記の様に、・・・の間に隙間を空けるのもやはりそうなのでしょうか?
規約はきちんと守るように致します。すみませんでした。

>>13 様
やはり、バグとして意見を云うべきなのでしょうか。
でも、私の様な方もいるかもしれませんので、送ることに致しますね。ありがとうございました。

15   名前: 匿名 : 2007/05/11(金) 23:49  ID:ANmnEXBb sub-t1
シトロさん>

まず言いたいのは、
>>5
をちゃんと読み返して欲しいということです。
DOCTYPE宣言はC-MAPで自動作成したモノをそのまま使っていますね?
それでは不適切なので、サイトを回って確認しましょう。
<AREA shape="poly" coords="156,190,152,196……
の部分も同じく。

16   名前: シトロ : 2007/05/11(金) 23:49  ID:caqBrN3h sub-Cl
>>15 様
DOCTYPE宣言はコチラのサイト様のなのですが・・・。
AREA要素も調べてみたのですが、よく分からないのです・・・。
もう少し調べてみます。

一覧へ戻る