Topic: Tooltip in SP Block

[Skaty]

Hi, i have SP Block that shows first images (with link) specific boards like news. I wanna to ask, how can i make a little tooltip to show topic's title or the topic's content ?

like this.



OR can i entegrate this mod with it ?
http://www.simplemachines.org/community/index.php?topic=336505.0

these are codes codes i'm using in SP block.

Code: [Select]

global $smcFunc, $scripturl;
$boards = array(2);
$request = $smcFunc['db_query']('', '
   SELECT t.id_topic, m.subject, m.body
   FROM {db_prefix}topics AS t
      INNER JOIN {db_prefix}messages AS m ON (m.id_msg = t.id_first_msg)
   WHERE t.id_board IN ({array_int:boards})
   ORDER BY t.id_topic DESC
        LIMIT {int:limit}',
   array(
      'boards' => $boards,
                'limit' => 25,
   )
);
$topics = array();
while ($row = $smcFunc['db_fetch_assoc']($request))
   $topics[] = array(
      'id_topic' => $row['id_topic'],
      'body' => $row['body'],
      'first_image' => preg_match_all('~\[img[^]]*\]([^]]*)\[\/img\]~i', $row['body'], $images) ? '<img src="' . $images[1][0] . '" alt="' . $row['subject'] . '" height="40" width="80" />' : '',
   );
$smcFunc['db_free_result']($request);
echo '
         <center><table>
            <tr>
               <td>
                  <marquee onmouseover="this.stop()" onmouseout="this.start()"  height="100%" scrollamount="0" scrolldelay="0" direction="left"  loop="infinite">
                  <table></center></tr>';
foreach ($topics as $topic)
   echo '
                        <td><div class="mansetyan">
                        <a href="', $scripturl, '?topic=', $topic['id_topic'], '.0"><font color=red size=1 ALIGN="Center" width="50">', $topic['subject'], '</font>', $topic['first_image'], '</a>
                         </td>';
echo '
                       
                     </table>
                  </marquee>
               </td>
         </tr></table></div>';

[Skaty]

any idea for this ??

[Chen Zhen]

Skaty,

  I can give you a tool tip script that is not exactly the same but is close to what you describe. You can adjust its settings and mess with the images to attempt to have it appear exactly as you wish.

Download the attached package and install it on your forum via the package manager.

Use this PHP block after the Tooltips mod is installed:

Code: [Select]

global $smcFunc, $scripturl, $settings;

/* Edit these variables */
$imageWidth = 80;
$imageHeight = 40;
$imageSpacing = 25;
$boards = array(1,2);
$direction = 'right';
$delay = 150;
$showText = false;
$blockHeight = '100%';


if (strpos($blockHeight, '%') === false && (int)$blockHeight > (int)$imageHeight)
  $marginTop = 'margin-top:'.((int)$blockHeight - (int)$imageHeight) . 'px;';
else
  $marginTop = false;

echo '
<script type="text/javascript">
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", "'.$settings['default_theme_url'].'/css/tooltip.css?fin20")
  window.onload = document.getElementsByTagName("head")[0].appendChild(fileref);
</script>';

$request = $smcFunc['db_query']('', '
              SELECT t.id_topic, m.subject, m.body
              FROM {db_prefix}topics AS t
              INNER JOIN {db_prefix}messages AS m ON (m.id_msg = t.id_first_msg)
              WHERE t.id_board IN ({array_int:boards})
              ORDER BY t.id_topic DESC
              LIMIT {int:limit}',
              array(
                'boards' => $boards,
                'limit' => 25,
              )
            );

$topics = array();
while ($row = $smcFunc['db_fetch_assoc']($request))
  $topics[] = array(
              'id_topic' => $row['id_topic'],
              'body' => $row['body'],
              'subject' => $row['subject'],
              'first_image' => preg_match_all('~\[img[^]]*\]([^]]*)\[\/img\]~i', $row['body'], $images) ? '<img src="' . $images[1][0] . '" alt="' . $row['subject'] . '" style="height:'.$imageHeight.'px;width:'.$imageWidth.'px;" />' : '',
              );
$smcFunc['db_free_result']($request);

