Display variable on mouse over

Need help with an engine or coding not on the list? Need help with a game or the website and forums here? Direct all questions here.
Post Reply
User avatar
vitinho444
Posts: 2825
Joined: Mon Mar 21, 2011 4:54 pm

Display variable on mouse over

Post 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
My Company Website: http://www.oryzhon.com

Skype: vpegas1234
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: Display variable on mouse over

Post 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.
The indelible lord of tl;dr
Winawer
Posts: 180
Joined: Wed Aug 17, 2011 5:53 am

Re: Display variable on mouse over

Post 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.
User avatar
vitinho444
Posts: 2825
Joined: Mon Mar 21, 2011 4:54 pm

Re: Display variable on mouse over

Post 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?
My Company Website: http://www.oryzhon.com

Skype: vpegas1234
Winawer
Posts: 180
Joined: Wed Aug 17, 2011 5:53 am

Re: Display variable on mouse over

Post by Winawer »

You mean it hides the coordinates? Take them out of the div and they won't become hidden.
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: Display variable on mouse over

Post 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!
The indelible lord of tl;dr
User avatar
vitinho444
Posts: 2825
Joined: Mon Mar 21, 2011 4:54 pm

Re: Display variable on mouse over

Post 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?
My Company Website: http://www.oryzhon.com

Skype: vpegas1234
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: Display variable on mouse over

Post 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.
The indelible lord of tl;dr
User avatar
vitinho444
Posts: 2825
Joined: Mon Mar 21, 2011 4:54 pm

Re: Display variable on mouse over

Post 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
My Company Website: http://www.oryzhon.com

Skype: vpegas1234
Post Reply

Return to “Advanced Help and Support”