画像の選択

DIVのボックスの中に、選択する画像と制御ボタン置いています。

制御ボタンはボックスの中で「CSS：position:sticky」で制御しています。しかもそれはSPANで、その中に本体の制御ボタン画像（CSS：position:relative）を置いて、そして位置調整しています。

あとはJavaScriptで色々と操作の処理をしています。

※一部動作がうまくいっていない箇所があります。

画像をクリックすると、ここではメッセージを表示するようにしています。メッセージデータは各画像タグにつけた属性「msg」（ユーザー作成属性）に入れています。

index.htm：

<!DOCTYPE HTML>
<HTML>
<HEAD>
<META http-equiv="content-language" content="ja">
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<META http-equiv="Content-Script-Type" content="text/javascript">
<TITLE>画像の選択</TITLE>
<STYLE>@import url("c/Style.css");</STYLE>
<SCRIPT src="c/Main.js"></SCRIPT>
</HEAD>

<BODY>

<DIV id=DocSel style="float:left; margin-right:1em;">
<SPAN id=DocCtrlL><IMG src="c/CtrlL_0.gif"></SPAN>
<IMG class=Img src="c/Img/Aiborixfuroxraderu.jpg"
 msg="白"
><IMG class=Img src="c/Img/Apurikottobyuxtelix.jpg"
 msg="桃"
><IMG class=Img src="c/Img/Atoranntelisu.jpg"
 msg="紫＆白"
><IMG class=Img src="c/Img/Barerixna.jpg"
 msg="オレンジ"
><IMG class=Img src="c/Img/Baxganndelixrexsu.jpg"
 msg="桃"
><IMG class=Img src="c/Img/Daxuinnorennji.jpg"
 msg="赤"
><IMG class=Img src="c/Img/Dorixmuranndo.jpg"
 msg="白＆桃"
><IMG class=Img src="c/Img/Goxrudennokkusufoxdo.jpg"
 msg="黄"
><IMG class=Img src="c/Img/Hatuzakura.jpg"
 msg="白＆桃"
><IMG class=Img src="c/Img/Kafenoa.jpg"
 msg="紫"
><IMG class=Img src="c/Img/Kuraudelia.jpg"
 msg="桃＆白"
><IMG class=Img src="c/Img/Murasakisuisyou.jpg"
 msg="紫"
><IMG class=Img src="c/Img/Panndelia.jpg"
 msg="紫＆白"
><IMG class=Img src="c/Img/Pinnkudaiyamonndo.jpg"
 msg="桃"
><IMG class=Img src="c/Img/Ulenndelirabu.jpg"
 msg="黄＆白"
><IMG class=Img src="c/Img/Youkihi.jpg"
 msg="桃"
><IMG class=Img src="c/Img/Yuko.jpg"
 msg="白＆桃"
><BR>
<SPAN id=DocCtrlR><IMG src="c/CtrlR_0.gif"></SPAN>
</DIV>
<SPAN id=DocMsg></SPAN><BR>
<HR>
<SPAN id=DocDebug1></SPAN><BR>
<BR class=FloClr>

</BODY>
</HTML>

Style.css