echo '
<div id="image" style="height:'.$blockHeight.';width:100%;display:block;border:0px;'.$marginTop.'">
  <marquee onMouseover="this.stop()" onMouseout="this.start()" SCROLLDELAY='.$delay.' direction='.$direction.'  loop="infinite">';

foreach ($topics as $key => $topic)
{
  if ($topic['first_image'])
  {
    if ($showText)
      $text = '<br />' . $topic['subject'];
    else
      $text = false;
     
    echo '
    <span  id="hotspot'.$key.'" onmouseover="tooltip.show(\''.$topic['subject'].'\');" onmouseout="tooltip.hide();" style="padding-left:'.((int)$imageSpacing/2).'px;padding-right:'.((int)$imageSpacing/2).'px;text-align:center;display:table-cell;color:red;font-size:10px;">
      <a href="'. $scripturl. '?topic='. $topic['id_topic']. '.0" style="text-decoration:none;">' . $topic['first_image'] . $text . '</a>
    </span>';
  }
                 
}

echo '
  </marquee>
</div>
<script type="text/javascript" src="',$settings['default_theme_url'],'/scripts/tooltip.js?fin20"></script>';


[Skaty]

Thank you Underdog.  But i didn't understand how exatly i can use it. i installed it like use said and created a php block and i use the codes.  but block is showing empty. how exatly i can entegrate these codes together ?

[Chen Zhen]

Skaty,

  I was not sure exactly what you were after regarding the db query. Your original code only grabs the first bbc image (or any initial img code of the message body) of every first post of a thread from the opted board(s) which is what the code I provided does (although it was fixed up a bit). Which images are you attempting to display exactly? I can edit the code to grab the images you are after when I have this info.

[Skaty]

Underdog, i just find some codes that what i need. these codes has a tooltip thing can we entegrate this to mine codes ?


These codes has a something like tooltip it is very nice. i want to entegrate this function to mine codes in first post.

Code: [Select]

<?php
 
//SETUP

$number_of_posts =5; // Kac konu gosermek istiyorsaniz 10 sayisini duzenleyin
$default_avatar = 'http://www.psvitaturkiye.com/forum/Themes/vivanto_20/images/athenea/no_avatar.png'; // Sitenizin avatar urelesini sizinkiyle degisin 'http://www.url.com/image.jpg'

//SETUP END
global $contex, $txt, $settings;
$array = ssi_recentTopics($number_of_posts, null, null, 'array');
echo '
<table class="side_class_row">';
foreach ($array as $post)
{
global $memberContext;
      loadMemberData($post['poster']['id']);
      loadMemberContext($post['poster']['id']);
echo '
  <tr>
<td class="side_class_replies">', $post['replies'], '</td>
            <td  class="side_class_new">';
                if (!empty($post['new']) )
                    echo'';
                else
                    echo'
                    <img src="' . $settings['lang_images_url'] . '/new.gif" class="new_posts" alt="new" />';
             echo'
            </td>
            <td></td>
     <td><div class="triangle-isosceles" id="a', $post['topic'], '" style="display: none">', $post['preview'], '</div>
                    <a href="'. $post['href']. '" target="_self" onmouseover="document.getElementById(\'a', $post['topic'], '\').style.display = \'block\'" onmouseout="document.getElementById(\'a', $post['topic'], '\').style.display = \'none\'">', $post['short_subject'], '</a>
             </td>
<td>';
            if (!empty($memberContext[$post['poster']['id']]['avatar']['href'])){
echo '<img src="' . $memberContext[$post['poster']['id']]['avatar']['href'] . '" width="30" height="30" alt="', $post['poster']['name'], '" />';
                    }            
            else { 
echo '<img src="' . $default_avatar .'" alt="default_avatar" width="30" height="30" />';
                }
        echo'
            </td>
            <td></td>
     </tr>
        <tr>
            <td colspan="6"><p class="side_class_poster"><span class="floatleft">', $txt['replies'], '</span> ', $post['poster']['link'], ' </p><hr class="side_hr" /></td>
        </tr>';
}
echo '
    </table> 
