Solved

Tooltips

Posted on 2010-11-29
24
735 Views
Last Modified: 2013-12-12
Hello all :)

I am trying to pull pictures from a database and put them into a table.  I have created a mock website page of what I'm trying to accomplish.

http://www.hubcitydesigns.com/hubcity/jewelry2.php

On this page, you'll see 3 flowers.  When you rollover the flowers, a tooltip comes up.  It's so pretty :)  Unfortunately, the tooltip remains the same on all 3 pictures and this is not so pretty!

So, does anyone know how to make the tooltip look like the thumbnail?  I can assure you the pictures in the database are different, but the display is not.

Also, I am using this Dynamic Drive tooltip:
http://www.dynamicdrive.com/dynamicindex5/stickytooltip.htm

Thank you ahead of time :)
0
Comment
Question by:happysunny
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 13
  • 7
  • 4
24 Comments
 
LVL 4

Author Comment

by:happysunny
ID: 34231904
Oops...I think it would help if I gave you the php info :)
<?php
include ("dbinfo.php");

//count number of records 
$result = mysql_query("SELECT * FROM products") or die
(mysql_error());
$num_rows = mysql_num_rows($result);
 
if(mysql_num_rows($result) == 0) {
  echo "<font size=\"4\" face=\"Arial\"><center>No results were found.</center>";
$none="1";
}

//number you want to display per page
$page_rows=6;
 

//This tells us the page number of last page
$last=ceil($num_rows/$page_rows);
 
 
//determine results
//This checks to see if there's a page number.  If not, it will set it to page 1.
if(isset($_GET['pagenum'])) {
  $pagenum=$_GET['pagenum'];
}
else{
  $pagenum=1;
}

$pagenum=(int)$pagenum;
if ($pagenum>$last)
{
$pagenum=$last;
}

if ($pagenum<1)
{
$pagenum=1;
}

$offset=($pagenum - 1) * $page_rows;

$a=1;

echo "<table width=\"100%\"style=\"FONT-SIZE: 11pt\" face=\"Arial\" align=center border=
\"1\" solid black; cellspacing=\"10\"> ";
echo "<tbody>";
echo "<tr>";

$sql="SELECT * FROM products LIMIT $offset, $page_rows";
$result=mysql_query($sql);
while ($row = mysql_fetch_assoc($result))
{
$regpic=$row["fileName"];
$regpic=htmlspecialchars($regpic);
$thumb=$row["fileNameT1"];
$thumb=htmlspecialchars($thumb);

if ($a<=3)
{
echo "<td width=\"25%\"><center><a href=\"\"><img src='$thumb' WIDTH=138 HEIGHT=117 border=

\"1\" data-tooltip=\"sticky1\"></a><br>";

echo "<div id=\"mystickytooltip\" class=\"stickytooltip\">";
echo "<div style=\"padding:5px\">";

echo "<div id=\"sticky1\" class=\"atip\">";
echo "<img src=\"$regpic\" width=\"300\" height=\"300\" />";
echo "</div>";

echo "</div>";

echo "</div>";

echo "</td>";
echo "</center>";
$a++;
}
else
{
echo "</tr><tr>";
echo "<td width=\"25%\"><center><a href=\"\"></a><br>";

echo "<div id=\"mystickytooltip\" class=\"stickytooltip\">";
echo "<div style=\"padding:5px\">";

echo "<div id=\"sticky1\" class=\"atip\">";
echo "<img src=\"$regpic\" width=\"300\" height=\"300\" />";
echo "</div>";

echo "</div>";
echo "</div>";

echo "</td>";
echo "</center>";
$a=2;
}
}

echo "</tr></tbody></table>";

 ?>

Open in new window

0
 
LVL 16

Expert Comment

by:jmatix
ID: 34234093
Try this:
<?php
include ("dbinfo.php");

//count number of records 
$result = mysql_query("SELECT * FROM products") or die
(mysql_error());
$num_rows = mysql_num_rows($result);
 
