リンク要素をマウスオーバー時に画像表示するのデモページ

参考サイト様：CSS Lecture

テキスト表示

XHTML

<p><a href="http://www.css-lecture.com/template/2009/1001/" class="tooltip" title="参考サイト様：CSS Lecture">参考サイト様：CSS Lecture</a></p>

CSS

#tooltip{
	position: absolute;
	border: 3px solid #333;
	background: #444;
	padding: 5px;
	color: #FFF;
	display:none;
}

画像表示　キャンプションなし

• 
• 
• 
• 

XHTML-色をつけてます

<ul>

<li><a href="image/001.jpg" class="preview"><img src="image/001.jpg" alt="サンプル画像" width="150" /></a></li>

<li><a href="image/002.jpg" class="preview"><img src="image/002.jpg" alt="サンプル画像" width="150" /></a></li>

<li><a href="image/003.jpg" class="preview"><img src="image/003.jpg" alt="サンプル画像" width="150" /></a></li>

<li><a href="image/004.jpg" class="preview"><img src="image/004.jpg" alt="サンプル画像" width="150" /></a></li>
</ul>

CSS-色を付けています

#preview{
	position: absolute;
	border: 3px solid #333;
	background: #444;
	padding: 5px;
	display:none;
	color: #FFF;
	text-align: center;
}

画像表示　キャンプションあり

• 
• 
• 
• 

XHTML-色を付けています

<ul>

<li><a href="image/001.jpg" class="preview"title="サンプル画像１"><img src="image/001.jpg" alt="サンプル画像" width="150" /></a></li>

<li><a href="image/002.jpg" class="preview"title="サンプル画像２"><img src="image/002.jpg" alt="サンプル画像" width="150" /></a></li>

<li><a href="image/003.jpg" class="preview"title="サンプル画像３"><img src="image/003.jpg" alt="サンプル画像" width="150" /></a></li>

<li><a href="image/004.jpg" class="preview"title="サンプル画像４"><img src="image/004.jpg" alt="サンプル画像" width="150" /></a></li>
</ul>

CSS-色を付けています

#preview{
	position: absolute;
	border: 3px solid #333;
	background: #444;
	padding: 5px;
	display:none;
	color: #FFF;
	text-align: center;
}

Javascriptの変更出来るところ

/*
 * Tooltip script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * 
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */
 


this.tooltip = function(){	
	/* CONFIG */		
		xOffset = 20;
		yOffset = 20;		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result		
	/* END CONFIG */		
	$("a.tooltip").hover(function(e){											  
		this.t = this.title;
		this.title = "";									  
		$("body").append("
"+ this.t +"
");
		$("#tooltip")
			.css("top",(e.pageY - xOffset) + "px")
			.css("center",(e.pageX + yOffset) + "px")　※ledt/right/centerに変更出来る
			.fadeIn("fast");		
    },
	function(){
		this.title = this.t;		
		$("#tooltip").remove();
    });	
	$("a.tooltip").mousemove(function(e){
		$("#tooltip")
			.css("top",(e.pageY - xOffset) + "px")
			.css("center",(e.pageX + yOffset) + "px");　※ledt/right/centerに変更出来る
	});			
};



// starting the script on page load
$(document).ready(function(){
	tooltip();
});



this.imagePreview = function(){	
	/* CONFIG */
		
		xOffset = 10;
		yOffset = 30;
		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result
		
	/* END CONFIG */
	$("a.preview").hover(function(e){
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "
" + this.t : "";
		$("body").append("
"+ c +"
");								 
		$("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("center",(e.pageX + yOffset) + "px")　※ledt/right/centerに変更出来る
			.fadeIn("fast");						
    },
	function(){
		this.title = this.t;	
		$("#preview").remove();
    });	
	$("a.preview").mousemove(function(e){
		$("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("center",(e.pageX + yOffset) + "px");　※ledt/right/centerに変更出来る
	});			
};


// starting the script on page load
$(document).ready(function(){
	imagePreview();
});


this.screenshotPreview = function(){	
	/* CONFIG */
		
		xOffset = 10;
		yOffset = 30;
		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result
		
	/* END CONFIG */
	$("a.screenshot").hover(function(e){
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "
" + this.t : "";
		$("body").append("
"+ c +"
");								 
		$("#screenshot")
			.css("top",(e.pageY - xOffset) + "px")
			.css("center",(e.pageX + yOffset) + "px")　※ledt/right/centerに変更出来る
			.fadeIn("fast");						
    },
	function(){
		this.title = this.t;	
		$("#screenshot").remove();
    });	
	$("a.screenshot").mousemove(function(e){
		$("#screenshot")
			.css("top",(e.pageY - xOffset) + "px")
			.css("center",(e.pageX + yOffset) + "px");　※ledt/right/centerに変更出来る
	});			
};


// starting the script on page load
$(document).ready(function(){
	screenshotPreview();
});