Member Avatar for Naimathullah

I need to display picture name when i move mouseover the picture using onmouseover. Please let me know what I need to add either to javascript or to PHP.

 <style> #contactdiv { position: absolute; left: 100px; top: 100px; width: 100px: height: 20px; padding: 5px; background-color: red; visibility: hidden; } </style> <script> function showcontact(element) { var contactdiv = document.getElementById('contactdiv'); x = element.offsetLeft; y = element.offsetTop; contactdiv.style.left = x + 170; contactdiv.style.top = y + 30; contactdiv.style.visibility = 'visible'; } function hidecontact() { var contactdiv = document.getElementById('contactdiv'); contactdiv.style.visibility = 'hidden'; } </script> </HEAD> <body> <!-- <div id="validusers"> </div> <div id="errordiv" style="color: red;"> </div> --> <! ********************************* --> <! Displaying Realtors List --> <! ********************************* --> <div id = "calculator"> <?php include 'using-Myfile.php'; displayRealtors(); ?> </div> <?php function displayRealtors() { $statement = "SELECT lastname, firstname, phone, email, image_file "; $statement .= "FROM table "; $statement .= "ORDER BY firstname "; $sqlResults = selectResults($statement); $error_or_rows = $sqlResults[0]; if (substr($error_or_rows, 0 , 5) == 'ERROR') { print "<br />Error on DB"; print $error_or_rows; } else { $arraySize = $error_or_rows; for ($i=1; $i <= $error_or_rows; $i++) { $lastname = $sqlResults[$i]['lastname']; $firstname = $sqlResults[$i]['firstname']; $phone = $sqlResults[$i]['phone']; $email = $sqlResults[$i]['email']; $image_file = $sqlResults[$i]['image_file']; $fullName = "$firstname $lastname"; print "<p><img src='images/".$image_file."' onMouseOver = showcontact('this','".$lastname."') onmouseout = hidecontact(this)>"; print "<br />".$firstname."</p>\n"; } } } ?> <div id = "contactdiv"> </div> <div id="footer"> <p> <a href = " Assignment_8_GuestBook_Form.php "> View Guestbook </a> / <a href = " Assignment_8_CalculateMortgage.php "> Calculate Mortgage </a> </p> </div> </body>

</HTML>

Edited by pritaeas because: Moved to Javascript forum.
  • 2 Contributors
  • 1 Reply
  • 706 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

Naimathullah,

The easiest approach by far would be to set an alt attribute in the img tags.

However, if you want a custom mouseover effect, try the following.

Build the HTML like this:

print "<p><img class=\"realtor\" src=\"images/$image_file\" data-name=\"$fullName\" /><br />$firstname</p>\n";

And the corresponding javascript is :

window.onload = function() { var contactdiv = document.getElementById('contactdiv'), calculator = document.getElementById("calculator"), images = calculator.getElementsByTagName("img"); function showcontact() { contactdiv.style.left = this.offsetLeft + 170; contactdiv.style.top = this.offsetTop + 30; contactdiv.innerHTML = this['data-name']; contactdiv.style.visibility = 'visible'; } function hidecontact() { contactdiv.style.visibility = 'hidden'; } for(var i=0; i<images.length; i++) { if(images[i].className == 'realtor') { images[i].onMouseover = showcontact; images[i].onMouseout = hidecontact; } } };

untested

Alternatively, with the jQuery library installed on the page, the javascript would be :

$(function() { var contactdiv = $("#contactdiv").hide(); $("#calculator").on({'mouseover': function() { var $this = $(this), offset = $this.offset(), name = $this.data('name'); contactdiv.css({'left':offset.left+170, 'top':offset.top+30}).html(name).show(); }, 'mouseout': function() { contactdiv.hide(); } }, "img.realtor"); });

untested

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.