if(mysql_num_rows($result) == 0) {
  echo "<font size=\"4\" face=\"Arial\"><center>No results were found.</center>";
$none="1";
}

//number you want to display per page
$page_rows=6;
 

//This tells us the page number of last page
$last=ceil($num_rows/$page_rows);
 
 
//determine results
//This checks to see if there's a page number.  If not, it will set it to page 1.
if(isset($_GET['pagenum'])) {
  $pagenum=$_GET['pagenum'];
}
else{
  $pagenum=1;
}

$pagenum=(int)$pagenum;
if ($pagenum>$last)
{
$pagenum=$last;
}

if ($pagenum<1)
{
$pagenum=1;
}

$offset=($pagenum - 1) * $page_rows;

$a=1;

echo "<div id=\"mystickytooltip\" class=\"stickytooltip\">";
echo "<div style=\"padding:5px\">";
echo "<table width=\"100%\"style=\"FONT-SIZE: 11pt\" face=\"Arial\" align=center border=
\"1\" solid black; cellspacing=\"10\"> ";
echo "<tbody>";
echo "<tr>";

$sql="SELECT * FROM products LIMIT $offset, $page_rows";
$result=mysql_query($sql);
while ($row = mysql_fetch_assoc($result))
{
$regpic=$row["fileName"];
$regpic=htmlspecialchars($regpic);
$thumb=$row["fileNameT1"];
$thumb=htmlspecialchars($thumb);

if ($a<=3)
{
echo "<td width=\"25%\"><center><a href=\"\"><img src='$thumb' WIDTH=138 HEIGHT=117 border=

\"1\" data-tooltip=\"sticky$a\"></a><br>";


echo "<div id=\"sticky$a\" class=\"atip\">";
echo "<img src=\"$regpic\" width=\"300\" height=\"300\" />";
echo "</div>";

echo "</td>";
echo "</center>";
$a++;
}
else
{
echo "</tr><tr>";
echo "<td width=\"25%\"><center><a href=\"\"><img src='$thumb' WIDTH=138 HEIGHT=117 border=

\"1\" data-tooltip=\"sticky$a\"></a><br>";

echo "<div id=\"sticky$a\" class=\"atip\">";
echo "<img src=\"$regpic\" width=\"300\" height=\"300\" />";
echo "</div>";

echo "</td>";
echo "</center>";
$a=2;
}
}

echo "</tr></tbody></table>";
echo "</div>";
<div class="stickystatus"></div>
echo "</div>";


 ?>

Open in new window

0
 
LVL 4

Author Comment

