jeankaleb Posted August 5, 2015 Share Posted August 5, 2015 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,. ; 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 https://forums.phpfreaks.com/topic/297646-dynamic-image-tooltip/ Share on other sites More sharing options...
ginerjm Posted August 5, 2015 Share Posted August 5, 2015 The standard html img tag attributes don't work for you? Link to comment https://forums.phpfreaks.com/topic/297646-dynamic-image-tooltip/#findComment-1518085 Share on other sites More sharing options...
jeankaleb Posted August 7, 2015 Author Share Posted August 7, 2015 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 https://forums.phpfreaks.com/topic/297646-dynamic-image-tooltip/#findComment-1518203 Share on other sites More sharing options...
ginerjm Posted August 7, 2015 Share Posted August 7, 2015 If you look at an html reference you will see that the image tag has a "title" attribute. Link to comment https://forums.phpfreaks.com/topic/297646-dynamic-image-tooltip/#findComment-1518207 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.