詳しい人求む！

背景の図の上に別の図を重ねて表示するHTMLを作るフリーソフト

解決済

質問者：usa3usa
質問日時：2021/09/05 23:15
回答数：4件

WYSIWYG対応のホームページエディター　alphEDIT　を使ってWEBページ書いています。
https://freesoft-100.com/review/soft/alphaedit.h …

背景の図の上に別の図を重ねて表示させたいのですが、　alphEDIT　では対応していないようです。

背景の図の上に別の図を重ねて表示させるには、たとえば
　日本地図の西之島の位置に赤丸を重ねる
には、下のようなHTMLを書けばよいことはわかっていますが、
　重ねる位置の　top : 220px; left : 203px;
の座標位置を求めるのが面倒で、画面を見ながらマウスで場所を指定するとその座標が入力できるようなフリーソフトをご存じの方、教えてください。

<div style="position: relative;">
<img src="img/HP_HTML_000004.png" width="300" height="300" border="0" alt="日本周辺地図">
<div style="position: absolute; top : 220px; left : 203px;">
　　<img src="img/HP_HTML_000005.png" width="12" height="12" border="0" alt="西之島">
　　</div>
</div>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： sukitaro
回答日時：2021/09/06 14:49

書いているうちにNo1さんに言われてしまいましたが、

スクリプトの例です。

以下をhtmlファイルとして保存してもらって、
chromeなどで実行してもらえれば、
たぶん、同じようなことができるのではないかと思います。

（そんなに良い書き方ではないと思うので、
　もし改良点があればご指摘いただければ嬉しいです。）

なお、画像からの相対位置に注意してください。
htmlとjavascriptしか使っていないので、
ウェブサーバーなどは起動させる必要はありません。
ブラウザが古いと動かないかもしれません。

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>gasou</title>
</head>
<body>
<script>/* ここに入力してください */
const baseData = { // 奥の画像
src: "img/HP_HTML_000004.png", // アドレスを入力
width: 300, // pxを整数値で入力
height: 300, // pxを整数値で入力
alt: "日本周辺地図"
}
const coverData = { // 手前の画像
src: "img/HP_HTML_000005.png", // アドレスを入力
width: 12, // pxを整数値で入力
height: 12, // pxを整数値で入力
alt: "西之島"
}
</script>/* 入力ここまで */

<div style="position: relative;">
<img id="base-img">
<div style="position: absolute;">
<img id="cover-img">
</div>
</div>
<p>↑画像のどこかをクリックしてください。</p>
<textarea id="copy" style="width:500px;height:200px;"></textarea>
<p>↑ここをコピーしてください</p>
<script>
let baseImg = Object.assign(document.getElementById('base-img'), baseData);
let coverImg = Object.assign(document.getElementById('cover-img'), coverData);
let copy = document.getElementById('copy');
let t, l;

baseImg.addEventListener('click', (e) => {
t = e.offsetY - coverData.height / 2;
l = e.offsetX - coverData.width / 2;
coverImg.parentNode.style.top = t + 'px';
coverImg.parentNode.style.left = l + 'px';

copy.textContent = `<div style="position: relative;">
<img src="${baseData.src}" width="${baseData.width}" height="${baseData.height}" border="0" alt="${baseData.alt}">
<div style="position: absolute; top : ${t}px; left : ${l}px;">
<img src="${coverData.src}" width="${coverData.width}" height="${coverData.height}" border="0" alt="${coverData.alt}">
</div>
</div>`;
}, false);

</script>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます

＞スクリプトの例です。
Firefox ですが、希望通りの動作、確認しました。

「↑ここをコピーしてください」の部分を本文のHTMLにそのままコピーできるので絶品ですね、素晴らしいです。

質問では、
　背景の図の上に別の図を重ねて表示するHTMLが作成できる　WYSIWYG対応のホームページエディター　alphEDIT　のようなフリーソフト
のご紹介を期待していたのですが、これはこれで十分活用できる内容で感謝しています。
alphEDITにこの機能がアドインできれば更に嬉しいですが、無理な注文ですよね。

通報する

お礼日時：2021/09/07 10:23

No.4

回答者： sukitaro
回答日時：2021/09/07 12:03

No2です。

ちょうど良いフリーソフトは見つかりませんでした。
すみません。

また、アドインのつくり方も
（というか、exeファイルなどのつくり方も）
今の私の知識では分からないです。
重ねて申し訳ないです。

- 0
- 件

通報する

No.3

回答者： fujillin
回答日時：2021/09/06 22:45

No1です。

似た様な回答がすでに出ていますけれど、言った手前、ごく簡単なものを作ってみました。

HTML内に、二つのimgタグをコピペして、ブラウザで表示します。
1番目の画像が下図で、2番目の画像がその上に表示するものです。

画像をクリックすると、その座標位置が表示されます。
矢印キーを押すと、上の画像がその方向に移動し、その時の座標位置が表示されます。
（矢印キーのみだと1px分、shift+矢印だと10px分移動します）