by:happysunny
ID: 34234408
Hmmm...Now it shows a blank page :(  Not sure why.

http://www.hubcitydesigns.com/hubcity/jewelry2.php
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 13

Expert Comment

by:gbanik
ID: 34234682
Give a different ID for each of the DIVs for each iteration. Concatenate the $a variable to the name... couple of places...

echo "<td width=\"25%\"><center><a href=\"\"><img src='$thumb' WIDTH=138 HEIGHT=117 border=\"1\" data-tooltip=\"sticky1\"></a><br>";

echo "<div id=\"sticky1\" class=\"atip\">";

Currently, you are effectively replacing the content of the DIV on every iteration of the loop.
0
 
LVL 4

Author Comment

by:happysunny
ID: 34234794
I see...I tried it out, but it seems the last 2 tooltips are missing the pictures now.  I'm getting excited about being closer to a solution, though :)

http://www.hubcitydesigns.com/hubcity/jewelry2.php

Hmmmm...

<?php
include ("dbinfo.php");

//count number of records 
$result = mysql_query("SELECT * FROM products") or die
(mysql_error());
$num_rows = mysql_num_rows($result);
 
if(mysql_num_rows($result) == 0) {
  echo "<font size=\"4\" face=\"Arial\"><center>No results were found.</center>";
$none="1";
}

//number you want to display per page
$page_rows=6;
 

//This tells us the page number of last page
$last=ceil($num_rows/$page_rows);
 
 
//determine results
//This checks to see if there's a page number.  If not, it will set it to page 1.
if(isset($_GET['pagenum'])) {
  $pagenum=$_GET['pagenum'];
}
else{
  $pagenum=1;
}

$pagenum=(int)$pagenum;
if ($pagenum>$last)
{
$pagenum=$last;
}

if ($pagenum<1)
{
$pagenum=1;
}

$offset=($pagenum - 1) * $page_rows;

$a=1;

echo "<table width=\"100%\"style=\"FONT-SIZE: 11pt\" face=\"Arial\" align=center border=
\"1\" solid black; cellspacing=\"10\"> ";
echo "<tbody>";
echo "<tr>";

$sql="SELECT * FROM products LIMIT $offset, $page_rows";
$result=mysql_query($sql);
while ($row = mysql_fetch_assoc($result))
{
$regpic=$row["fileName"];
$regpic=htmlspecialchars($regpic);
$thumb=$row["fileNameT1"];
$thumb=htmlspecialchars($thumb);

if ($a<=3)
{
echo "<td width=\"25%\"><center><a href=\"\"><img src='$thumb' WIDTH=138 HEIGHT=117 border=

\"1\" data-tooltip=\"sticky$a\"></a><br>";

echo "<div id=\"mystickytooltip\" class=\"stickytooltip\">";
echo "<div style=\"padding:5px\">";

echo "<div id=\"sticky$a\" class=\"atip\">";
echo "<img src=\"$regpic\" width=\"300\" height=\"300\" />";
echo "</div>";

echo "</div>";

echo "</div>";

echo "</td>";
echo "</center>";
$a++;
}
else
{
echo "</tr><tr>";
echo "<td width=\"25%\"><center><a href=\"\"><img src='$thumb' WIDTH=138 HEIGHT=117 border=

\"1\" data-tooltip=\"sticky$a\"></a><br>";</a><br>";

echo "<div id=\"mystickytooltip\" class=\"stickytooltip\">";
echo "<div style=\"padding:5px\">";

echo "<div id=\"sticky$a\" class=\"atip\">";
echo "<img src=\"$regpic\" width=\"300\" height=\"300\" />";
echo "</div>";

echo "</div>";
echo "</div>";

echo "</td>";
echo "</center>";
$a=2;
}
}

echo "</tr></tbody></table>";

 ?>

Open in new window

0
 
LVL 13

Expert Comment

by:gbanik
ID: 34234956
I just looked at the original website
http://www.dynamicdrive.com/dynamicindex5/stickytooltip.htm

The only mistake now u may be making is that your iteration is creating multiple DIVs for "mystickytooltip"... whereas it should be creating just ONE.
Hence, take the following code out of the loop and put it outside.

echo "<div id=\"mystickytooltip\" class=\"stickytooltip\">";

Look at the example from that site again....
<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">

<div id="sticky1">
Sticky Tooptip 1 content here...
</div>

<div id="sticky2">
Sticky Tooptip 2 content here...
</div>

<div id="sticky3">
Sticky Tooptip 3 content here...
</div>

</div>

<div class="stickystatus"></div>
</div>

Open in new window

0
 
LVL 13

Expert Comment

by:gbanik
ID: 34234990
Your output should look something like this... take cue form it
<DIV STYLE=" position:absolute; top:170px; left:380px; width:750px; height:450px; z-index:938;"> 
  <table width="100%" style="FONT-SIZE: 11pt" face="Arial" align=center border="1" solid black; cellspacing="10"> 
    <tbody>
      <tr>
        <td width="25%">
          <center>
            <a href="">
              <img src='../hubcity/testpics/yellowflower.jpg' WIDTH=138 HEIGHT=117 border="1" data-tooltip="sticky1">
            </a>
        </td>
      </center>
      <td width="25%">
        <center>
          <a href="">
            <img src='../hubcity/testpics/pinkflower.jpg' WIDTH=138 HEIGHT=117 border="1" data-tooltip="sticky2">
          </a>
      </td>
    </center>
    <td width="25%">
      <center>
        <a href="">
          <img src='../hubcity/testpics/whiteflower.jpg' WIDTH=138 HEIGHT=117 border="1" data-tooltip="sticky3">
        </a>
    </td>
  </center>
      </tr>
    </tbody>
  </table>                  
</DIV>
          <div id="mystickytooltip" class="stickytooltip">
              <div id="sticky1" class="atip">
                  <img src="../hubcity/testpics/yellowflower.jpg" width="300" height="300"/>
              </div>
              <div id="sticky2" class="atip">
                <img src="../hubcity/testpics/pinkflower.jpg" width="300" height="300"/>
              </div>
              <div id="sticky3" class="atip">
                <img src="../hubcity/testpics/whiteflower.jpg" width="300" height="300"/>
              </div>
          </div>

Open in new window

0
 
LVL 4

Author Comment

by:happysunny
ID: 34235056
Okay, but that takes me back to jmatix's code that leaves an empty page, unless I'm doing it wrong?

http://www.hubcitydesigns.com/hubcity/jewelry2.php

On line 69, does that div need to be elsewhere or is that what the problem may be?
<?php
include ("dbinfo.php");

//count number of records 
$result = mysql_query("SELECT * FROM products") or die
(mysql_error());
$num_rows = mysql_num_rows($result);
 
if(mysql_num_rows($result) == 0) {
  echo "<font size=\"4\" face=\"Arial\"><center>No results were found.</center>";
$none="1";
}

//number you want to display per page
$page_rows=6;
 

//This tells us the page number of last page
$last=ceil($num_rows/$page_rows);
 
 
//determine results
//This checks to see if there's a page number.  If not, it will set it to page 1.
if(isset($_GET['pagenum'])) {
  $pagenum=$_GET['pagenum'];
}
else{
  $pagenum=1;
}

$pagenum=(int)$pagenum;
if ($pagenum>$last)
{
$pagenum=$last;
}

if ($pagenum<1)
{
$pagenum=1;
}

$offset=($pagenum - 1) * $page_rows;

$a=1;

echo "<div id=\"mystickytooltip\" class=\"stickytooltip\">";
echo "<div style=\"padding:5px\">";

echo "<table width=\"100%\"style=\"FONT-SIZE: 11pt\" face=\"Arial\" align=center border=
\"1\" solid black; cellspacing=\"10\"> ";
echo "<tbody>";
echo "<tr>";

$sql="SELECT * FROM products LIMIT $offset, $page_rows";
$result=mysql_query($sql);
while ($row = mysql_fetch_assoc($result))
{
$regpic=$row["fileName"];
$regpic=htmlspecialchars($regpic);
$thumb=$row["fileNameT1"];
$thumb=htmlspecialchars($thumb);

if ($a<=3)
{
echo "<td width=\"25%\"><center><a href=\"\"><img src='$thumb' WIDTH=138 HEIGHT=117 border=

\"1\" data-tooltip=\"sticky$a\"></a><br>";

echo "<div id=\"sticky$a\" class=\"atip\">";
echo "<img src=\"$regpic\" width=\"300\" height=\"300\" />";
echo "</div>";

echo "</td>";
echo "</center>";
$a++;
}
else
{
echo "</tr><tr>";
echo "<td width=\"25%\"><center><a href=\"\"><img src='$thumb' WIDTH=138 HEIGHT=117 border=

\"1\" data-tooltip=\"sticky$a\"></a><br>";</a><br>";

echo "<div id=\"sticky$a\" class=\"atip\">";
echo "<img src=\"$regpic\" width=\"300\" height=\"300\" />";
echo "</div>";

echo "</td>";
echo "</center>";
$a=2;
}
}

echo "</tr></tbody></table>";

echo "</div>";

echo "<div class=\"stickystatus\"></div>";
echo "</div>";


 ?>

Open in new window

0
 
LVL 13

Expert Comment

by:gbanik
ID: 34235101
Please try to mimic the above output. You may need two loops to get your desired output (through it can be done with just one). Please try with 2 loops first which should be easy.
0
 
LVL 4

Author Comment

by:happysunny
ID: 34235535
I am afraid this is just one set of pictures that are coming out of the database.  Some pages have up to 20 pictures that I use pagination to put in order.

I am not confident in my ability to add a second while loop.  Can you give me some advice on how that would need to be added?

Thank you :)
0
 
