テキストリンクでマウスオーバーすると画像を表示させて、
リンク先はホームページのURLを表示させるにはどうしたらよいかわかる方いますか?
下記はググりながら作成したものですが、
これだとクリックした場合、画像とサイトが両方開いてしまうんです。
<script>
(function($){
$(function() {
xOffset = 20;
yOffset = 20;
$(".photo a").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<span class='caption'>" + this.t + "</span>" : "";
$("body").append("<div id='tooltip'><div class='img'><img src='"+ this.href +"' /></div>"+ c +"</div>");
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#tooltip").remove();
});
$(".photo a").mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
});
})(jQuery);
</script>
。
。
。
省略
。
。
。
<li><a onclick="window.open('http://sample.html')" href="img/test.jpg">○○○</a></li>
一緒に読まれている質問
3 件の回答
画像はaタグの小要素にして、CSSでa img {display:none;}しておく。
a:hover img { display:block}でマウスオーバーで表示させる
aタグのhref属性に普通にリンク先を書く
以上
<li><a href="http://sample.html" target="_blank" data-imgsrc="img/test.jpg">○○○</a></li>
リンクは普通にhref属性で、画像はdata属性にするとか
imgタグをホバーした時に追加しようとすると画像の読み込みのラグがあるからあんまりおススメしない。
シンプルに2みたいにCSSでdisplayやopacity等操作する感じが楽かと。