<style type="text/css"> 
.side_class_poster
{
     font-size:10px;
     margin: 0;
     padding: 0;
     text-align: right;
}
table.side_class_row hr
     margin: 0;
     padding: 0;
}
.side_class_row
{
     padding:4px;
     width: 100%;
}
td.side_class_replies
{
     text-align:center;
     width:3%;
}
td.side_class_new
{
     text-align:center;
     width:4%;
}
.triangle-isosceles {
    position: fixed;
    top: 300px;
    left: 400px;
    padding:15px;
    margin:1em 0 3em;
    color:#fff;
    max-width: 400px;
    border: 1px solid #222222;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    -moz-box-shadow: 3px 3px 39px 2px #222222;
    -webkit-box-shadow: 3px 3px 39px 2px #222222;
    box-shadow: 3px 3px 39px 2px #222222;
    background: #2989d8; /* Old browsers */
    background: -moz-linear-gradient(top, rgba(41,137,216,0.9) 0%, rgba(30,87,153,0.9) 94%, rgba(30,87,153,0.9) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(41,137,216,0.9)), color-stop(94%,rgba(30,87,153,0.9)), color-stop(100%,rgba(30,87,153,0.9)));
    background: -webkit-linear-gradient(top, rgba(41,137,216,0.9) 0%,rgba(30,87,153,0.9) 94%,rgba(30,87,153,0.9) 100%);
    background: -o-linear-gradient(top, rgba(41,137,216,0.9) 0%,rgba(30,87,153,0.9) 94%,rgba(30,87,153,0.9) 100%);
    background: -ms-linear-gradient(top, rgba(41,137,216,0.9) 0%,rgba(30,87,153,0.9) 94%,rgba(30,87,153,0.9) 100%);
    background: linear-gradient(top, rgba(41,137,216,0.9) 0%,rgba(30,87,153,0.9) 94%,rgba(30,87,153,0.9) 100%);
    }
</style>';
?>

[Divecall]

Maybe this is the solution, but i dont speak turkish...

http://destek.smfmod.com/sp-block-icin-tooltips-t21037.0.html

[Skaty]

That topic is mine too   i find these second codes from there i just entegrate them together. i think it is not too hard but need to know a little php :/

[Chen Zhen]

Skaty,

  The two different codes you posted in this thread leave me puzzled as to exactly what you want to display.
Tell me in words what you want to display and how you want it displayed.

ie.

• Most recent posts or is it most recent topics?
• How many in total you want to display
• Do you want this displayed in a scrolling marquee or do you want it displayed in a table?
• What image do you want to display? ie. the posters avatar? an image from their post? which?
• What text do you want displayed in the tooltip for each image?

If you wish to see an example of the tooltip I posted before, include the necessary board id(s) in the block code ( $boards = array(1,2); )  and then make a new test topic that has a bb-code image in it. I understand it is not the setup you were after but I want to know if that specific tooltip graphic is to your liking else I will show you how to dynamically implement the css from the second code you provided.

[Skaty]

Underdog, first of all thank you for your kind support.

My english is not so good so i'm trying to explain it as much as i can.

the first codes are just fine like i want to. the numbers and image size are correct. just want to add the tooltip in second codes. if you have a chance to try them you will see what i try to say. i can give you my test board if you need.

i can't make it work the codes you where given me. if you have it installed can you just send me a screenshot.

thank you again.


ps: i make it work your codes. it is look well. we can use this one too but still have to entegrate them with my first codes. can you. pls do that which one is easy for you

[Chen Zhen]

Skaty,

  I am still not sure exactly what you want displayed and it would be better for you to explain exactly what it is. You are asking me to merge things from both codes but which specifically? If what I am about to post is not correct then please attempt to translate my previous questions and answer all of them.


Based on the code in your last post, I will show you 2 scenarios that you can use.

#1 will use the tooltip style that I provided & requires that you install the mod spTooltips-v1.0 that I previously gave you.

Code: [Select]

// SETUP - Tooltip#1

$number_of_posts =5; // Kac konu gosermek istiyorsaniz 10 sayisini duzenleyin
$default_avatar = 'http://www.psvitaturkiye.com/forum/Themes/vivanto_20/images/athenea/no_avatar.png'; // Sitenizin avatar urelesini sizinkiyle degisin 'http://www.url.com/image.jpg'

