[SOLVED] Rollover popup

supermerc · May 18, 2009

Hey,

I have this script that shows all the the items in my vault table from my database. However I want to display things like the item name the cost and a bigger image in a little popup rollover and then it disapears when you arent over anymore.

I already had something to the popup rollover but I dont know how to make it work to pull information from database.

all i have was

<head>
<script language="JavaScript">

function show_it(){
document.all.box1.style.visibility = "visible";
}
function hide_it(){
document.all.box1.style.visibility = "hidden";
}
</script>
</head>
<style>
#box1 {
position: right;
top: 50px;
left: 100px;
border: solid 3px #000000;
background-color: #ffff00;
visibility: hidden;
}
</style>
<body>
then here i would have my image with the onmouse.... etc

<div id="box1">
<table cellspacing="0" cellpadding="0" style="background-image:url(http://quiver.outwar.com/images/bg.jpg);color:#FFFFFF;font-size:8pt;font-family:Verdana;width:300px;">
	<tr><td colspan="2" style="font-weight:bold;height:20px;font-size:10pt;color:#FFFFFF" align="left"><?= $row[name] ?></td></tr>
	<tr><td align="left" valign="top" style="padding:2px;font-family:Verdana;font-weight:bold;font-size:7pt;color:#FFFFFF;">
			[Player Bound]<br/>[slot - Foot]<br/><br>+164 HP<br>+20 exp per hr<br>			</td>
		<td align="center" valign="top" style="width:80px;font-family:Verdana;font-size:7pt;color:#FFFFFF;">
			<img src="http://quiver.outwar.com/images/foot3.gif" style="border:1px solid #666666;margin:2px;"><br>
	  <br></td>			
	</tr>
	<tr><td colspan="2" style="padding:2px;" valign="top">
		<div style="font-family:verdana;font-size:7pt;font-style:italic;color:#FFCC00">
						</div>
</body>

basicly that works, but then when I put my loop to put all my items in database i dont know how to make it so that popup div box will show information for each item.

Please help

nadeemshafi9 · May 18, 2009

function onmouseover(){
     newdiv=document.createElement('div');
      newdiv.id = 'thepopup';
     newdiv.style = 'position: absolute; top: 40%; left: 40%;';
     newimg.onclick=closebox();
     
    //JQUERY
     $.ajax({
      type: "POST",
      url: "getmypopupcontent.php",
      data: "name=John&location=Boston",
      success: function(msg){
       newdiv.innerHTML = msg;
     });
     document.body.appendChild(newdiv);

}

function closebox(){
      document.body.removeChild('thepopup');
}

zq29 · May 18, 2009

Rather than posting some code on its own, would you not think it be more helpful / useful if you offered an explanation to go with it, nadeemshafi9?

supermerc, the example posted above by nadeemshafi9 is about a third of a solution which employs AJAX (via the jQuery toolset) to fetch the information from a PHP script in real-time. Another alternative would be to dynamically create the JavaScript that builds the tooltips with PHP.

supermerc · May 18, 2009

Another alternative would be to dynamically create the JavaScript that builds the tooltips with PHP.

what do you mean by that?

zq29 · May 18, 2009

Another alternative would be to dynamically create the JavaScript that builds the tooltips with PHP.

what do you mean by that?

PHP that builds JavaScript:

<?php
echo "<script type='text/javascript'>";
for($i=1; $i<=10; $i++) {
    echo "document.write('{$i}');";
}
echo "</script>";
?>

supermerc · May 18, 2009

I dont understand how the popup comes into it tho

supermerc · May 19, 2009

bump

michaellunsford · May 19, 2009

Here's a snippet from something I built recently. I'm not including the javascript because I'm reading you already have that part done, right?

<?php //code to build the images
$result=mysql_query("SELECT * FROM `table`");
while($get_row=mysql_fetch_assoc($result)) {
	echo "\r\n\t<div class=\"some_photo\">";
	echo "\r\n\t\t<img src=\"/thumbs/".$get_row['filename']."\" alt=\"\" onmouseover=\"popPreview('".$get_row['filename']."');\" onmouseout=\"popGoAway();\" />";
	echo "\r\n\t</div>";
}
?>

onmouseover the javascript portion does an innerHTML change of the preview div. Mine just changes the image code - but you could have it build a little table with database values. Like so:

//javascript document
products = array();
<?php //same code as above - except it builds a javascript array.
$result=mysql_query("SELECT * FROM `table`");
while($get_row=mysql_fetch_assoc($result)) {
	echo "products[i++] = '<img src=\"/big_images/".$get_row['filename']."\" alt=\"\" /><br />Name: ".$get_row['prod_name']."<br />Price: ".$get_row['price']."';\r\n";
}
?>

supermerc · May 19, 2009

No i dont think my javascript matches that because how mine works is the div is outside the code, from what i see on yours its inside..?

zq29 · May 19, 2009

supermerc, these are examples of concepts we are offering you here - Our aim is not to do your work for you, it is to put you in the right direction in the hope that you will figure out how to do this yourself.

supermerc · May 19, 2009

I know but i tried out the code he gives me but it just makes a loop from database it doesn't help me change whats in the div for each item, I already had a code to show the items in vault.

michaellunsford · May 19, 2009

then you're looking for javascript, not php.

<script type="text/javascript">
function popPreview(imgid) {
document.getElementById('preview_window').innerHTML = '<img src="/big_images/'+imgid+'" alt="" width="350" />';
document.getElementById('preview_window').style.visibility = 'visible';
}
function popGoAway() {
document.getElementById('preview_window').style.visibility = 'hidden';
document.getElementById('preview_window').innerHTML = '';
}
</script>

this is associated with a div called "preview_window" like such:

<div id="preview_window"></div>

simply replace the "innerHTML" value with whatever you want in that div. You can build an array of them (like in a previous example), and pass the array key as a second value in the pop_preview function. Be sure to make your array global inside that function so you can get to that data, though.

edit: you will also have to write a bit of CSS to make that div hidden by default. your onmouseover reveals it, and onmouseout hides it again (from previous example).

supermerc · May 19, 2009

when you say

onmouseover the javascript portion does an innerHTML change of the preview div

are you talking about this?

echo "\r\n\t<div class=\"some_photo\">";

echo "\r\n\t\t<img src=\"/thumbs/".$get_row['filename']."\" alt=\"\" onmouseover=\"popPreview('".$get_row['filename']."');\" onmouseout=\"popGoAway();\" />";

echo "\r\n\t</div>";

because if so then its not gonna work, because I want my image to show and when you go over the image then it shows a different div with information on the image.

michaellunsford · May 20, 2009

Here's a functional example you can look at.

http://theadvertiser.com/cruzzers

Remember, just because it doesn't have whatever little piece you want doesn't mean you throw the whole thing away. Take what works, add what you need and move on.

supermerc · May 20, 2009

thats exactly what I need!

michaellunsford · May 20, 2009

reveal code on that page and you'll see the same stuff all over this forum thread.

supermerc · May 20, 2009

well its in php it doesnt show in source

michaellunsford · May 20, 2009

Seriously, dude, the PHP has little to do with what you're trying to do. The layout is an attached CSS stylesheet, the mouseover code is an attached javascript file; all of which is publicly accessible via your browser's "view source" function.

Since you're convinced there's some magic in the PHP, here's exactly what every bit of PHP on that page does; it should look quite familiar.

<div id="reader_photos">
<?php
$query="SELECT * FROM `table`";
$result=mysql_query($query);
while($get_row=mysql_fetch_assoc($result)) {
	echo "\r\n\t<div class=\"reader_photo\">";
	echo "\r\n\t\t<img src=\"/thumbs/".$get_row['filename']."\" alt=\"".$get_row['filename']."\" onmouseover=\"popPreview('".$get_row['filename']."');\" onmouseout=\"popGoAway();\" />";
	echo "\r\n\t</div>";
	}
}
?>
</div>
<div id="preview_window"></div>

