sildona Posted October 27, 2012 Share Posted October 27, 2012 I have a PHP file that shows thumbnails, but I would like to add a tooltip that shows up when I hover the mouse over the thumbnail. echo "<img src='".$showimage."' height='200px' width='133px' />"; Thanks in advance! Quote Link to comment Share on other sites More sharing options...
PravinS Posted October 27, 2012 Share Posted October 27, 2012 Set alt,title attribute for image tag Like: echo "<img src='".$showimage."' height='200px' width='133px' alt='SAMPLE TEXT'/>"; OR echo "<img src='".$showimage."' height='200px' width='133px' title='SAMPLE TEXT'/>"; or you can download some javascript tooltip script and apply it to image tag. Quote Link to comment Share on other sites More sharing options...
codefossa Posted October 27, 2012 Share Posted October 27, 2012 (edited) Here's two examples to do it. Example Page: http://xaotique.no-ip.org/tmp/13/ index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Xaotique</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <link rel="stylesheet" href="stylesheet.css" type="text/css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <?php $image = "http://www.glamquotes.com/wp-content/uploads/2011/11/smile.jpg"; ?> <img height="250" src="<?php echo $image; ?>" title="Example 1 using a title attribute." /> <img height="250" src="<?php echo $image; ?>" class="js-title" title="Example 2 using Javascript or title attribute backup." /> </body> </html> script.js $(document).ready(function() { var hover = false, item; $(window).mousemove(function(e) { if (hover) { item.data("tooltip").css( { left: e.pageX + 20, top: e.pageY + 20 }).show(); } }); $(".js-title").hover( function(e) { if ($(this).attr("title") != undefined) { $(this).data("title", $(this).attr("title")); $(this).data("tooltip", $(document.createElement("div")) .html($(this).data("title")) .attr("className", "js-tooltip") .css( { position: "absolute", left: 0, top: 0, "background-color": "#252525", color: "#EFEFEF", padding: 5, border: "4px double #EFEFEF", "white-space": "nowrap" }) .hide() ); $("body").append($(this).data("tooltip")); $(this).removeAttr("title"); } if ($(this).data("title") != undefined) { hover = true; item = $(this); } }, function() { hover = false; item.data("tooltip").hide(); } ); }); Edited October 27, 2012 by Xaotique Quote Link to comment Share on other sites More sharing options...
paulinetaylor85 Posted November 5, 2012 Share Posted November 5, 2012 You will add a new control to the image for each site in the database and set the size of the ToolTip window. I will suggest this link. http://www.codeproject.com/Articles/42050/ToolTip-With-Image-C Quote Link to comment Share on other sites More sharing options...
trq Posted November 5, 2012 Share Posted November 5, 2012 Your link, paulinetaylor85, is completely off topic. Quote Link to comment Share on other sites More sharing options...
nodirtyrockstar Posted November 5, 2012 Share Posted November 5, 2012 If it were my site, I would add the tooltip text in a new field to the database. Then when you are fetching from the DB, retrieve that and bind it as an additional result. while($stmt->fetch()){ $format = "<img src='%s' title='%s' />" // where %s is a placeholder for a variable string printf($format, $imgSrc, $imgTooltip) // $format is the intended format, the following two parameters are the strings that you will place into the image placeholders during each iteration of results. } Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.