LVL 4

Author Comment

by:happysunny
ID: 34239835
I tried adding a second loop, but it didn't work.  If you really think the $a should work, I'd rather stick with trying to figure that out.  Really, I'm unsure why the code doesn't work.  

It seems when I take the

echo "<div id=\"mystickytooltip\" class=\"stickytooltip\">";
echo "<div style=\"padding:5px\">";

Open in new window


part and keep it into the loop, the images actually show up.  When I put it outside the loop, everything disappears.  I'm unsure where to go from here.
0
 
LVL 16

Expert Comment

by:jmatix
ID: 34258624
I am not sure if you have already figured this out. The problem is that the thumbnails should be out the <div id="mystickytooltip"> block. Otherwise it will be hidden by default. I tried the code below and it worked. I build the thumbnail HTML inside the loop, but print it after exiting the loop.
$htm = "";
while ($row = mysql_fetch_assoc($result))
{
$regpic=$row["fileName"];
$regpic=htmlspecialchars($regpic);
$thumb=$row["fileNameT1"];
$thumb=htmlspecialchars($thumb);

if ($a<=3)
{
$htm .= "<a href=\"\"><img src='$thumb' WIDTH=138 HEIGHT=117 border=

\"1\" data-tooltip=\"sticky$a\"></a><br>";


echo "<td width=\"25%\"><center><div id=\"sticky$a\" class=\"atip\">";
echo "<img src=\"$regpic\" width=\"300\" height=\"300\" />";
echo "</div>";

echo "</td>";
echo "</center>";
$a++;
}
else
{
echo "</tr><tr>";
$htm .= "<a href=\"\"><img src='$thumb' WIDTH=138 HEIGHT=117 border=

\"1\" data-tooltip=\"sticky$a\"></a><br>";

echo "<td width=\"25%\"><center><div id=\"sticky$a\" class=\"atip\">";
echo "<img src=\"$regpic\" width=\"300\" height=\"300\" />";
echo "</div>";

echo "</td>";
echo "</center>";
$a=2;
}
$c++;
}

echo "</tr></tbody></table>";

echo "</div>";
echo "<div class='stickystatus'></div>";
echo "</div>";
echo $htm;

Open in new window

0
 
LVL 4

Author Comment

by:happysunny
ID: 34258931
Yes, as long as it is inside that <div> it wouldn't work.  I worked in your code instead and it still isn't working.

http://www.hubcitydesigns.com/hubcity/jewelry2.php


<?php
include ("dbinfo.php");

//count number of records 
$result = mysql_query("SELECT * FROM products") or die
(mysql_error());
$num_rows = mysql_num_rows($result);
 
if(mysql_num_rows($result) == 0) {
  echo "<font size=\"4\" face=\"Arial\"><center>No results were found.</center>";
$none="1";
}

//number you want to display per page
$page_rows=6;
 

//This tells us the page number of last page
$last=ceil($num_rows/$page_rows);
 
 
//determine results
//This checks to see if there's a page number.  If not, it will set it to page 1.
if(isset($_GET['pagenum'])) {
  $pagenum=$_GET['pagenum'];
}
else{
  $pagenum=1;
}

$pagenum=(int)$pagenum;
if ($pagenum>$last)
{
$pagenum=$last;
}

if ($pagenum<1)
{
$pagenum=1;
}

$offset=($pagenum - 1) * $page_rows;

