[Request] Mouseover Tooltip for pictures in forumdisplay_thread

[Jumper]

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}">

---

[RateU]

If you only want a very simple tooltip for the picture, maybe you can try using CSS?

[Jumper]

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 ->

[RateU]

Could you post your custom thread field setting?

[Jumper]

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

[RateU]

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?

[Jumper]

(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

[RateU]

Ah, OK. Could you post your forumdisplay_thread template?

[Jumper]

HTML Code

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<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>

---

[RateU]

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

.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.