Page 1 of 1
Display variable on mouse over
Posted: Thu Apr 26, 2012 6:30 pm
by vitinho444
Hello Indies!
Im going straight to the problem.
I got this piece of code that shows a pseudo-map with all the current villages in game.
Code: Select all
$mapDiv = '<div id="map">';
$villageQuery = mysql_query("SELECT * FROM `aldeias`");
while( $village = mysql_fetch_assoc($villageQuery) )
{
// village div should be aligned to center of its axes, not to the top right corner
// therefore we take half the div height and width of its position
$mapVillageX = $village['x']; // 25 = 50/2 (50px)
$mapVillageY = $village['y']; // 25 = 50/2 (50px)
$name = $village['nome'];
$mapDiv .= '<div class="village" style="top: '. $mapVillageY .'px; left: '. $mapVillageX .'px">
<a href="village.php?x='. $village['x'] .'&y='. $village['y'] .'">'.$name.'<br>' . $village['x'] . "," . $village['y'] . '</a>
</div>';
}
echo $mapDiv . '</div>';
So the maps displays 3 villages, all right and displays a square on the village position and the name aswell.
Well the problem is, the name uses too much space and i want to hide it but if the player puts the mouse over the square of a village i want it to show the name of the village with the hyperlink to village.php?...
Is it possible?
Thanks a lot
Re: Display variable on mouse over
Posted: Thu Apr 26, 2012 9:23 pm
by Jackolantern
The only thing PHP can do is show text on a mouse-over, because that is all plain HTML can do. However, you can create all kinds of nice-to-funky pop-up boxes with links, and even entire webpages inside them when the user mouses over something. You may have seen something like this before in a PBBG where you mouse over an item, and a picture as well as a nicely formatted group of info about the item pops-up like in WoW or another MMO. That has to be done with JS, and unless I am totally off my rocker, I believe it is the only way to have a pop-up box with a link on a mouse-over. Within JS, you could not click anything in it because they disappear when the mouse moves anyway.
jQuery has literally hundreds of plugins to do this for you with very little setup. I can't think of any right off hand, but I do know I used a nice one a year or two back that looked like Final Fantasy pop-up boxes lol.
Re: Display variable on mouse over
Posted: Fri Apr 27, 2012 6:22 am
by Winawer
Showing a div on hover can be done using pure HTML+CSS by using :hover, but :hover will only work with the <a> tag if you want to support IE6.
Code: Select all
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.village {
position: absolute;
}
.village div {
display: none;
}
.village:hover div {
display: block;
}
</style>
</head>
<body>
<div class="village">
I am a village, yay.
<div>
I am a popup with village info and a <a href="#">link</a>.
</div>
</div>
</body>
</html>
I prefer using JavaScript, though. You get more options like getting the village info with Ajax, delay on closing the popup, etc.
Re: Display variable on mouse over
Posted: Fri Apr 27, 2012 4:33 pm
by vitinho444
Hey Winawer i already got a style:
Code: Select all
<head>
<style type="text/css">
#map {
height: 600px;
width: 800px;
overflow: hidden;
}
#map .village {
position: relative;
height: 25px;
width: 25px;
}
#map .village a {
height: 25px;
width: 25px;
background: #F00;
border: #F00 1px solid;
display: block;
}
.village {
position: absolute;
}
.village div {
display: none;
}
.village:hover div {
display: block;
}
</style>
And by adding the last things (the ones that you said) it hides the square of the village position too and i just want to hide the name of the village
Heres the part for that:
Code: Select all
$mapDiv = '<div id="map">';
$villageQuery = mysql_query("SELECT * FROM `aldeias`");
while( $village = mysql_fetch_assoc($villageQuery) )
{
// village div should be aligned to center of its axes, not to the top right corner
// therefore we take half the div height and width of its position
$mapVillageX = $village['x']; // 25 = 50/2 (50px)
$mapVillageY = $village['y']; // 25 = 50/2 (50px)
$name = $village['nome'];
$mapDiv .= '<div class="village" style="top: '. $mapVillageY .'px; left: '. $mapVillageX .'px">
<div>
<a href="village.php?x='. $village['x'] .'&y='. $village['y'] .'">'.$name.'<br>' . $village['x'] . "," . $village['y'] . '</a>
</div>
</div>';
}
echo $mapDiv . '</div>';
Something wrong?
Re: Display variable on mouse over
Posted: Fri Apr 27, 2012 6:37 pm
by Winawer
You mean it hides the coordinates? Take them out of the div and they won't become hidden.
Re: Display variable on mouse over
Posted: Fri Apr 27, 2012 8:38 pm
by Jackolantern
Winawer wrote:Showing a div on hover can be done using pure HTML+CSS by using :hover, but :hover will only work with the <a> tag if you want to support IE6.
Ohh, yeah. I forgot about the 'display' CSS attribute lol! You can of course get some nice transitions and effects in Javascript, though!
Re: Display variable on mouse over
Posted: Fri Apr 27, 2012 9:16 pm
by vitinho444
Winawer the div is hiding the text wich is right.
But i want to show a square at the village position (it was working before) .. Or maybe if you know how, show an image but even without hover.
For the hover i just want to show the hyperlink with the name
Jacko
Thanks a lot, I checked jQuery but i dont know how to set it up
Is there a good tutorial on it?
Re: Display variable on mouse over
Posted: Fri Apr 27, 2012 10:23 pm
by Jackolantern
vitinho444 wrote:Jacko
Thanks a lot, I checked jQuery but i dont know how to set it up
Is there a good tutorial on it?
Literally thousands.
Here is a small sampling of the jQuery tutorials out there, all linked on the jQuery website itself.
However, I will jump the gun of comments I know are probably coming: If all you want to do is show a pop-up box, jQuery may be overkill. It is an all-inclusive library, almost a platform really, that simplifies nearly all aspects of Javascript, so you will get some bloat if you use it just for pop-up boxes. However, using something like the Google CDN
to link it could basically negate the time to download the file for many users. But it could still be worth it to simply download a vanilla JS script to make nice pop-up boxes, or simply fiddle with the HTML/CSS way to get that to your liking.
Re: Display variable on mouse over
Posted: Sat Apr 28, 2012 4:08 pm
by vitinho444
Well that part you said about the popup after the mouseover its very cool and i saw that on a game called Gladiatus, im thinking using this but not for now, im worried about creating the basic frame of the game, then passing to advanced, and then design