Adding Mouseover/Mouseout to PHP with Javascript

<a href='$row[RestPage]' onmouseover="functionYouWantToRunOnMouseOver();" onmouseout="functionYouWantToRunOnMouseOut();">$row[RestName]</a>

Select allOpen in new window

http://www.w3schools.com/jsref/event_onmouseover.asp
http://www.w3schools.com/jsref/event_onmouseout.asp

If you add a class to your link :
<a href="JavaScript:newPopup('$row[LocationPix]');" class="popupLink">
With jQUery :

$(document).ready(function() {

$("a.popupLink").hover(function() {
     var row = $(this).closest("tr");
     var $cell1 = $("td:eq(0)", row); // your link is inside
     var $cell2 = $("td:eq(1)", row); // address is inside
     var $cell3 = $("td:eq(2)", row); // phone is inside
     var $cell4 = $("td:eq(3)", row); // price is inside
     var $cell5 = $("td:eq(4)", row); // rating is inside
     doSomething($cell1.val(), $cell2.val(), $cell3.val(), $cell4.val(), $cell5.val()):
},function() {
})

});

Select allOpen in new window

http://stackoverflow.com/questions/11246/best-resources-to-learn-javascript

I have this:

function newPopup(url) {
popupWindow = window.open(
	url,'popUpWindow','height=300,width=300,left=10,top=10,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no'		)
}

Select allOpen in new window

with this..

<td><a href=JavaScript:newPopup('$row[LocationPix]');><img src='http://www.menuhead.net/Images/Buttons/PShotClear.png'</td>

Select allOpen in new window

Not to sure if I need this with the hover: or just the hover: alone.

no need to use hover

$(document).ready(function() {

$("a.popupLink").mouseover(function() {
     var row = $(this).closest("tr");
     var $cell1 = $("td:eq(0)", row); // your link is inside
     var $cell2 = $("td:eq(1)", row); // address is inside
     var $cell3 = $("td:eq(2)", row); // phone is inside
     var $cell4 = $("td:eq(3)", row); // price is inside
     var $cell5 = $("td:eq(4)", row); // rating is inside
     doSomething($cell1.val(), $cell2.val(), $cell3.val(), $cell4.val(), $cell5.val()):
})

});

Select allOpen in new window

Thank you leakim971 but I am looking at what you have and it is beyond my scope at this point.

What do the comments mean

// your link is inside ...etc

and this...

doSomething($cell1.val(), $cell2.val(), $cell3.val(), $cell4.val(), $cell5.val()):
})

do I need all of it just for the one cell?  Sorry, confused and trying!

if you don't need the cell content, forget the corresponding lines

OK I put this:

<script>
$(document).ready(function() {

$("a.popupLink").mouseover(function() {
     var row = $(this).closest("tr");
})

});
</script> 

Select allOpen in new window

And this:

function newPopup(url) {
	popupWindow = window.open(
		url,'popUpWindow','height=300,width=300,left=10,top=10,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no'		)
}

Select allOpen in new window

And this:

<td>a href='JavaScript:newPopup'('$row[LocationPix]');' class='popupLink'><img src='http://www.menuhead.net/Images/Buttons/PShotClear.png'</td>

Select allOpen in new window

Nothing happens

<script>
$(document).ready(function() {

$("a.popupLink").mouseover(function() {
     var row = $(this).closest("tr");
      alert("yes, you put your mouse over a link!!!");
})

});
</script> 

Select allOpen in new window

I added the above and this is the table:

<td><a href=JavaScript:newPopup('$row[LocationPix]');class='popupLink'><img src='http://www.menuhead.net/Images/Buttons/PShotClear.png'</td>

Select allOpen in new window

Nothing happens.  I just want it to work and look like this....
http://www.menuhead.net/PopUP/mouseover-popup/over.php
(Put your mouse on the blue picture.)
Not the ugly window popping up.

Start from this :
Source

hmmm. Nothing happens when I click on source.

Right Click on the page from the link you provided and choose view source