// SETUP END
global $context, $txt, $settings, $memberContext;
$array = ssi_recentTopics($number_of_posts, null, null, 'array');
echo '
<table style="padding:4px;width: 100%;">';
foreach ($array as $post)
{
loadMemberData($post['poster']['id']);
loadMemberContext($post['poster']['id']);
echo '
<tr>
<td style="text-align:center;width:3%;">', $post['replies'], '</td>
<td  style="text-align:center;width:4%;">';
if (empty($post['new']) )
echo'
<img src="' . $settings['lang_images_url'] . '/new.gif" class="new_posts" alt="new" />';
echo'
</td>
<td>
<script type="text/javascript"><!-- // --><![CDATA[
var postBody_',$post['topic'],' = ', json_encode(iconv($context['character_set'], 'UTF-8', $post['preview'])),'
//]]></script>
</td>
<td>
<a href="'. $post['href']. '" target="_self" onmouseover="tooltip.show(postBody_',$post['topic'],');" onmouseout="tooltip.hide();">', $post['short_subject'], '</a>
</td>
<td>';
if (!empty($memberContext[$post['poster']['id']]['avatar']['href']))
echo '<img src="' . $memberContext[$post['poster']['id']]['avatar']['href'] . '" width="30" height="30" alt="', $post['poster']['name'], '" />';
else 
echo '<img src="' . $default_avatar .'" alt="default_avatar" width="30" height="30" />';
               
echo'
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="6">
<p style="font-size:10px;margin: 0;padding: 0;text-align: right;"><span class="floatleft">', $txt['replies'], '</span> ', $post['poster']['link'], ' </p>
<hr style="margin: 0;padding: 0;" />
</td>
</tr>';
}
echo '
</table>
<script type="text/javascript">
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", "'.$settings['default_theme_url'].'/css/tooltip.css?fin20")
window.onload = document.getElementsByTagName("head")[0].appendChild(fileref);
</script>
<script type="text/javascript" src="',$settings['default_theme_url'],'/scripts/tooltip.js?fin20"></script>';


#2 For the css styling of the tooltip code you last posted you forgot a curly bracket which is why it would not work. I would also like to point out that you are not supposed to use style code in the body of a HTML page as it belongs in the head of it. I will show you how to dynamically add that css code to the head of your document with the code & file below.

