Tigra Hints - Dynamic Image Hints


	\| About Us \| Services \| Download \| Order \| Support \| \|

Not logged in [ Login | Register ]

SoftComplex Forums » Tigra Hints » Dynamic Image Hints

Last active: Never

Printable Version | Subscribe | Add to Favourites

Arc

Junior Member

Posts: 5
Registered: 3/27/2007
Member Is Offline

posted on 3/27/2007 at 11:58 PM

Dynamic Image Hints

Hi guys. First of all, thanks for the program, it seems pretty cool. However, I am having difficutly getting it working in a usefull way dynamicaly.

I am pulling image names from a database and looping thru the results and displaying the images and trying to get Tigra hints to display the fullsize image when I mouseover.

This is no problem if I program everything staticaly, but doing it dynamicaly I always get this Javascript error: "this.divs[...].o_css' is null or not an object".

For now I am just trying to do a simple loop with one hard coded image URL and it is not working. Can someone show me how to use this thing in a loop please?

Here is the code I am working with.

Code:

<?php
$imagePath1 = "http://www.mywebsite.com/test.jpg";
for($i=0; $i<3; ++$i){ //loop 3 times
?>

<script language="JavaScript" src="hints.js"></script>
<script language="JavaScript">
var HINTS_CFG = {
'follow' : true,
'top' : 1, // a vertical offset of a hint from mouse pointer
'left' : 1, // a horizontal offset of a hint from mouse pointer
'show_delay' : 500, // a delay between object mouseover and hint appearing
'hide_delay' : 90000, // a delay between hint appearing and hint hiding
'wise' : true, // whether a tooltip should always be visible in full
'z-index' : 0 // a z-index for all hint layers
},
HINTS_ITEMS = [
"<img src='<?php echo $imagePath1; ?>'>" // a hint #0
];
var myHint = new THints (HINTS_CFG, HINTS_ITEMS);
</script>

<img src="<?php echo $imagePath1; ?>" width="120" height="96" onMouseOver="myHint.show(0)" onMouseOut="myHint.hide()">
<?php }//end for loop ?>

Thanks!

tigra

Administrator

Posts: 1926
Registered: 6/17/2002
Location: US, CO
Member Is Offline

posted on 3/28/2007 at 02:16 AM

you're looping through whole thing. this makes 3 instances of the variables with the same names and causes other problems. Instead you should loop inside HINTS_ITEMS = [ .. ] creating three hints and then loop where you create three originating elements printing incrementing the number in myHint.show(..)

Arc

Junior Member

Posts: 5
Registered: 3/27/2007
Member Is Offline

posted on 3/28/2007 at 11:43 PM

Ok, this took some serious figuring on my part, but I finaly got it sorted. Here is an example of how to dynamicaly pull images out of a database and hook them up with the image hints from Tigra.

This is PHP code and some irrelevant code is left out to simplify things.... If anyone has a better way of doing it, please let me know.

Code:

<?php
$sql="SELECT * FROM tblProgressReports WHERE JobID = '$jobID'";
$db->dbSelect($sql);

////******************************************************************************////
//Get Images to put into ImageArray for Tigra Tips
$numRows = $db->getNumRows();
for($i=0; $i<$numRows; ++$i)
{
$anyRow = $db->getAnyRow($i);

if($anyRow['Pic1'] != "") $imagePathArray[] = "../admin/".$anyRow['Pic1'];
if($anyRow['Pic2'] != "") $imagePathArray[] = "../admin/".$anyRow['Pic2'];
if($anyRow['Pic3'] != "") $imagePathArray[] = "../admin/".$anyRow['Pic3'];
if($anyRow['Pic4'] != "") $imagePathArray[] = "../admin/".$anyRow['Pic4'];

}//end for

//Create string for Tigra Hints
for($i=0; $i<count($imagePathArray); ++$i)
{
if($i == count($imagePathArray) - 1)
{
$imageString .= "\"<img src='$imagePathArray[$i]'>\"\n";

}else{
$imageString .= "\"<img src='$imagePathArray[$i]'>\",\n";
}//end if

}//end for

////******************************************************************************////
?>
<script language="JavaScript" src="hints.js"></script>
<script language="JavaScript">
var HINTS_CFG = {
'follow' : true,
'top' : 1, // a vertical offset of a hint from mouse pointer
'left' : 1, // a horizontal offset of a hint from mouse pointer
'show_delay' : 500, // a delay between object mouseover and hint appearing
'hide_delay' : 90000, // a delay between hint appearing and hint hiding
'wise' : true, // whether a tooltip should always be visible in full
'z-index' : 0 // a z-index for all hint layers
},
HINTS_ITEMS = [
<?php echo $imageString; ?>///print out the hints list
];
var myHint = new THints (HINTS_CFG, HINTS_ITEMS);
</script>

<?php
$counter = 0;///counter to see how many images are showing so the
//Tigra hints line up with the actual images

for($i=0; $i<$numRows; ++$i)//loop thru database results to print out images and html
{

$anyRow = $db->getAnyRow($i);
$pic1 = $anyRow['Pic1'];
$pic2 = $anyRow['Pic2'];
$pic3 = $anyRow['Pic3'];
$pic4 = $anyRow['Pic4'];
?>

<table width="580" border="0" cellspacing="0" cellpadding="3">
<tr>
<?php if($pic1 != ""){?>
<td><div align="center"><?php echo "<img src=\"../admin/$pic1\" width=\"120\" height=\"96\" onMouseOver=\"myHint.show($counter)\" onMouseOut=\"myHint.hide()\">"; $counter +=1?>
</div></td>
<?php }?>
<?php if($pic2 != ""){?>
<td><div align="center"><?php echo "<img src=\"../admin/$pic2\" width=\"120\" height=\"96\" onMouseOver=\"myHint.show($counter)\" onMouseOut=\"myHint.hide()\">"; $counter +=1?>
</div></td>
<?php }?>
<?php if($pic3 != ""){?>
<td><div align="center"><?php echo "<img src=\"../admin/$pic3\" width=\"120\" height=\"96\" onMouseOver=\"myHint.show($counter)\" onMouseOut=\"myHint.hide()\">"; $counter +=1?>
</div></td>
<?php }?>
<?php if($pic4 != ""){?>
<td><div align="center"><?php echo "<img src=\"../admin/$pic4\" width=\"120\" height=\"96\" onMouseOver=\"myHint.show($counter)\" onMouseOut=\"myHint.hide()\">"; $counter +=1?>
</div></td>
<?php }?>
</tr>
</table>

<?php
} // End While
}// end if
?>