$a=1;

echo "<table width=\"100%\"style=\"FONT-SIZE: 11pt\" face=\"Arial\" align=center border=
\"1\" solid black; cellspacing=\"10\"> ";
echo "<tbody>";
echo "<tr>";

$htm="";

$sql="SELECT * FROM products LIMIT $offset, $page_rows";
$result=mysql_query($sql);
while ($row = mysql_fetch_assoc($result))
{
$regpic=$row["fileName"];
$regpic=htmlspecialchars($regpic);
$thumb=$row["fileNameT1"];
$thumb=htmlspecialchars($thumb);

if ($a<=3)
{
$htm .= "<a href=\"\"><img src='$thumb' WIDTH=138 HEIGHT=117 border=\"1\" data-tooltip=

\"sticky$a\"></a><br>";


echo "<td width=\"25%\"><center><div id=\"sticky$a\" class=\"atip\">";
echo "<img src=\"$regpic\" width=\"300\" height=\"300\" />";
echo "</div>";

echo "</td>";
echo "</center>";
$a++;
}
else
{
echo "</tr><tr>";
$htm .= "<a href=\"\"><img src='$thumb' WIDTH=138 HEIGHT=117 border=\"1\" data-tooltip=

\"sticky$a\"></a><br>";

echo "<td width=\"25%\"><center><div id=\"sticky$a\" class=\"atip\">";
echo "<img src=\"$regpic\" width=\"300\" height=\"300\" />";
echo "</div>";

echo "</td>";
echo "</center>";
$a=2;
}
$c++;
}

echo "</tr></tbody></table>";

echo "</div>";
echo "<div class='stickystatus'></div>";
echo "</div>";
echo $htm;

 ?>

Open in new window

0
 
LVL 4

Author Comment

by:happysunny
ID: 34259027
Oops-On line 92 of my code, is that supposed to a++?  I changed that, but now it shows 2 to a line instead of 3.  Regardless, it isn't showing the tooltips at all.  Hmmm...Do you know of a simpler code I could use?
0
 
LVL 16

Expert Comment

by:jmatix
ID: 34259379
I added $c++ as my counter variable since for testing I was not pulling image filenames from database. Ignore that line. Can you post the generated HTML from your browser (view source)?
0
 
LVL 4

Author Comment

by:happysunny
ID: 34260298
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="stickytooltip.js">

