[Request] Mouseover Tooltip for pictures in forumdisplay_thread
Jumper Offline
Member
***
Posts: 75
Joined: Aug 2010
Post: #1
[Request] Mouseover Tooltip for pictures in forumdisplay_thread
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}">

09-18-2011 12:38 AM
Find all posts by this user Quote this message in a reply
RateU Offline
Administrator
*******
Posts: 2,350
Joined: Mar 2010
Post: #2
RE: [Request] Mouseover Tooltip for pictures in forumdisplay_thread
If you only want a very simple tooltip for the picture, maybe you can try using CSS?

09-18-2011 03:31 AM
Find all posts by this user Quote this message in a reply
Jumper Offline
Member
***
Posts: 75
Joined: Aug 2010
Post: #3
RE: [Request] Mouseover Tooltip for pictures in forumdisplay_thread
sure, a very simple tooltip is ok Wink

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

Biggrin
09-18-2011 06:41 AM
Find all posts by this user Quote this message in a reply
RateU Offline
Administrator
*******
Posts: 2,350
Joined: Mar 2010
Post: #4
RE: [Request] Mouseover Tooltip for pictures in forumdisplay_thread
Could you post your custom thread field setting?

09-19-2011 01:02 AM
Find all posts by this user Quote this message in a reply
Jumper Offline
Member
***
Posts: 75
Joined: Aug 2010
Post: #5
RE: [Request] Mouseover Tooltip for pictures in forumdisplay_thread
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 Smile

09-19-2011 01:34 AM
Find all posts by this user Quote this message in a reply
RateU Offline
Administrator
*******
Posts: 2,350
Joined: Mar 2010
Post: #6
RE: [Request] Mouseover Tooltip for pictures in forumdisplay_thread
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
Find all posts by this user Quote this message in a reply
Jumper Offline
Member
***
Posts: 75
Joined: Aug 2010
Post: #7
RE: [Request] Mouseover Tooltip for pictures in forumdisplay_thread
(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
09-19-2011 01:50 AM
Find all posts by this user Quote this message in a reply
RateU Offline
Administrator
*******
Posts: 2,350
Joined: Mar 2010
Post: #8
RE: [Request] Mouseover Tooltip for pictures in forumdisplay_thread
Ah, OK. Could you post your forumdisplay_thread template?

09-19-2011 01:56 AM
Find all posts by this user Quote this message in a reply
Jumper Offline
Member
***
Posts: 75
Joined: Aug 2010
Post: #9
RE: [Request] Mouseover Tooltip for pictures in forumdisplay_thread

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>

09-19-2011 02:05 AM
Find all posts by this user Quote this message in a reply
RateU Offline
Administrator
*******
Posts: 2,350
Joined: Mar 2010
Post: #10
RE: [Request] Mouseover Tooltip for pictures in forumdisplay_thread
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.


09-19-2011 02:33 AM
Find all posts by this user Quote this message in a reply

« Next Oldest | Next Newest »

 Standard Tools
Forum Jump: