[Request] Mouseover Tooltip for pictures in forumdisplay_thread

[Jumper]

i just test it. wirh very small pictures it is working acceptable. but if you have bigger pictures,
you see if you use the mouseover no more thread-titles to click

hmm.... i think it is only a good result if we use a javascript tooltip.
sorry, that your work can not be used at the moment

is it hard to build in something with java? i found this very good tooltip:
http://www.walterzorn.de/en/tooltip/tooltip_e.htm

but i don´t know if it is possible tu use it here by this problem. Any idea RateU ?

[RateU]

I've tried it with 800x600 image actually, and I don't have any problem at all. The "tooltip" will be displayed under the link. And you can always set the max-width for the image/tooltip.

For the javascript tooltip, I think there are many nice javascript tootltip out there. Unfortunately, I never tried it. Each javascript tooltip has their own way to implement it. For your example above, it seems that you need to put it inside the anchor tag.

[Jumper]

the problem is, that you cannot scroll down and read the other threads, cause the picture don´t go away if you stand on the picture. looks not very good.

//Edit

Please wait, i have a solution and i will post it complete later

[ZiNgA BuRgA]

You could just hide the image when the user hovers their mouse over, eg:

Code:

.myimg:hover { display: none !important }

---

[Jumper]

@ZiNgA BuRgA
yes i know. thx

So, at first a big thank you to RateU

only with you i found the correct way to solve my problem.
i use now a javascript version and here now what to do, if another user will build in a mouseover.

Info: you need the direct-links (hotlinks) to the picture!
(i use Picture-Hosts in my forum like imageshack etc.)
all funktions like inline-titel-moderation in forum-threadview etc. are
working fine after modification! and don´t forget to save original templates
before you change something.

1. Download the wz_tooltip.zip:
http://www.walterzorn.de/en/tooltip/tool...http://www.walterzorn.de/en/tooltip/tooltip_e.ht

2. Create a folder in your forum-root named "tooltip"
3. Upload the zip-content (3 .js-files)  into the new folder.
4. Create a Custom Thread Fields with this settings:

Title: Picture as Mouseover
Key: pref_pic2
Description: Give a short description about the file.
Applicable Forums: 'select the forums you want'
Input Field Type: Textbox
Display Format:

HTML Code

<img src=\'{VALUE}\' width=\'300\' height=\'100%\'>

---

(modify the width and height as you need)

5. find this code in your templates forumdisplay_thread & search_results_threads_thread

HTML Code

<span>{$prefix} {$gotounread}<a href="{$thread['threadlink']}" class="{$inline_edit_class} {$new_class}" id="tid_{$inline_edit_tid}">{$thread['subject']}</a>{$thread['multipage']}</span>

---

replace it with:

HTML Code

<span>{$prefix} {$gotounread}<a href="{$thread['threadlink']}" class="{$inline_edit_class} {$new_class}" id="tid_{$inline_edit_tid}" onmouseover="Tip('{$GLOBALS['threadfields']['pref_pic2']}')" onmouseout="UnTip()">{$thread['subject']}</a>{$thread['multipage']}</span>

---

6. add the following code in your header template:

HTML Code

<script type="text/javascript" src="tooltip/wz_tooltip.js"></script>

---

that´s all

thank you again RateU and sry, that i make so much work for you and now take another solution,
but this way looks better. really nice mouseover now

[RateU]

Glad you can solve your problem