If you opt to use the second (#2) code then make sure to upload the attached css file via FTP to:
/Themes/default/css

Code #2:

Code: [Select]

// SETUP - Tooltip#2

$number_of_posts =5; // Kac konu gosermek istiyorsaniz 10 sayisini duzenleyin
$default_avatar = 'http://www.psvitaturkiye.com/forum/Themes/vivanto_20/images/athenea/no_avatar.png';

// SETUP END
global $context, $txt, $settings, $memberContext;
$array = ssi_recentTopics($number_of_posts, null, null, 'array');
echo '
<table class="side_class_row">';

foreach ($array as $post)
{
loadMemberData($post['poster']['id']);
loadMemberContext($post['poster']['id']);
echo '
<tr>
<td class="side_class_replies">', $post['replies'], '</td>
<td  class="side_class_new">';
if (empty($post['new']) )
echo'
<img src="' . $settings['lang_images_url'] . '/new.gif" class="new_posts" alt="new" />';

echo'
</td>
<td>&nbsp;</td>
<td>
<div class="triangle-isosceles" id="a', $post['topic'], '" style="display: none">', $post['preview'], '</div>
<a href="'. $post['href']. '" target="_self" onmouseover="document.getElementById(\'a', $post['topic'], '\').style.display = \'block\'" onmouseout="document.getElementById(\'a', $post['topic'], '\').style.display = \'none\'">', $post['short_subject'], '</a>
</td>
<td>';
if (!empty($memberContext[$post['poster']['id']]['avatar']['href']))
echo '
<img src="' . $memberContext[$post['poster']['id']]['avatar']['href'] . '" width="30" height="30" alt="', $post['poster']['name'], '" />';
                               
else 
echo '
<img src="' . $default_avatar .'" alt="default_avatar" width="30" height="30" />';
               
echo'
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="6">
<p class="side_class_poster"><span class="floatleft">', $txt['replies'], '</span> ', $post['poster']['link'], ' </p>
<hr class="side_hr" />
</td>
</tr>';
}
echo '
</table>
<script type="text/javascript">
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", "'.$settings['default_theme_url'].'/css/tooltip_style.css?fin20")
window.onload = document.getElementsByTagName("head")[0].appendChild(fileref);
</script>';


  Test out the two codes and opt which one you prefer.

[Skaty]

  I am still not sure exactly what you want displayed and it would be better for you to explain exactly what it is. You are asking me to merge things from both codes but which specifically?

Like i said. my first codes are shown what a try to show. can you look at these codes ? i do not want to show posts, i'm showing topics and first image of it. like in my first codes i gave you. these codes are ready. what i want from you is tooltip. and this tooltip is in second codes i gave you in first post. do not touch first codes. just take tooltip properties from second codes and add them to first codes. this is what i want.





and final



i hope this explain what i want.

[Chen Zhen]

Skaty,

What image do you want displayed? The posters avatar or something they attach?

[Skaty]

No need for avatar but we can add a date on it.

Thank you.

[Chen Zhen]

Skaty,

  Here is the code to show most recent topics with their first bbc image included in the body of the first post of those topics (as per your original code). If the starting topic does not have a bbc image included, it will not show it. This is using the tooltip that you provided.

Make sure to have the tooltip_style.css file in the proper directory:
/Themes/default/css/tooltip_style.css

Code: [Select]

global $smcFunc, $scripturl, $settings;

/* Edit these variables */
$imageWidth = 80;
$imageHeight = 40;
$imageSpacing = 25;
$boards = array(1,2);
$direction = 'left';
$delay = 150;
$showText = false;
$blockHeight = '100%';
$showLinks = false;
$maxChars = 150;

/* Do not edit below this line */

if (strpos($blockHeight, '%') === false && (int)$blockHeight > (int)$imageHeight)
$marginTop = 'margin-top:'.((int)$blockHeight - (int)$imageHeight) . 'px;';
else
$marginTop = false;

echo '
<script type="text/javascript">
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", "'.$settings['default_theme_url'].'/css/tooltip_style.css?fin20")
  window.onload = document.getElementsByTagName("head")[0].appendChild(fileref);
</script>';

$request = $smcFunc['db_query']('', '
              SELECT t.id_topic, m.subject, m.body, m.smileys_enabled, m.id_msg
              FROM {db_prefix}topics AS t             
              INNER JOIN {db_prefix}messages AS m ON (m.id_msg = t.id_first_msg)
              WHERE t.id_board IN ({array_int:boards})
              ORDER BY t.id_topic DESC
              LIMIT {int:limit}',
              array(
                'boards' => $boards,
                'limit' => 25,
              )
            );

$topics = array();
while ($row = $smcFunc['db_fetch_assoc']($request))
{
$body = $row['body'];
$row['body'] = strip_tags(strtr(parse_bbc($row['body'], $row['smileys_enabled'], $row['id_msg']), array('<br />' => ' ')));
if (!$showLinks)
$row['body'] = preg_replace('@(https?://([-\w\.]+)+(:\d+)?(/([\w/_\.]*(\?\S+)?)?)?)@', '[link]',$row['body']);

if ($smcFunc['strlen']($row['body']) > $maxChars)
$row['body'] = $smcFunc['substr']($row['body'], 0, $maxChars) . '...';

censorText($row['subject']);
censorText($row['body']);
        $row['body'] = preg_replace('/\s{2,}/',' ',html_entity_decode($row['body']));
        $row['body'] = wordwrap($row['body'], 60, "<br />\n", true);
$topics[] = array(
'id_topic' => $row['id_topic'],
'body' => $row['body'],
'subject' => $row['subject'],
'first_image' => preg_match_all('~\[img[^]]*\]([^]]*)\[\/img\]~i', $body, $images) ? '<img src="' . $images[1][0] . '" alt="' . $row['subject'] . '" style="height:'.$imageHeight.'px;width:'.$imageWidth.'px;" />' : '',
);
}
$smcFunc['db_free_result']($request);

echo '
<div id="image" style="height:'.$blockHeight.';width:100%;display:block;border:0px;'.$marginTop.'">
<marquee onMouseover="this.stop()" onMouseout="this.start()" scrolldelay='.$delay.' direction='.$direction.'  loop="infinite">';

foreach ($topics as $key => $topic)
{
if ($topic['first_image'])
{
if ($showText)
$text = '<br />' . $topic['subject'];
else
$text = false;

echo '
<div class="triangle-isosceles" id="tooltip', $key, '" style="display: none;">', $topic['body'], '</div>
<span  id="hotspot'.$key.'" onmouseover="document.getElementById(\'tooltip', $key, '\').style.display = \'block\'" onmouseout="document.getElementById(\'tooltip', $key, '\').style.display = \'none\'" style="float:left;padding-left:'.((int)$imageSpacing/2).'px;padding-right:'.((int)$imageSpacing/2).'px;text-align:center;display:table-cell;color:red;font-size:10px;">
<a href="'. $scripturl. '?topic='. $topic['id_topic']. '.0" style="text-decoration:none;">' . $topic['first_image'] . $text . '</a>
</span>';
}
                 
}

echo '
</marquee>
</div>';

  You edit the first few variables to fine tune it how you want. Btw marquee is actually deprecated & should be replaced by a javascript/jQuery equivalent but this is what you originally provided so I used it.

File is attached again.

[Skaty]

Thank you Underdog, you are awesome Finally tooltips are working.

But i don't want a left moving, just want to stop them (no moving). My first codes not moving too. how can i stop it ? i don't like the moving thing, because they are shaking. do you have bette idea ? how is javascript/jQuery thing ?



ps: i deleted the direction thing but still moving
ps2: some of the pictures are two in one block, not a one line, is it because the moving thing ?

[Chen Zhen]

Skaty,

  Your very first code has the marquee code in it which scrolls the content. You asked to have the two codes merged so I included the marquee in the code. This is why I asked you to explain in words for the exact format you were after. Just asking me to merge two codes left me guessing as to which content you wanted to include exactly. If you wanted just icons evenly spaced in horizontal format (without the scrolling marquee) you could have just stated this prior.

  I will rewrite the code in a table that will display it how you describe. How many icons (topics) do you want to display horizontally?
 

[Skaty]

But first codes doesn't scrolling them, and they were horizontally

10 topics and 2px for each image would be good i think 

ps: is it possible to gave a color or some sign for new topics ?

[Chen Zhen]

Skaty,

  If you look at your first code you will see a <marquee> html tag which makes the content scroll horizontally. Perhaps some html was incorrect that was stopping it from scrolling so you did not know it did that? I always double check that mine is error free which imo enabled it to work properly for the code I provide.

  Anyhow, here is a code you can use & no css file is necessary. I assume when you stated 2px you were referring to the spacing of the images. The block shown below will evenly space the images but will only display them on one line. The amount of images can be set at the start of the block code but will be restricted to the width of the block (overflow is hidden). I included the author and date in the tooltip but you can set those to false if you do not want them to show.

Code: [Select]

global $smcFunc, $scripturl;

/* Edit these variables */
$imageWidth = 80;
$imageHeight = 40;
$imageAmount = 5;
$boards = array(1,2);
$showText = false;
$showLinks = false;
$showDate = true;
$showPoster = true;
$maxChars = 150;
$authorText = 'Author: ';
$linebreak = '<hr />';

/* Do not edit below this line */

$count = 0;
$tooltipStyle = '
position: fixed;
    top: 300px;
    left: 400px;
    padding:15px;
    margin:1em 0 3em;
    color:#fff;
    max-width: 400px;
    border: 1px solid #222222;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    -moz-box-shadow: 3px 3px 39px 2px #222222;
    -webkit-box-shadow: 3px 3px 39px 2px #222222;
    box-shadow: 3px 3px 39px 2px #222222;
    background: #2989d8; /* Old browsers */
    background: -moz-linear-gradient(top, rgba(41,137,216,0.9) 0%, rgba(30,87,153,0.9) 94%, rgba(30,87,153,0.9) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(41,137,216,0.9)), color-stop(94%,rgba(30,87,153,0.9)), color-stop(100%,rgba(30,87,153,0.9)));
    background: -webkit-linear-gradient(top, rgba(41,137,216,0.9) 0%,rgba(30,87,153,0.9) 94%,rgba(30,87,153,0.9) 100%);
    background: -o-linear-gradient(top, rgba(41,137,216,0.9) 0%,rgba(30,87,153,0.9) 94%,rgba(30,87,153,0.9) 100%);
    background: -ms-linear-gradient(top, rgba(41,137,216,0.9) 0%,rgba(30,87,153,0.9) 94%,rgba(30,87,153,0.9) 100%);
    background: linear-gradient(top, rgba(41,137,216,0.9) 0%,rgba(30,87,153,0.9) 94%,rgba(30,87,153,0.9) 100%);';

