Jump to content

Dynamic Image tooltip


jeankaleb

Recommended Posts

It is my aim to accomplish the following: 

 

    *  A user logs onto a social media site.

    *  Clicks on a "Member" link.  a list of member images are presented.

    *  The userthen uses their mouse to hover over an image.

    *  The profile information for a specific user is displayed (i.e.) the image the user has their mouse hovered on Namely: Firstname, Lastname (as an example)

 

I have accomplished the following [still a rough draft per-se']

 

    *  Established a DB Connection

    *  Established a CSS tooltip structure

    *  Using a WHILE LOOP via Php displayed the images onto the screen forthe user to see.  In addition having a hover tooltip function that when the user places their mouse over an image a blank tooltip appears.

As mentioned.  What I would like is the data corrisponding to a particular user populate the tooltip when the on hover event is made active.

 

 

<?php session_start(); ?>
<?php ob_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <?php include("include/dbconn.inc");?>
 
<style type="text/css">
    
  .tooltip
    {
      display: inline;
      position: relative;
    }

  .tooltip:hover:before
    {
      border: solid;
      border-color: #333 transparent;
      border-width: 6px 6px 0 6px;
      bottom: 20px;
      content: "";
      left: 50%;
      position: absolute;
      z-index: 99;
    }
        
  .tooltip:hover:after
    {
      background: #333;
      background: rgba(0,0,0,. 8);
      border-radius: 5px;
      bottom: 26px;
      color: #fff;
      content: attr(title);
      left: 20%;
      padding: 20px 15px;
      position: absolute;
      z-index: 98;
      width: 220px;
    }
</style>

</head>
<body>

<!--The line of code below allows the tooltip to be nstantiated-->
<a href="#" title="<?php echo(" "); ?>"; class="tooltip">

 

  <?php

    // The code below is a Php While loop which will itterate though the MySQL table and display the images from the table field.
    // run query
    $query = mysql_query ("SELECT * FROM users");
                          
    // set array
    $array = array();
                            
    // look through query
    while($row = mysql_fetch_assoc($query))
      {
        // add each row returned into an array
        $array[] = $row;
        
        // assign the contents of the array values [ProfileImagePath] to a variable
        $userProfilePics = $row['ProfileImagePath'];
        
        // Displays array content retreived from database to the screen
        echo "<img src=".$userProfilePics." height='100px' width='100px' hspace='20' vspace='20'>";
      }
?>
</a>
</body>
</html>

Link to comment
Share on other sites

What do you mean by std html tag.  I have the image path stored in a mysql table, using a while loop to display the image values on the screen with an img src tag.  What i need now is a hover scrip which will display the data corrisponding to the image displayed.  ucurrently on hover I have all yte values displayed as opposed to each selected item value

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.