davidfattore Posted April 26, 2014 Share Posted April 26, 2014 Ok so I'm assuming it's staring me in the face but I currently have a scripting dilemma, which I need help with... Now before I get into it, I should inform you that the code itself is working perfectly; that's not the issue.... I have a set of users within my database all set up in thumbnail form on a page (CLICK HERE for example) The issue is for some reason, as per the code below, no matter which thumbnail I rollover my mouse over, it always displays the last user's name and not the name of the user associated with that particular thumbnail. Here is the Code <?php include "../../mysql/db_config.php"; //SQL Query $query = "SELECT userID, user_name, thumbnail, url FROM users WHERE city = 'Melbourne' ORDER BY order_city ASC"; $result = @mysql_query($query); $result2 = @mysql_query($query) or die($query."<br/><br/>".mysql_error()); if ($result) { // Build the Output Section Here $output = ''; while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) { $uid = $row ["userID"]; $user = $row["user_name"]; $url = $row["url"]; $thumb = '<img src="' . $row["thumbnail"] . '" class="thumb" onmouseover="setUser()" onmouseout="removeUser()" </img>'; /*/////////////////////////////////////////////////////////////////////////////////////////// // SET UP USER DISPLAY MECHANISM // ///////////////////////////////////////////////////////////////////////////////////////////*/ $output .= '<div id="user_grid" class="user-grid"><a href="'. $url .'">' . $thumb . '</a></div>'; } } else { echo "Could not run query"; exit(); } ?><!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> <link rel="shortcut icon" type="image/x-icon" href="../assets/icons/icon.ico"> <link rel="apple-touch-icon" href="../assets/icons/apple-touch-icon.png" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script> <SCRIPT LANGUAGE="JavaScript"> function setUser() { document.getElementById("user_label").innerHTML='<?php print $user ?>'; } function removeUser() { document.getElementById("user_label").innerHTML=''; } </SCRIPT> Any help of solving this would be appreciated... Thanks for your time! Quote Link to comment Share on other sites More sharing options...
Solution Ch0cu3r Posted April 26, 2014 Solution Share Posted April 26, 2014 (edited) because you have hard coded the last users name here function setUser() { document.getElementById("user_label").innerHTML='<?php print $user ?>'; } $user will always be the very last user defined in white loop. Instead what you need to do is pass the users name to the setUser javascript function for the onmouseover event. Eg $thumb = '<img src="' . $row["thumbnail"] . '" class="thumb" onmouseover="setUser(\''.htmlspecialchars($user).'\')" onmouseout="removeUser()" </img>'; Now change the setUser javascript function to function setUser(name) { document.getElementById("user_label").innerHTML = name; } When hovering over the users thumbnail, it should display the associated username. Edited April 26, 2014 by Ch0cu3r Quote Link to comment Share on other sites More sharing options...
davidfattore Posted April 26, 2014 Author Share Posted April 26, 2014 (edited) @Ch0cu3r Thank you so much, I knew it had to be something trivial that I've obviously overlooked. Mate I'm not sure you know how much you've helped... I was without sleep for a good 24 hours consuming a boatload of coffee over that! LOL Again Thanks so much! Edited April 26, 2014 by davidfattore 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.