$request = $smcFunc['db_query']('', '
              SELECT t.id_topic, m.subject, m.body, m.smileys_enabled, m.id_msg, m.poster_time, m.id_member
              FROM {db_prefix}topics AS t             
              INNER JOIN {db_prefix}messages AS m ON (m.id_msg = t.id_first_msg)
              WHERE t.id_board IN ({array_int:boards})
              ORDER BY t.id_topic DESC
              LIMIT {int:limit}',
              array(
                'boards' => $boards,
                'limit' => 25,
              )
            );

$topics = array();
while ($row = $smcFunc['db_fetch_assoc']($request))
{
$body = $row['body'];
$row['body'] = strip_tags(strtr(parse_bbc($row['body'], $row['smileys_enabled'], $row['id_msg']), array('<br />' => ' ')));
if (!$showLinks)
$row['body'] = preg_replace('@(https?://([-\w\.]+)+(:\d+)?(/([\w/_\.]*(\?\S+)?)?)?)@', '[link]',$row['body']);

if ($smcFunc['strlen']($row['body']) > $maxChars)
$row['body'] = $smcFunc['substr']($row['body'], 0, $maxChars) . '...';

censorText($row['subject']);
censorText($row['body']);
        $row['body'] = preg_replace('/\s{2,}/',' ',html_entity_decode($row['body']));
        $row['body'] = wordwrap($row['body'], 60, "<br />\n", true);
$poster = ssi_fetchMember($row['id_member'], false);
$topics[] = array(
'id_topic' => $row['id_topic'],
'body' => $row['body'],
'subject' => $row['subject'],
'poster_id' => $showPoster ? ($authorText . $poster[$row['id_member']]['username'] . '<br />') : false,
'poster_time' => $showDate ? (date("F j, Y, g:i a", $row['poster_time']) . '<br />') : false,
'first_image' => preg_match_all('~\[img[^]]*\]([^]]*)\[\/img\]~i', $body, $images) ? '<img src="' . $images[1][0] . '" alt="' . $row['subject'] . '" style="height:'.$imageHeight.'px;width:'.$imageWidth.'px;" />' : '',
);
}
$smcFunc['db_free_result']($request);

