php - 積み重ねられた複数の透明な画像の上にマウスを置く

Question

これが可能かどうかはわかりませんが、複数の画像を重ねて作成した画像（画像は不透明に設定されます）にマウスを合わせると、それを表示する効果を作成しようとしています。画像のセクションが他のセクションよりも鮮明になります。

説明するのは難しいですが、ここにいくつかの例があります

この画像：

オーバーラップしたすべての画像の作成です（各画像は前の画像の上にあります）

最終的な画像の上にマウスを置くと、画像自体の画像のそのセクションに対応する画像の部分を「ハイライト」できるようにしたいと思います。

私が考えていたのは、不透明なセットでメイン画像を表示することです。ユーザーがその上にマウスを置いたときに、座標を取得し、すべての画像（25を超えることはできません）と照合して、それらの座標が非「透明」ピクセルであり、メインの上にそのような画像を表示して「ハイライト」効果を与えますが、最終的な画像は約400x200であり、ページを表示するときにすべてのピクセルの配列をその場で作成することはサーバーにとって現実的ではありません1時間/分あたり数千のヒットがあります。この配列をデータベースに保存することは現実的ではなく、画像のサイズはページによって変わる可能性があります。現在、最終的な画像は130万枚あり、それぞれが平均して約10枚の分解画像です。

Answer 1

考えられる解決策は、サブイメージごとにカスタムSVGオーバーレイを作成することです。イベントが発生するonmouseoverと、SVG要素の不透明度が下がり、下の画像が見やすくなります。

SVGを作成するには、このツールをチェックアウトしてください。

Answer 2

$("img").css("opacity","0.8");

$("img").mouseover(function()
{
    $(this).css("opacity","1.0");
});

$("img").mouseout(function()
{
    $(this).css("opacity","0.8");
});

画像をセグメント化する効果については、画像マップを使用してみてください。

http://www.javascriptkit.com/howto/imagemap.shtml

画像マップの不透明度がサポートされています：

http://www.thehelper.net/threads/can-i-use-opacity-on-imagemap.57999/

編集：

ホバリング効果を実現するには、FabricJSを使用してキャンバスにロードしてみてください。デモは次のとおりです。

http://fabricjs.com/hovering/

Answer 3

プロジェクトを放棄し、onyソリューションはSVGですが、一部のブラウザー/ OSはそれらを完全にサポートしていないため、この段階では不可能です。