Искачащо блокче при mousover

M

MaLa_NocHe

Registered
Виждали ли сте в импулс.бг как като сложиш мишката върху даден ник и ти искарва сникмата му и даден текст до нея във едно малко блокче такова бяло правоъгълниче, може ли да кажете как става тоя номер или някав код JS да ми дадете.
 
Варианти много. Имаш ли вече използвана на сайта някаква js библиотека - jquery, prototype? Ако имаш, има готови скриптиове за тях. Ако не виж например тези:

http://www.dyn-web.com/code/tooltips/
http://www.walterzorn.com/tooltip/tooltip_e.htm

или

http://www.google.bg/search?hl=bg&rlz=1G1GGLQ_ENBG310&q=javascript+tooltip+with+images&btnG=%D0%A2%D1%8A%D1%80%D1%81%D0%B5%D0%BD%D0%B5&meta=
 
Ам от първия линк свалих едно и файла на ефекта е

html_els.html слагам го но аз искам да бъде в цикъла, смисъл за всеки нов линк който излезе да извежда неговата собствена информация а не само една и съща..как да стане?
 
Така ?

Код: 
<script src="js/dw_event.js" type="text/javascript"></script>
<script src="js/dw_viewport.js" type="text/javascript"></script>
<script src="js/dw_tooltip.js" type="text/javascript"></script>
<script src="js/dw_tooltip_aux.js" type="text/javascript"></script>

<?php

$users = array('vasko', 'mitko', 'mimi');
	$links = array();
	$tooltips = array();

	foreach($users as $key => $link){
	    $links[] = '<a href="put-some-href-here" class="showTip link'.$key.'">'.$link.'</a>';
	    $tooltips[] = 'link'.$key.': "<div class="img">Tooltip content for link '.$key.'<br /><img src="images/avatar'.$key.'.gif" /></div>"';
	}

	echo join("<br />\r\n", $links) . "\r\n";
	echo "<script type=\"text/javascript\">\r\n";
	echo "dw_Tooltip.content_vars = {\r\n\t" . join(",\r\n\t", $tooltips) . "\r\n}\r\n";
        echo "dw_Event.add( window, 'load', dw_Tooltip.init );\r\n";
        echo "dw_Event.add( window, 'load', dw_Tooltip.initHandlers );\r\n";
	echo "</script>";

?>
 
аа ето моя код за извеждане на новините искам на него ако можеш щоот оня код направо ме обърка:

Код: 
					<table>
					<?php
					$page = (int)$_GET['page'];
					if($page == 0 || $page == NULL || $page <0)
					{
						$page = 1;
					}
					$pp = 10;
					$start = ($page*$pp) - $pp;
					$query2 = mysql_query("SELECT * FROM imdb_news") or die (mysql_error());
					$broi2 = mysql_num_rows($query2);
					$total = ceil($broi2/$pp);
					$moreViewsNews = mysql_query("SELECT * FROM imdb_news ORDER by views DESC LIMIT $start,$pp");
					while($data = mysql_fetch_assoc($moreViewsNews))
					{
					$idNew2 = $data['idNew'];
					$title2 = $data['title'];
					?>
					<tr><td><center><img src="<?=$data['piclink']?>" width="64px" height="64px"><br /></center></td><td><a href="read_more.php?idNew=<?=$idNew2?>" style="color:green;text-decoration:none;"><?=$title2?></a></td></tr>
					<?php
					}
					echo "</table>";
					print "Общо добавени новини (<span style='color:green;'><strong><i>$broi2</i></strong></span>)";
					$prev = $page - 1;
					$next = $page +1;
					if($page == 1)
					{
						echo "<center>Предишна ";
					}
					else{
						echo "<a href='?id=$id2&page=$prev'>Предишна</a> ";
					}
					if($page >= $total)
					{
						echo " Следваща";
					}
					else{
						echo " <a href='?id=$id2&page=$next'>Следваща</a>";
					}
					echo "<br />Страница $page от $total </center>";
					}
					?></center>

Искам кода за<img src="<?=$oblojka?>"> да се показва във балончето което ми излиза :P а къде да сложиш ефекта ли ами на:

<a href="read_more.php?idNew=<?=$idNew2?>" style="color:green;text-decoration:none;"><?=$title2?></a>
 
<table>
<?php
$page = (int)$_GET['page'];
if($page == 0 || $page == NULL || $page <0)
{
$page = 1;
}
$pp = 10;
$start = ($page*$pp) - $pp;
$query2 = mysql_query("SELECT * FROM imdb_news") or die (mysql_error());
$broi2 = mysql_num_rows($query2);
$total = ceil($broi2/$pp);
$moreViewsNews = mysql_query("SELECT * FROM imdb_news ORDER by views DESC LIMIT $start,$pp");

$linkCounter = 0;
$tooltips = array();

while($data = mysql_fetch_assoc($moreViewsNews))
{

++$linkCounter;
$tooltips[] = 'link'.$linkCounter.': "<img src="'.$data['piclink'].'" width="64px" height="64px">"';

$idNew2 = $data['idNew'];
$title2 = $data['title'];
?>
<tr><td><center><img src="<?=$data['piclink']?>" width="64px" height="64px"><br /></center></td><td><a class="showTip link<?=$linkCounter?>" href="read_more.php?idNew=<?=$idNew2?>" style="color:green;text-decoration:none;"><?=$title2?></a></td></tr>
<?php
}
echo "</table>";
print "Общо добавени новини (<span style='color:green;'><strong><i>$broi2</i></strong></span>)";
$prev = $page - 1;
$next = $page +1;
if($page == 1) {
echo "<center>Предишна ";
} else{
echo "<a href='?id=$id2&page=$prev'>Предишна</a> ";
}

if($page >= $total) {
echo " Следваща";
} else{
echo " <a href='?id=$id2&page=$next'>Следваща</a>";
}

echo "<br />Страница $page от $total </center>";


echo "<script type=\"text/javascript\">\r\n";
echo "dw_Tooltip.content_vars = {\r\n\t" . join(",\r\n\t", $tooltips) . "\r\n}\r\n";
echo "dw_Event.add( window, 'load', dw_Tooltip.init );\r\n";
echo "dw_Event.add( window, 'load', dw_Tooltip.initHandlers );\r\n";
echo "</script>";


?>
</center>
 
Не забравяй да сложиш и това някъде в HEAD


<script src="js/dw_event.js" type="text/javascript"></script>
<script src="js/dw_viewport.js" type="text/javascript"></script>
<script src="js/dw_tooltip.js" type="text/javascript"></script>
<script src="js/dw_tooltip_aux.js" type="text/javascript"></script>
 
ем сложих го ама кат сложа мишката върху текста на новината смисъл върху заглавието на новината и балончето го няма :(
 
Сигурен ли си, че си качил 4-те javascript файла на сървъра си, и че си сложил правилните пътища до тях? Съвсем нищо ли не се случва, нещо грешки не показва ли браузъра ?
 
Една дребна грешчица има ... :) . Смени това в while цикъла:

$tooltips[] = 'link'.$linkCounter.': "<img src=\"'.$data['piclink'].'\" width=\"64px\" height=\"64px\">"';
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе