Support Forum Softcomplex logo
About Us  | Services  | Download  | Order  | Support  | |
| Search | Today's Posts | Stats | Board Rules | Not logged in [ Login | Register ]
go to bottom
Last active: Never

Printable Version | Subscribe | Add to Favourites   Post new thread
Author: Subject: Dynamic Image Hints
Arc
Junior Member

Posts: 6
Registered: 3/27/2007
Member Is Offline
posted on 3/27/2007 at 11:58 PM Reply With Quote
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
?>
<!-- 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!
View User's Profile View All Posts By User U2U Member
tigra
Administrator

Posts: 2049
Registered: 6/17/2002
Location: US, CO
Member Is Offline
posted on 3/28/2007 at 02:16 AM Reply With Quote

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(..)
View User's Profile View All Posts By User U2U Member
Arc
Junior Member

Posts: 6
Registered: 3/27/2007
Member Is Offline
posted on 3/28/2007 at 11:43 PM Reply With Quote

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
?>
View User's Profile View All Posts By User U2U Member
Post new thread

Related Links:
Product Page
 Product Demonstrations Live Demo
Free Download Free Download
Product Documentation Documentation
Documenation Page
Change Log
Support Forum Support Forum
 

Go To Top


Powered by XMB 1.9.1 Nexus
Developed By Aventure Media & The XMB Group © 2002-2004