supermerc · May 20, 2009

I donno it just doesnt seem to work for me...

heres my code

<? include 'config.php';?>
<head>
<script type="text/javascript">
function popPreview(imgid) {
document.getElementById('preview_window').innerHTML = '<img src="http://quiver.outwar.com/images/'+imgid+'" alt="" width="350" />';
document.getElementById('preview_window').style.visibility = 'visible';
}
function popGoAway() {
document.getElementById('preview_window').style.visibility = 'hidden';
document.getElementById('preview_window').innerHTML = '';

</script>
</head>
<style>
#preview_window {
padding:25px;
visibility:hidden;
width:auto;
max-height:325px;
overflow:hidden;
border:3px solid #0eb8f0;
z-index:1;
position:absolute;
background:#a7def0;
top:auto;
left:auto;
}

</style>
<body>
<div id="reader_photos">
<?php
   $query="SELECT * FROM `vault`";
   $result=mysql_query($query);
   while($get_row=mysql_fetch_assoc($result)) {
      echo "\r\n\t<div class=\"reader_photo\">";
      echo "\r\n\t\t<img src=\"http://quiver.outwar.com/images/".$get_row['spath']."\" alt=\"".$get_row['spath']."\" onmouseover=\"popPreview('".$get_row['spath']."');\" onmouseout=\"popGoAway();\" />";
      echo "\r\n\t</div>";
      }

?>
</div>
<div id="preview_window"></div>
</body>
</html>

Just like what youve been telling me all along this post and the same as on your example.

http://pulse.comxa.com/poptest.php <-- Live example of mine

michaellunsford · May 20, 2009

Well, for one, you didn't close your popGoAway() function. Also, you'll need to layout the page using CSS to make it appear properly.

here's the CSS used on the example page

.reader_photo {
width:80px;
height:80px;
float:left;
padding:5px;
background:#a7def0;
border:3px solid #0eb8f0;
margin:25px;
text-align:center;
}

I'd encourage you to use Firefox and install the firebug and web developer add-ons. These can help you to with figuring out the client side of things - like javascript errors.

supermerc · May 20, 2009

Thanks it works now!

Except that the position automatically goes to the top left of the page everytime, i tried to fix it but I dont know how.

I want it to be like yours and I have the same css as yours but mine doesnt go at same place.

http://pulse.comxa.com/poptest.php <-- Live example of mine

michaellunsford · May 20, 2009

check my body tag - there's an onmousemove that calls a function. It's also tied to a few other functions, copy them all to your javascript and you should be good to go.

supermerc · May 20, 2009

thanks a bunch

nadeemshafi9 · May 20, 2009

download jquery include it and create a php file which outputs your popup

function onmouseover(){
     newdiv=document.createElement('div');
      newdiv.id = 'thepopup';
     newdiv.style = 'position: absolute; top: 40%; left: 40%;';
     newimg.onclick=closebox();
     
    //JQUERY
     $.ajax({
      type: "POST",
      url: "getmypopupcontent.php",
      data: "name=John&location=Boston",
      success: function(msg){
       newdiv.innerHTML = msg;
     });
     document.body.appendChild(newdiv);

}

function closebox(){
      document.body.removeChild('thepopup');
}

Sign In

[SOLVED] Rollover popup

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information