0

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: Moved to Javascript forum.

2
Contributors
1
Reply
2
Views
4 Years
Discussion Span
Last Post by Airshow
0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.