I have the source.  It's my test page.  The problem is that you can't use mouseover/mouseout in PHP, you either have to use JavaScript or CSS to get the rollover effect.  I've been searching since last night for a solution, and I am still looking as we speak.

if its the source code client side (so in the browser) it use only javascript and/css
you just need to take your time to understood how it work because this is exactly what you want

This is the page of the plugin doing the effect your want :
http://www.javascriptkit.com/script/script2/simpleimagetrail.shtml

Thank you.  I don't think the problem is there though.  I think the problem is getting the PHP to recognize the JavaScript, that seems to be where the problem is.  I have a number of the mouse trails.  But I can't see to get the PHP part.

what PHP can do, is to place the data somewhere (and if you're using a table, somewhere on the same row) where javascript is going to take the data

for example in a link
<a href="#thedata" ><img src="coolpix.jpg" /></a>

php :
<a href="#<?php echo $thedataForMyJavascript; ?>" ><img src="coolpix.jpg" /></a>
so javascript is going to get it:

$("a").click(function() {
     var dataFromPHP = $(this).attr("href"); // great PHP put the data in the href attribute
     dataFromPHP = dataFromPHP.replace("#", ""); // but we need to remove the hash tag
     alert( dataFromPHP );
})

It's not the only way, but I think you understood the logic

Thank you.  I understand the logic, but I am seriously in the weeds here!?!?!

so now, YOU know IT'S POSSIBLE back to ID: 38906420

Almost working.  Try this.

http://www.menuhead.net/PopUP/mouseover-popup/overthis.php

Just need it to show the image that belongs there.

<div id="pop-up">
      <h3>Pop-up div Successfully Displayed</h3>
      <p>
        Close But Not My Pix.
      </p>
    </div>

Select allOpen in new window

$(function() {
  var moveLeft = 20;
  var moveDown = 10;

  $('a#trigger').hover(function(e) {
    $('div#pop-up').show();
  }, function() {
    $('div#pop-up').hide();
  });

  $('a#trigger').mousemove(function(e) {
    $("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
  });

});

Select allOpen in new window

<td><a href ='#' id='trigger'('$row[LocationPix]');><img src='http://www.menuhead.net/Images/Buttons/PShotClear.png'</td>
			<td><strong><a href='$row[RestPage]'>$row[RestName]</a></strong></td>

Select allOpen in new window

Now how to get my picture to come up instead of this box?

Try closing your img tag.

<img src='http://www.menuhead.net/Images/Buttons/PShotClear.png'</td>

to

<img src='http://www.menuhead.net/Images/Buttons/PShotClear.png'></td>

Thank you.  How'd that get by? LOL!  Still no image though. I need to move the value over to the javascript.  My guess is that the javascript is not seeing it.

check this : http://jsfiddle.net/4T3aG/

$(function() {
    var moveLeft = 20;
    var moveDown = 10;

    $('a.popupLink').hover(function(e) {
        $('#popup p').html($(this).data("locationpix"));
        $("#popup").css({ display:'block', top:(e.pageY + moveDown), left:(e.pageX + moveLeft) });
    }, function() {
        $('#popup').hide();
    });

});

Select allOpen in new window

With :

<div id="popup">
    <h3>Pop-up div Successfully Displayed</h3>
    <p>Close But Not My Pix.</p>
</div>
<table>
    <tr>
        <td><a href="javascript:void(0)" data-locationpix="<? php echo $row[LocationPix]; ?>"; class="popupLink"><img src='http://www.menuhead.net/Images/Buttons/PShotClear.png' /></a></td>
    </tr>
</table>

Select allOpen in new window

Thank you. It's close but the image still isn't showing.
 
http://www.menuhead.net/PopUP/mouseover-popup/coulditbe.php

The other problem or the same.  Are the double quotes in PHP.  It works fine with a single quote, but the doubles make it scream and holler!  So changing those quotes maybe have something to do with it, even though it does show the text as it does in jsfiddle.

$(function() {
    var moveLeft = 20;
    var moveDown = 10;

    $('a.popupLink').hover(function(e) {
        $('#popup p').html($(this).data("locationpix"));
        $("#popup").css({ display:'block', top:(e.pageY + moveDown), left:(e.pageX + moveLeft) });
    }, function() {
        $('#popup').hide();
    });

});

</script> 
</head>

<body>
<?PHP
include("config.php");
$Food = $_POST['Food'];
$Place = $_POST['Place'];
			if(!$rs=mysql_query("SELECT tblRestaurants.RestName, tblRestaurants.RestPage,
				CONCAT(tblLocations.StreetNumber,' ', tblLocations.Street) Address,
				tblLocations.Phone, tblLocations.Price, tblLocations.Rating, tblLocations.LocationPix
				FROM tblLocations
				INNER JOIN tblRestaurants ON tblRestaurants.RestID = tblLocations.RestID
				INNER JOIN tblLocFood ON tblLocations.LocationID = tblLocFood.LocationID
				INNER JOIN tblLocPlace ON tblLocPlace.LocationID = tblLocations.LocationID
				WHERE tblLocFood.FoodID = '1'
				AND tblLocPlace.PlaceID = '2'
				ORDER By tblRestaurants.RestName ASC")) {
			echo "Cannot parse query";
			}
			elseif(mysql_num_rows($rs) == 0) {
			//echo "No records found";
			///////////////////////////////////////////
			echo "<table id=\"myResults\" table width=\"930\" class=\"beautifuldata\" align=\"Center\" cellspacing=\"0\">\n";
			echo "<thead>\n<tr>";
			echo "<th>PIX</th>";
			echo "<th>PLACE</th>";
			echo "<th>ADDRESS</th>";
			echo "<th>PHONE</th>";
			echo "<th>PRICE</th>";
			echo "<th>RATING</th>";
			echo "</tr>\n</thead>\n";
			while($row = mysql_fetch_array($rs)) {
			
			}
			echo "</table><br />\n";
			/////////////////////////////////////////
			}
			else {
			echo "<table id=\"myResults\" table width=\"930\" class=\"beautifuldata\" align=\"Center\" cellspacing=\"0\">\n";
			echo "<thead>\n<tr>";
			echo "<th>PIX</th>";
			echo "<th>PLACE</th>";
			echo "<th>ADDRESS</th>";
			echo "<th>PHONE</th>";
			echo "<th>PRICE</th>";
			echo "<th>RATING</th>";
			echo "</tr>\n</thead>\n";
			while($row = mysql_fetch_array($rs)) {
			echo"<tr>
			<td><a href='javascript:void(0)' data-locationpix='<? php echo $row[LocationPix]; ?>'; class='popupLink'><img src='http://www.menuhead.net/Images/Buttons/PShotClear.png' /></a></td>
			<td><strong><a href='$row[RestPage]'>$row[RestName]</a></strong></td>
			<td>$row[Address]</td>
			<td>$row[Phone]</td>
			<td>$row[Price]</td>
			<td>$row[Rating]</td>
			</tr>\n";
			}
			echo "</table><br />\n";	
			}
?>

<div hidden id="popup">
    <h3>Pop-up div Successfully Displayed</h3>
</div>

Select allOpen in new window

This is by far the toughest thing (and by the way the last thing for this page to be done.) that I've had to do so far.  Trying to get server side to do client side and have them talking, it's easy if it's static.  But this is hard and I do appreciate you helping me.  Thank you.

Line 64 should be :

			<td><a href='javascript:void(0)' data-locationpix='" . $row[LocationPix]; . "'; class='popupLink'><img src='http://www.menuhead.net/Images/Buttons/PShotClear.png' /></a></td>

Select allOpen in new window

Tried it, but it won't take those double quotes.
So I tried this.....
And it didn't show a pitcure.

<td><a href='javascript:void(0)' data-locationpix=' . $row[LocationPix]; . '; class='popupLink'><img src='http://www.menuhead.net/Images/Buttons/PShotClear.png' /></a></td>

Select allOpen in new window

It took the quotes like this but still no photo...

<td><a href='javascript:void(0)' data-locationpix=(" . $row[LocationPix] . "); class='popupLink'><img src='http://www.menuhead.net/Images/Buttons/PShotClear.png' /></a></td>

Select allOpen in new window

replace line 63 to 65 :

echo "<tr>";
echo "<td><a href='javascript:void(0)' data-locationpix='";
echo $row[LocationPix];
echo "'; class='popupLink'><img src='http://www.menuhead.net/Images/Buttons/PShotClear.png' /></a></td>
<td><strong><a href='$row[RestPage]'>$row[RestName]</a></strong></td>

Select allOpen in new window

post the new php code in a code snippet
post the new generated code in a code snippet or update your test age on your site

thanks

Included as such...

echo "<tr>";
echo "<td><a href='javascript:void(0)' data-locationpix='";
echo $row[LocationPix];
echo "'; class='popupLink'><img src='http://www.menuhead.net/Images/Buttons/PShotClear.png' /></a></td>
<td><strong><a href='$row[RestPage]'>$row[RestName]</a></strong></td>
	<td>$row[Address]</td>
	<td>$row[Phone]</td>
	<td>$row[Price]</td>
	<td>$row[Rating]</td>
	</tr>\n";

Select allOpen in new window

http://www.menuhead.net/PopUP/mouseover-popup/coulditbe.php

Thank you.

Why did you remove this :

<p>
        Close But Not My Pix.
      </p>

Select allOpen in new window

In the popup?
Please put it back

Its back.  And Ohhhhh.  I see the path now. I am sorry I removed that.

OK, This is absolutly PERFECT!  Thank you, I can stop pulling my hair out!  This is what I wanted all along!  Let me ask you something, because I have had problems communicating things in the past, was I not clear?  If so, how would I or should I have expalined it?  Just asking, so thst in the future I can be clearer.  I REALLY appreciate your help in this.  If I had a million points, I would give them to you!

Beyond Excellent!

To be sincere, we don't have feeling you're understand what we're talking about
EE is a good place to have help but not to have someone doing work for free or just because you pay the site

So I think once we've this bad feeling that you don't understand a simple piece of code, we're reluquant to help

IF I was you, I will try to split what I want in multiple parts and not with a general question :
- How to do that?
- what is the best way to do that?
Most of time, theses question smell traps, I don't answers them or just with a tutorial (mean the EE member don't know google :)
Or in a wrong way asking for something totally different from the original question

A good question :
<< How to create a small window once my mouse go over an image with a link around?>>
So here we know you don't want a popup window which appear in a new window or tab

If you're lucky you get a full code for that
If you provide a code in your question, that mean you know what you're talking about and not you get a code somewhere because we start to work in the wrong direction

Go step by step, if you don't know, just ask << what is the name of >>
Yes it's a question, you may think you loose time but you're gonna to win time
Once you got the name, do a search on google to found a good article, on experts-exchange, on stackoverflow so when you start typing your next question you're familiar with term and you can design what you want

If you can provide a design of what you want because you don't know what is the name, it's better, here you was able to provide a good link so we go forward in the right direction
Here again, you was able to provide a demo of what you try, it's very good, we are on a test page with minimum piece of code and HTML and design, everyone can focus on the problem, don't provide a huge page of code and html with tons of errors, nobody want to see that

Good luck!

Thank you for your sincerity!  I will try better!  I think the problem is that I know what I want to do but have a hard time expressing it.  I am fairly young in all this, and I agree, I don't know all of the terminology, I will learn it in time.  I do appreciate your help and everyone else's help.  Have a good day!  And once again Thank you.

You're welcome

Even though this question is already closed, I'd like to home in on this part a little bit.  It sounds like you might want to make a study of the client/server architecture.

...you can't use mouseover/mouseout in PHP,

That is correct because PHP does not have mouse interactions.  The mouse is part of the client machine.  But PHP runs on the server.  It creates the HTML (XML), JavaScript and CSS that becomes the web page.  By the time the client sees the web page, PHP is finished running and the server has gone back into its stateless sleep.