Board Logo

Dynamic Image Hints
Arc - 3/27/2007 at 11:58 PM

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
?>
<!-- Link Tigra Hints script file to your HTML document-->
<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 - 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 - 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
?>


Softcomplex: http://www.softcomplex.com/
Back to forum: http://www.softcomplex.com/forum/