訪問者がマウスをテーブルの行の上に置いたときに、マウスの横に画像を表示しようとしています。行ごとに、別の画像を表示したいと思います。
今のところ、テーブル セル内のコンテンツに対してのみ動作し、コンテンツ自体に対してのみ動作しますが、コンテンツがあるかどうかにかかわらず、行全体では動作しません。
次の jQuery コードを使用しています。
<script type="text/javascript">
this.screenshotPreview = function() {
/* CONFIG */
xOffset = 0;
yOffset = 0;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$(".screenshot").hover(function(e) {
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='screenshot'><img src='" + this.rel + "' alt='Drinkbak' />" + c + "</p>");
$("#screenshot")
.css("top", (e.pageY - xOffset) + "px")
.css("left", (e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function() {
this.title = this.t;
$("#screenshot").remove();
}
);
$(".screenshot").mousemove(function(e) {
$("#screenshot")
.css("top", (e.pageY - xOffset) + "px")
.css("left", (e.pageX + yOffset) + "px");
});
};
// starting the script on page load
$(document).ready(function() {
screenshotPreview();
});
</script>
機能するコードですが、表のセル内のコンテンツに対してのみ:
<tr onclick="window.open('/Drinkbak-type-B-80-geschikt-voor-rundvee-en-paarden_pr_850861?i-knop', '_blank');">
<td class="wkekaSubject"><a title="Drinkbak" class="screenshot" rel="http://dev-jarola3-nl.softlution.com/is-bin/intershop.static/WFS/Jarola-Wildkamp-Site/Jarola-Wildkamp/nl_NL/i-knoppen/850861.png">Drinkbak,<br />type B 80</a></td>
<td class="wkeka2Options wkekaOption1">X</td>
<td class="wkeka2Options wkekaOption2"> </td>
<td class="wkeka2Options wkekaOption3"> </td>
<td class="wkeka2Options wkekaOption4">X</td>
<td class="wkeka2Options wkekaOption5"> </td>
<td class="wkeka2Options wkekaOption6"> </td>
<td class="wkeka2Options wkekaOption7"> </td>
</tr>
ここでは、<a title="Drinkbak" class="screenshot" rel="http://dev-jarola3-nl.softlution.com/is-bin/intershop.static/WFS/Jarola-Wildkamp-Site/Jarola-Wildkamp/nl_NL/i-knoppen/850861.png">Drinkbak,<br />type B 80</a>
要素が画像のサムネイルを処理します。
このコードを表の行全体で機能させるのを手伝ってもらえますか?