5
Contributors
4
Replies
5
Views
10 Years
Discussion Span
Last Post by squid44th
0

Hi there,
I read your post about that cool imagetooltip.

Well here is the thing. I have tried it in php page with a static page but what about when you want dynamic content in the tool tip. I mean what If i have 40 products with their images and I want to show them accordingly.

here is some code I tried but it didnt worked.

mysql_data_seek($result, $i);					

								$newArray = mysql_fetch_assoc($result);

								$aa = $newArray['aa'];

								$Model = $newArray['Model'];

								
echo "messages[".$aa."] = new Array('".$Model.".pdf','',\"#FFFFFF\");\n";

and then in the actualy product list

echo "		  <td align=\"center\" bgcolor=\"#F2F5F7\"><A href=\"javascript:void(window.open('pdf/".$Model.".pdf', '', 'resizable=no,scrollbars=yes,status=yes,width=620,height=750'))\" onmouseover=\"doTooltip(event,".$aa.")\" onmouseout=\"hideTip()\" class=\"style17\">$Model</A></td>\n";

It did worked with one image (always the same but I would like to have a piicture for each different porduct. I have uploaded all products images on server as I did for pdfs.
Thanks in advance

Fotis

0

The way that I personally would be doing this is
setting a "while" statement as my query result which would include what is in your "echo", and then echoing the result in the html body itself.

The while statement itself means that you don't really have to deal with creating and manipulating arrays "by hand" as I like to say. it parses it on it's own, simply by making your final result something like

$myresult .= "<td align=\"center\" bgcolor=\"#F2F5F7\"><A href=\"javascript:void(window.open('pdf/".$Model.".pdf', '', 'resizable=no,scrollbars=yes,status=yes,width=620,height=750'))\" onmouseover=\"doTooltip(event,".$aa.")\" onmouseout=\"hideTip()\" class=\"style17\">$Model</A></td>\n";

And then, in your html body

echo $myresult;

The dot before the = is required to make it loop itself (I think).

0

I prefer to use the css version of the tool tip.

<style type="text/css">
#info p {margin-left:15px; margin-right:20px;}
#info img {margin:15px; float:left;}
#info h1 {margin-left:15px;}
/* the style starts here */
a.tooltip {color:#c00;}
a.tooltip b {display:none;}
a.tooltip:hover {border:0; position:relative; z-index:500; text-decoration:none;}
a.tooltip:hover b {display:block; position:absolute; top:20px; left:-25px; padding:5px; font-weight:normal; color:#000; border:1px solid #888; background:#ffc; width:150px;}
a.tooltip:hover b em {position:absolute; left:20px; top:-6px; width:11px; height:6px; background:#fff url(tooltip.gif) 0 0; display:block; font-size:1px;}
</style>
<a class="tooltip" href="link or anchor">Display<b><em></em>The text in tool tip</a>

found it at CSS Play

Attachments css-tooltip.jpg 18.14 KB
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.