<style>
#preview {
width: 200px;
position: absolute;
border: 5px solid #fff;
background: #333;
padding: 5px;
display: none;
border-radius:5px;
color: #fff
}
</style>
<script type="text/javascript">
function onizle(obj) {
var a = $(obj);
a.each(function(e) {
$("body").append("<p id='preview'><img src='" + this.href + "' alt='Ön İzleme' />" + this.title + "</p>");
$("#preview").css({
"top": (event.pageY - 10) + "px",
"left": (event.pageX + 30) + "px"
}).fadeIn();
});
a.mousemove(function(e) {
$("#preview")
.css("top", ( event.pageY - 10) + "px")
.css("left", (event.pageX + 30) + "px");
})
}
function sil(obj) {
var a = $(obj);
// a.title = a.t;
$("#preview").remove();
}
</script>
<xf:set var="$forumIdleri" value="{{ ['64', '65', '66', '67', '68'] }}" />
<xf:if is="in_array($thread.node_id,$forumIdleri)">
<xf:if is="$thread.getfirstPostImgUrl()">
<a href="{$thread.getfirstPostImgUrl()}" class="preview" onmouseover="onizle(this)" onmouseout="sil(this)" title="{$thread.title}">
<img src="{$thread.getfirstPostImgUrl()}" alt="{$thread.title}" width="45"></a>
</xf:if>
<xf:else />
<xf:avatar user="$thread.User" size="s" defaultname="{$thread.username}" />
</xf:if>