生徒さんより質問を受けた内容を随時載せていきます。みなさまのご参考になればと思います。

マウスでｈｏｖｅｒした時離れた場所に表示されるやり方(リモートロールオーバー）

 

やり方は、下記のとおりです。

<!-- ↓ここに表示される -->
<img src="もとの画像URL" border="0" ID="msg2">
< !-- ↑ここに表示される -->

<a href="ページＵＲＬ" onMouseOver="msg2.src='表示したい画像URL'" onMouseOut="msg2.src='もとの画像URL'">
<img src="画像ＵＲＬ" border="0">
< /a>

（※上記のやり方だと、Safariでは、確認できません。）

Part2 マウスでｈｏｖｅｒした時離れた場所に表示されるやり方(リモートロールオーバー） safari OK

 

 

 

HTML

<div id="imgHover">

<p id="imgFrame">ここに画像を表示</p>

<ul id="imgHoverList">

<li><a href="#"><span class="thumbnail"><img src="img_sample01.png" alt="sample image" /></span>
<span class="mainImage"><img src="img_sample2_01.png" alt="sample image" /></span></a></li>

<li><a href="#"><span class="thumbnail"><img src="img_sample02.png" alt="sample image" /></span>
<span class="mainImage"><img src="img_sample2_02.png" alt="sample image" /></span></a></li>

<li><a href="#"><span class="thumbnail"><img src="img_sample03.png" alt="sample image" /></span>
<span class="mainImage"><img src="img_sample2_03.png" alt="sample image" /></span></a></li>

<li><a href="#"><span class="thumbnail"><img src="img_sample04.png" alt="sample image" /></span>
<span class="mainImage"><img src="img_sample2_04.png" alt="sample image" /></span></a></li>

</ul>

<!-- /#imgHover --></div>

CSS

#imgHover {
position: relative;
margin-top: 50px;
width: 710px;
}

#imgHover #imgFrame {
border: solid 3px #999;
position: absolute;
right: 0;
top: 0;
line-height: 124px;
text-align: center;
width: 200px !important;
width: 206px;
height: 124px !important;
height: 130px;
}

#imgHover #imgHoverList {
list-style: none;
position: relative;
}

#imgHover ul li {
float: left;
margin-right: 5px;
}

#imgHover ul li img {
border: none;
}

#imgHover ul li a {
display: block;
}

#imgHover ul li a:hover {
position: static;
}

#imgHover ul li a .mainImage {
display: none;
}

#imgHover ul li a:hover .mainImage {
display: block;
position: absolute;
top: 3px;
left: 507px !important;
left: 83px;
}