Warning: Trying to access array offset on value of type bool in /home/yotigory/codingmania.net/public_html/wp-content/plugins/search-everything/config.php on line 29
サムネイル画像のマウスオーバーで画像を大きく表示、クリックするとリンク先とびます。 - CodingMania

2014/5/7

サムネイル画像のマウスオーバーで画像を大きく表示、クリックするとリンク先とびます。

サムネイル画像にリンクを張っておき、クリックでリンク先へジャンプします。

ヘッダーで、jquery.jsと後述のswapimage.jsを読み込んでいます。
拡大画像の名前とサムネイル画像のclassを同じとすることで、サムネイル画像と拡大画像を別にしています。

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript" src="js/swapimage.js"></script> 

[swapimage.js]JavaScript

$(function(){
 $(".mod_thumbnail").each(function(){
  var set = $(this);
  var btn = set.find(".thumbnaillist li img");
  var image = set.find(".mainimglist img");
	// hover時
	$(btn).hover(function(){
    var imagesrc=$(this).attr("class");
		$(image).attr("src","img/"+imagesrc+".jpg").fadeIn();
		$(image).attr("alt",$(this).attr("title"));
	});
});
});

HTMl

<div class="mod_thumbnail">
<div class="thumbnaillist">
<ul class="ex_clearfix">
<li><a href="https://codingmania.net/" title="orange"><img class="image01" src="img/img01.jpg"></a></li>
<li><a href="https://www.google.co.jp/" title="green"><img class="image02" src="img/img02.jpg"></a></li>
<li><a href="http://www.yahoo.co.jp/" title="pink"><img class="image03" src="img/img03.jpg"></a></li>
<li><a href="http://www.amazon.co.jp/" title="blue"><img class="image04" src="img/img04.jpg"></a></li>
</ul>
<!-- thumbnaillist_end --></div>

<div class="mainimglist">
<img src="img/image01.jpg" alt="orange">
<!-- mainimglist_end --></div>
<!-- mod_thumbnail_end --></div>

CSS

/* サムネイル画像表示(thumbnaillist)
-----------------------------------------*/
.thumbnaillist{
	margin:10px 0 0 0;
}
.thumbnaillist ul{
}
.thumbnaillist li{
	width:60px;
	height:auto;
	float:left;
	background:none;
	padding:0 10px 0px 0;
	margin:0 0 10px 0;
}
.thumbnaillist li img{
	width:60px;
	height:auto;
}
.thumbnaillist li a{
	display:block;
}
.thumbnaillist li a:link    {}
.thumbnaillist li a:visited {}
.thumbnaillist li a:hover   {opacity:0.8;}
.thumbnaillist li a:active  {opacity:0.8;}
/* IE用 ↓*/
.thumbnaillist li a:hover img {filter:alpha(opacity=80);}


/* メイン画像表示(mod_mainimglist)
-----------------------------------------*/
.mainimglist{
	width:700px;
	height:350px;
	margin:0 0 0 0;
}
.mainimglist img{
}

/* clearfix:float解除&親要素に高さを算出させる
-----------------------------------------*/
.ex_clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}
.ex_clearfix {
  min-height: 1px;
}
* html .ex_clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}