/***********************************************
* Sticky Tooltip script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<link rel="stylesheet" type="text/css" href="stickytooltip.css" />


</head>

<html>
<body>

<DIV STYLE=" position:absolute; top:170px; left:380px; width:750px; height:450px; z-index:938;">
                    <table width="100%"style="FONT-SIZE: 11pt" face="Arial" align=center border=
"1" solid black; cellspacing="10"> <tbody><tr><td width="25%"><center><div id="sticky1" class="atip"><img src="../hubcity/testpics/yellowflower.jpg" width="300" height="300" /></div></td></center><td width="25%"><center><div id="sticky2" class="atip"><img src="../hubcity/testpics/pinkflower.jpg" width="300" height="300" /></div></td></center><td width="25%"><center><div id="sticky3" class="atip"><img src="../hubcity/testpics/whiteflower.jpg" width="300" height="300" /></div></td></center></tr></tbody></table></div><div class='stickystatus'></div></div><a href=""><img src='../hubcity/testpics/yellowflower.jpg' WIDTH=138 HEIGHT=117 border="1" data-tooltip="sticky1"></a><br><a href=""><img src='../hubcity/testpics/pinkflower.jpg' WIDTH=138 HEIGHT=117 border="1" data-tooltip="sticky2"></a><br><a href=""><img src='../hubcity/testpics/whiteflower.jpg' WIDTH=138 HEIGHT=117 border="1" data-tooltip="sticky3"></a><br>                  </DIV>

</body>
</html>

Open in new window

0
 
LVL 16

Expert Comment

by:jmatix
ID: 34260500
I don't see a <div id="mystickytooltip" class="stickytooltip"> </div> enclosing the tooltip images. When I add that <div> it works. See my test HTML below:

<body>

<div id="mystickytooltip" class="stickytooltip">
<DIV STYLE=" position:absolute; top:170px; left:380px; width:750px; height:450px; z-index:938;">
<table width="100%"style="FONT-SIZE: 11pt" face="Arial" align=center border="1" solid black; cellspacing="10"> 
<tbody>
<tr>
<td width="25%">
<center>
<div id="sticky1" class="atip">
<img src="../images/Bluehills.jpg" width="300" height="300" />
</div></td>
</center>
<td width="25%">
<center>
<div id="sticky2" class="atip">
<img src="../images/Sunset.jpg" width="300" height="300" />
</div>
</td>
</center>
<td width="25%">
<center>
<div id="sticky3" class="atip">
<img src="../images/Waterlilies.jpg" width="300" height="300" />
</div>
</td>
</center>
</tr>
</tbody>
</table>
</div>
<div class='stickystatus'></div>
</div>
</div>
<a href="">
<img src='../images/Bluehills.jpg' WIDTH=138 HEIGHT=117 border="1" data-tooltip="sticky1"></a><br>
<a href="">
<img src='../images/Sunset.jpg' WIDTH=138 HEIGHT=117 border="1" data-tooltip="sticky2"></a><br>
<a href=""><img src='../images/Waterlilies.jpg' WIDTH=138 HEIGHT=117 border="1" data-tooltip="sticky3"></a><br>                  </DIV>

</body>

Open in new window

0
 
LVL 4

Author Comment

by:happysunny
ID: 34260863
Beautiful!  It works!  However, just a few more questions about it.  It is now showing the images vertical instead of 3 across.  And when you rollover it, there seems to be boxes on the sides of them.  Looking over my code, I'm unsure exactly where this is coming from.  Any ideas on how to fix it?

I'm getting excited!
Thanks!
0
 
LVL 16

Accepted Solution

by:
jmatix earned 500 total points
ID: 34260950
>>It is now showing the images vertical instead of 3 across

Remove the <br> after each thumbnail <a>:

<a href="">
<img src='../images/Bluehills.jpg' WIDTH=138 HEIGHT=117 border="1" data-tooltip="sticky1"></a>
<a href="">
<img src='../images/Sunset.jpg' WIDTH=138 HEIGHT=117 border="1" data-tooltip="sticky2"></a>
<a href=""><img src='../images/Waterlilies.jpg' WIDTH=138 HEIGHT=117 border="1" data-tooltip="sticky3"></a>  

The border is coming from the table. Make it border="0" as:

<table width="100%"style="FONT-SIZE: 11pt" face="Arial" align=center border="0" cellspacing="10">
         
May be you want to reduce the width of the table too.


0
 
LVL 4

Author Comment

by:happysunny
ID: 34261017
Thank you!  Works like a charm!  And it's my birthday today :)  Double the fun :)
0
 
LVL 16

Expert Comment

by:jmatix
ID: 34261032
To bring the tooltips closer to the thumbnails adjust the top and left positions of the enclosing <DIV>. You can even put -ve values as:

<DIV STYLE="position:absolute; top:0px; left:-50px; width:750px; height:450px; z-index:938;">

0
 
LVL 4

Author Comment

by:happysunny
ID: 34261095
Awesome.  I'll keep that in mind :)  Thank you!
0
 
LVL 16

Expert Comment

by:jmatix
ID: 34261159
Happy B'day. Enjoy!!!
0
 
LVL 4

Author Comment

by:happysunny
ID: 34261900
Thank you :)  It's the big 3-Oh my god!  :)  Enjoying every moment of it!
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Jquery driving me nuts... 14 27
PHP SMTP authentication 6 24
how can i break an array into a couple 5 23
How do I remove "" from json_encode 5 20
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question