HTMLのstyle(img)タグにhoverを直書きする方法を記載します。
完成イメージは次のようになります。
hoverの実装にはonMouseOverとonMouseOutを使用します。
書き方
次のように書くと実装することができます。
<img style="opacity: 1.0"; onMouseOver="this.style.opacity=0.6" onMouseOut="this.style.opacity=1.0" src="画像の配置先" alt="" title="" >
style="opacity: 1.0"; はデフォルトの透明度を設定しています。1.0は透明にしない設定です。
onMouseOver="this.style.opacity=0.6"はマウスポインタが画像に乗った時に画像を半透明にする処理です。
onMouseOut="this.style.opacity=1.0"は逆にマウスポインタが画像から離れたときに透明度を元に戻す処理をしています。
これに枠と影とリンクを入れると以下のようになります。
<div style="border: solid 1px #CCCCCC; box-shadow: 2px 2px 4px #999999; ">
<a href="リンク先URL">
<img style="opacity: 1.0"; onMouseOver="this.style.opacity=0.6" onMouseOut="this.style.opacity=1.0" src="画像の配置先" alt="画像" title="画像" >
</a>
</div>
参考サイト
https://javascript.programmer-reference.com/js-event-onmouseover-onmouseout/