/* Test2.htm用CSS */
/* 作成：2026.02.20 by T.A. */
/* 編集：2026.02.22 by T.A. */
*{
	--W:300px;	/* 選択ボックスの横幅 */
	--H:200px;	/* 選択ボックスの縦幅 */
	--PadH:10px;	/* 画像の上下余白 */
	--BtnW:30px;	/* 制御ボタンの横幅 */
}
#DocSel{	/* DIV：選択ボックス */
	border:1px solid #000;
	box-sizing:content-box;	/* ボックスサイズの解釈：ボーダーを含まない */
	background-color:#fff;
	overflow-x:hidden;
	overflow-y:hidden;
	white-space:nowrap;	/* 選択画像を並べるための */
	width:var(--W);
	height:var(--H);
	line-height:1;
}
#DocCtrlL{	/* SPAN：制御ボタン部 */
	position:sticky;
	left:0px;
}
#DocCtrlL IMG{
	position:relative;
	background-color:transparent;
	top:calc((var(--H) / 2) - (var(--BtnW) / 2));
	width:var(--BtnW);
	height:var(--BtnW)
}
#DocCtrlR{	/* SPAN：制御ボタン部 */
	position:sticky;
	left:calc(var(--W) - var(--BtnW));
}
#DocCtrlR IMG{
	position:relative;
	top:calc(0px - (var(--H) / 2) - (var(--BtnW) / 2));
	background-color:transparent;
	width:var(--BtnW);
	height:var(--BtnW);
}
#DocSel .Img{	/* 選択する画像たち */
	vertical-align:top;
	height:calc(var(--H) - var(--PadH) - var(--PadH));
	width:auto;
	padding-top:var(--PadH);
	padding-bottom:var(--PadH);
	padding-right:10px;
}
.CtrlOff{	/* 制御ボタンを表示オフにする */
	animation-name:KFCtrlOff;	/* アニメーション表示 */
	animation-timing-function:linear;
	animation-duration:0.5s;
	animation-iteration-count:1;
	animation-fill-mode:forwards;	/* アニメ完了後、そのまま */
}
@keyframes KFCtrlOff{	/* 表示オフ用アニメーション */
 0%{
  opacity:;
 }
 100%{
  opacity:0;	/* 透明へ */
 }

.CtrlOn{	/* 制御ボタンを表示オンにする */
	animation-name:KFCtrlOn;	/* アニメーション表示 */
	animation-timing-function:linear;
	animation-duration:1s;
	animation-iteration-count:1;
	animation-fill-mode:forwards;	/* アニメ完了後、そのまま */
}
@keyframes KFCtrlOn{
 0%{
  opacity: ;
 }
 100%{
  opacity:1;	/* 非透明へ */
 }
}

Main.js：

/* Test3.htm用JavaScript */
/* 作成：2026.02.20 */
/* 編集：2026.02.23 */
window.addEventListener('load', Init);

// 初期化
// 作成：2026.02.20
// 編集：2026.02.22
var DocSelW;
function Init(){
	let DocSelSty=DocSel.computedStyleMap();	//選択ボックスの横幅を得る
	let Wpx=DocSelSty.get('width');
	DocSelW=Number.parseInt(Wpx, 10);
	DocSel.addEventListener('wheel', MouScroll);
	document.body.addEventListener('keydown', KeyJ);
	DocCtrlL.addEventListener('mouseover', CtrlL_Ove);
	DocCtrlL.addEventListener('mouseout', CtrlL_Out);
	DocCtrlR.addEventListener('mouseover', CtrlR_Ove);
	DocCtrlR.addEventListener('mouseout', CtrlR_Out);
	DocCtrlL.addEventListener('mousedown', CtrlL_1);
	DocCtrlL.addEventListener('mouseup', CtrlL_0);
	DocCtrlL.addEventListener('mouseout', CtrlL_0);
	DocCtrlR.addEventListener('mousedown', CtrlR_1);
	DocCtrlR.addEventListener('mouseup', CtrlR_0);
	DocCtrlR.addEventListener('mouseout', CtrlR_0);
	window.setInterval(MouScroll_10, 100);
	//選択画像の応答処理
	let ImgC=DocSel.getElementsByClassName('Img');
	for(I=0; I<ImgC.length; I++){
		ImgC[I].addEventListener('mousedown', ImgSel);
	}
}

// マウスによるスクロール操作
// 作成：2026.02.20
// 編集：2026.02.22
var ScrXN=0;	//ScrXNにあるだけスクロールさせる
var Gensui=0.7;	//スクロール速度の減衰度合い
function MouScroll(){
	let dSX=-1*event.wheelDeltaX;	//左右極性調整
	if(dSX > 10) dSX=10;	//最大値調整
	if(dSX < -10) dSX=-10;	//最小値調整
	ScrXN=ScrXN+dSX;
}
function MouScroll_10(){
	if(ScrXN > 0){
		DocSel.scrollLeft=DocSel.scrollLeft+ScrXN;
		ScrXN=ScrXN*Gensui;	//スクロール速度を徐々に落とす
		if(ScrXN < 0.5) ScrXN=0;
	}else{	//マイナス方向動作
		DocSel.scrollLeft=DocSel.scrollLeft+ScrXN;
		ScrXN=ScrXN*Gensui;	//スクロール速度を徐々に落とす
		if(ScrXN > -0.5) ScrXN=0;
	}
	//制御ボタンの表示制御
	//選択物画像が左端なら制御ボタンを消す
	if(DocSel.scrollLeft <= 10){
		DocCtrlL.className='CtrlOff';	//※classは、あくまで指定は１つとしている
	}else{
		DocCtrlL.className='CtrlOn';
	}
	//選択物画像が右端なら制御ボタンを消す
	if(DocSel.scrollLeft > DocSel.scrollWidth-DocSelW-10){
		DocCtrlR.className='CtrlOff';
	}else{
		DocCtrlR.className='CtrlOn';
	}
}

// 制御ボタン「＜」mouseover
// 作成：2026.02.22
// 編集：2026.02.22
function CtrlL_Ove(){
	DocCtrlL.children[0].src="c/CtrlL_1.gif";
}
// 制御ボタン「＜」mouseout
// 作成：2026.02.22
// 編集：2026.02.22
function CtrlL_Out(){
	DocCtrlL.children[0].src="c/CtrlL_0.gif";
}
// 制御ボタン「＞」mouseover
// 作成：2026.02.22
// 編集：2026.02.22
function CtrlR_Ove(){
	DocCtrlR.children[0].src="c/CtrlR_1.gif";
}
// 制御ボタン「＞」mouseout
// 作成：2026.02.22
// 編集：2026.02.22
function CtrlR_Out(){
	DocCtrlR.children[0].src="c/CtrlR_0.gif";
}
// 制御ボタン「＜」押された
// 作成：2026.02.22
// 編集：2026.02.22
function CtrlL_1(){
	ScrXN=ScrXN-20;
	CtrlL_1.TimerId=window.setTimeout(CtrlL_1, 100);
}
// 制御ボタン「＜」離された
// 作成：2026.02.22
// 編集：2026.02.22
function CtrlL_0(){
	window.clearTimeout(CtrlL_1.TimerId);
}

// 制御ボタン「＞」押された
// 作成：2026.02.22
// 編集：2026.02.22
function CtrlR_1(){
	ScrXN=ScrXN+20;
	CtrlR_1.TimerId=window.setTimeout(CtrlR_1, 100);
}
// 制御ボタン「＞」離された
// 作成：2026.02.22
// 編集：2026.02.22
function CtrlR_0(){
	window.clearTimeout(CtrlR_1.TimerId);
}

//●
//BODYでキーが押された
// 作成：2026.02.22
// 編集：2026.02.23
function KeyJ(){
	let K=event.key;
	switch(K){
	 case 'ArrowLeft':
		ScrXN=ScrXN-20;
		break;
	 case 'ArrowRight':
		ScrXN=ScrXN+20;
		break;
	}
}

//●画像が選択された
// 作成：2026.02.22
// 編集：2026.02.22
function ImgSel(){
	let E=event.target;
	DocMsg.innerText=E.getAttribute('msg');	//「msg」はユーザーが作った属性です
}

// デバッグ
// 作成：2026.02.20
// 編集：2026.02.20
function Debug1(D){
	DocDebug1.innerText=D;	//ただ表示するだけ
}

表示ボックスの中でスクロールする画像を選択する

モジュール