Hello,
i have a XThreads-field (key = pref_pic). the value is a link to a picture. now i want to display this picture using a mouseover in forumdisplay_thread view if you going with the mouse over the title. can someone tell me the best way to solve this task?
i think, that this code must be changed (of course other things too):
Code:
<a href="{$thread['threadlink']}" class="{$inline_edit_class} {$new_class}" id="tid_{$inline_edit_tid}">
|
If you only want a very simple tooltip for the picture, maybe you can try using CSS?
sure, a very simple tooltip is ok
but i don´t know what i must do. i mean the combination between xthread-field and css,
and the places to build in the codes. need really help, sorry. at the moment i feel like ->
Could you post your custom thread field setting?
Sure...
Key: pref_pic2
Input Field Type: Textbox
Editable by: Everyone
Display Parsing: Plain text
Display Format:
HTML Code
<img src="{$mybb->settings['bburl']}/images/dot_preview.gif" onmouseover="this.src='{VALUE}'; " onmouseout="this.src='{$mybb->settings['bburl']}/images/dot_preview.gif';" /> ⇦ Preview
|
My Display Format is not a good solution. the user must go to the dot-picture to see the preview. this is the reason why i need a mouseover for the thread-titles 
And where are the real images you want to be displayed on the tooltip saved?
Are they uploaded via a custom thread field or a fixed image?
(09-19-2011 01:43 AM)RateU Wrote: [ -> ]Are they uploaded via a custom thread field or a fixed image?
All pictures are uploaded to a imagehoster like imageshack etc. und we use the direct-link (hotlink) to the picture
Ah, OK. Could you post your forumdisplay_thread template?
HTML Code
<tr>
<td align="center" class="{$bgcolor}" width="2%"><img src="{$theme['imgdir']}/{$folder}.gif" alt="{$folder_label}" title="{$folder_label}" /></td>
<td align="center" class="{$bgcolor}" width="2%">{$icon}</td>
<td class="{$bgcolor}">
{$attachment_count}
<div>
{$threadsolved} {$GLOBALS['threadfields']['pref_incorrect']} {$GLOBALS['threadfields']['pref_intelligen']} {$GLOBALS['threadfields']['pref_qual']} {$GLOBALS['threadfields']['pref_video']} {$GLOBALS['threadfields']['pref_audio']} {$GLOBALS['threadfields']['pref_quala']} {$GLOBALS['threadfields']['pref_soft']} {$GLOBALS['threadfields']['pref_games']} {$GLOBALS['threadfields']['pref_doku']} {$GLOBALS['threadfields']['pref_suche']} {$GLOBALS['threadfields']['pref_mvideo']} <span>{$prefix} {$gotounread} <a href="{$thread['threadlink']}" class="{$inline_edit_class} {$new_class}" id="tid_{$inline_edit_tid}">{$cttd1}{$thread['subject']}{$cttd2}</a>
{$thread['multipage']}</span>
<div class="author smalltext">{$thread['profilelink']}</div><div> {$GLOBALS['threadfields']['pref_pic2']} </div>
</div>
</td>
<td align="center" class="{$bgcolor}"><a href="javascript:MyBB.whoPosted({$thread['tid']});">{$thread['replies']}</a>{$unapproved_posts}</td>
<td align="center" class="{$bgcolor}">{$thread['views']}</td>
{$rating}
<td class="{$bgcolor}" style="white-space: nowrap; text-align: right;">
<span class="lastpost smalltext">{$lastpostdate} {$lastposttime}<br />
<a href="{$thread['lastpostlink']}">{$lang->lastpost}</a>: {$lastposterlink}</span>
</td>
{$modbit}
</tr>
|
Find this code on yur template above:
HTML Code
<span>{$prefix} {$gotounread} <a href="{$thread['threadlink']}" class="{$inline_edit_class} {$new_class}" id="tid_{$inline_edit_tid}">{$cttd1}{$thread['subject']}{$cttd2}</a> {$thread['multipage']}</span>
|
Replace it with:
HTML Code
<span class="myspan">{$prefix} {$gotounread} <a href="{$thread['threadlink']}" class="{$inline_edit_class} {$new_class}" id="tid_{$inline_edit_tid}">{$cttd1}{$thread['subject']}{$cttd2}</a> {$thread['multipage']}{$GLOBALS['threadfields']['pref_pic2']}</span>
|
Maybe you need to remove the other {$GLOBALS['threadfields']['pref_pic2']} variable in that template.
Display Format for the pref_pic2 custom thread field:
HTML Code
<img src="{VALUE}" alt="" class="myimg" />
|
Then, add this class in your global.css or make it inline in your forumdisplay:
Code:
.myspan {
position: relative;
}
.myimg {
display: none;
}
.myspan:hover .myimg {
background: #1c1c1c;
display: block;
position: absolute;
top: 15px;
left: 2px;
padding: 5px;
z-index: 99;
}
|
The result is similar to this (hover the title):
http://xtest.byethost7.com/forumdisplay.php?fid=7
(The images come from YouTube.)
I think that is the basic. Modify it as your needs.