echo '
<table style="width:100%;border:0px;text-align:center;">
<tr class="centertext">';

foreach ($topics as $key => $topic)
{
if ($topic['first_image'])
{
if ($showText)
$text = '<br />' . $topic['subject'];
else
$text = false;

if (!$topic['poster_id'] && !$topic['poster_time'])
$linebreak = false;

echo '               
<td style="font-size:11px;position:relative;">
<div id="tooltip', $key, '" style="display: none;',$tooltipStyle,'">
<span style="font-size:9px;position:relative;">', $topic['poster_id'], $topic['poster_time'], '</span>
', $linebreak, '
<span style="float:left;position:relative;">', $topic['body'], '</span>
</div>
<span  id="hotspot'.$key.'" onmouseover="document.getElementById(\'tooltip', $key, '\').style.display = \'block\'" onmouseout="document.getElementById(\'tooltip', $key, '\').style.display = \'none\'" style="text-align:center;">
<a href="'. $scripturl. '?topic='. $topic['id_topic']. '.0" style="text-decoration:none;">' . $topic['first_image'] . $text . '</a>
</span>
</td>';
$count++;
if ($count >= $imageAmount)
break;   
}             
}

echo '
</tr>
</table>';

  If after attempting to increase the $imageAmount a scroll bar appears (overflow bar) you can get rid of it by editing the block and in the bottom right corner where it says Custom Body Style: you enter this in the input box: overflow:hidden;

[Skaty]

Thank you Underdog, now all is okay i start to using it