＞マウスで場所を指定するとその座標が入力できるような～
マウスだとアバウトになってしまいますが、矢印キーで移動すれば、実際の位置関係を見ながら微調整できるので、その方が確実かなと思いました。
（一応、クリックの座標位置も示すようにしてありますが…）

<!DOCTYPE HTML>
<html lang="ja">
<head><title>PointChecker</title></head>
<body>

<section id="testArea" style="position: relative;">

<img src="img/HP_HTML_000004.png" width="300" height="300" alt="日本周辺地図">
<img src="img/HP_HTML_000005.png" width="12" height="12" alt="西之島">
</section>

<p id="info">
クリック座標：<output name="info1"></output>
<br />
画像2 座標　：<output name="info2"></output>
</p>

<script>
window.addEventListener('load', ()=>{
const
info = document.querySelectorAll('#info output'),
img = document.querySelectorAll('#testArea img'),
bcr = img[0].getBoundingClientRect(),
MM = (x, xm) => Math.max(Math.min(x, xm), 0),
OUT = (n, x, y)=>{ info[n].value = `top:${y}px left:${x}px` };

Object.assign(img[1].style, {
position: 'absolute', pointerEvents: 'none',
top: (img[0].clientHeight/2 | 0) + 'px',
left: (img[0].clientWidth/2 | 0) + 'px'
});

img[0].addEventListener('click', (e)=>{
const
x = (e.pageX - bcr.left - window.scrollX).toFixed(),
y = (e.pageY - bcr.top - window.scrollY).toFixed();
OUT(0, Math.max(x, 0), Math.max(y, 0));
});

document.addEventListener('keydown', (e)=>{
const c = e.keyCode;
if(c<37 || c>40) return;
e.preventDefault();

const s = img[1].style, u = e.shiftKey?10:1;
let x = parseInt(s.left), y = parseInt(s.top);
x += (c==37?-1:c==39?1:0) * u;
y += (c==38?-1:c==40?1:0) * u;
x = MM(x, bcr.width - img[1].clientWidth);
y = MM(y, bcr.height - img[1].clientHeight);
Object.assign(s, {top: y + 'px', left: x + 'px'});
OUT(1, x, y);
});

});
</script>
</body>
</html>

- 1
- 件

通報する

この回答へのお礼

再度の回答ありがとうございます

＞ごく簡単なものを作ってみました。
ありがとうございます。Firefox で、私の希望通りの動作、確認しました。

No2さんの回答同様、素晴らしいです。
キーボードで位置の微調整ができるの嬉しいですね。

紹介頂いたスクリプトを使えば、
第１ステップ　適当な重ね合わせ位置　例えば、top:10px left:10px　としてWEBページを　alphEDIT で作成
第２ステップ　紹介頂いたスクリプトをつかって決定した重ね合わせ位置を示す文字列　例えば　top:275px left:250px　をWEBページのHTMLにテキストエディタ等でコピーして完成

ですね。
No2さんのお礼にも書きましたが、
alphEDITにこの機能がアドインできれば更に嬉しいですが、無理な注文ですよね。

通報する

お礼日時：2021/09/07 10:34

参考程度に

No.1

回答者： fujillin
回答日時：2021/09/06 14:24

こんにちは

座標情報を取得するだけなら、仮のHTMLに画像を表示しておいて、スクリプトで位置を取得するとかでも良いのでは？

スクリプトは作成する必要がありますが、ごく簡単なUIにしておけば、さほど複雑なものにはならないと推測します。

- 0
- 件

通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

質問する（無料）

今、見られている記事はコレ!

隣の枝がはみ出してきたら切ってもいい？最もやってはいけないことは？

「隣の木が越境してきて困るが、勝手に切ってはいけないと聞くし…」そう思っている方も多いだろう。実は、2023年4月1日に民法が改正され、この「越境枝」のルールが大きく変わった。教えて！gooでも「境界から出て...
弁護士が解説！あなたの声を行政に届ける「パブリックコメント」制度のすべて

社会に対する意見や不満、疑問。それを発信する場所は、SNSやブログ、そしてニュースサイトのコメント欄など多岐にわたる。教えて!gooでも「ヤフコメ民について」というタイトルのトピックがあり、この投稿の通り、...
弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」

「お金を賭けたら違法です」ーーこう答えたのは富士見坂法律事務所の井上義之弁護士。オンラインカジノが違法となるかどうかの基準は、このように非常にシンプルである。しかし2025年にはいって、違法賭博事件が相次...
釣りと密漁の違いは？知らなかったでは済まされない？事前にできることは？

知らなかったでは済まされないのが法律の世界であるが、全てを知ってから何かをするには少々手間がかかるし、最悪始めることすらできずに終わってしまうこともあり得る。教えてgooでも「釣りと密漁の境目はどこです...
カスハラとクレームの違いは？カスハラの法的責任は？企業がとるべき対応は？

東京都が、客からの迷惑行為などを称した「カスタマーハラスメント」、いわゆる「カスハラ」の防止を目的とした条例を、全国で初めて成立させた。条例に罰則はなく、2025年4月1日から施行される。この動きは自治体...