• PHP Help
  • How do i add mouse over css with php code?

Hello, im trying to show game titles texts when you put the mouse pointer over the game images.
I have tried to add div class css to the code on bottom of this php script but am having no luck.
Would anyone know how to add a mouse over statement to this code? I am running php5.6 on my server so this code is older but works fine.
`<?php
// The following code is for a box of random games
echo '<div class="">';
$query = yasDB_select("SELECT * FROM games order by rand() limit 12");
while($games = $query->fetch_array(MYSQLI_ASSOC)) {
$gameurl = $games['title'];
$gameurl = str_replace(" ", "-", $gameurl);
$gameurl = str_replace("'", "", $gameurl);
$gameurl = str_replace('"', "
", $gameurl);
$gameurl = str_replace('/', "", $gameurl);
$gameurl = str_replace("\", "
", $gameurl);
$gameurl = rawurlencode($gameurl);
if (file_exists($games['thumbnail'])) {
$thumbnail = $siteurl.$games['thumbnail'];
$thumbnail = urldecode($thumbnail);
} else {
$thumbnail = $siteurl.'img/nopic.jpg';
}
if ($seo=="yes") {
echo '<div class="image-inner1">';
echo'<a href="' . $siteurl . 'game/' . $games['id'] . '/' . $gameurl . '.html' . '">';
echo '<br><img src="' . $thumbnail . '" width="135" height="105" /></a></div>';
echo $games['title'].''.$void.'';
}else {
echo '<div class="image-inner1">';
echo '<a href="' . $siteurl . 'index.php?act=game&id=' . $games['id'] . '">';
echo '<br><img src="' . $thumbnail . '" width="135" height="105" alt="'.$games['name'].'" title="'.$games['name'].'"/></a>';
echo $games['title'].''.$lightbox.'</div>';

		}

	}
	$query->close();
	echo '</div>';?>`

Work out what content you want and the CSS to go with it to make it visible on hover (there are plenty of CSS tutorials on the subject). That's where all the work is. PHP only comes in at the end when you want to output the text you've just worked out is needed, and you already have plenty of examples in your own code about how to output text.

    mike-345 when you put the mouse pointer over the game images

    The quick and easy solution is to add a title attribute to the relevant image HTML tag. The downside is: what if the user is on a tablet, phone, or otherwise not using a mouse?

      4 days later

      Hi, i know this line --echo $games['title'].''.$lightbox.'</div>';--outputs the text right below 112 random game images that are 60px by 60px in size, problem is it blows the whole thing apart when displaying all these titles, So i thought a mouse over would be nice, I have tried some mouse over css aimed at the bottom of the php code, Also it is a flash game legacy site using ruffle to work so laptop or desktop would be best to play the games, thanks for your help.

        Thing is, this has nothing to do with PHP. That will only come in when you have everything working, and you need the script to insert the relevant text.

          Hello, yes everything is working, the images output just fine and when i add this php line to the bottom it will output title texts to each image, Now i need to make the titles only show when mouse over them, i have tried different css scripts but cant figure out how to get them to work as they seem to contain two div classes, One for the images and one for the text, like this example from 3schools
          div class="container"
          img src="img_avatar.png" alt="Avatar" class="image"
          div class="overlay
          div class="text">Hello World
          Im trying to find out how to implement such class's to the php game title output, I.E
          echo $games['title'].''.$void.'</div>';

          And this line being the images php output,
          echo '<img src="' . $thumbnail . '" width="60" height="60" alt="'.$games['name'].'" title="'.$games['name'].'"/></a></div>';
          Thanks for your help

          mike-345 cant figure out how to get them to work as they seem to contain two div classes, One for the images and one for the text

          Well yes, one to be visible and one to only show up on mouseover. Why can't you do that in your code?

          div class="container"
          img src="<?=$games['image thumbnail'] ?>" alt="Avatar" class="image"
          div class="overlay
          div class="text"><?=$games['popup text'] ?>

          Or whatever you've got.

            No, it did not work, seemed simple but is not.

              This lines output showed a hover over title but its small, would like to style it bigger if possible,
              echo '<img src="' . $thumbnail . '" width="60" height="60" title="'.$games['title'].'"/></a></div>';

              Have to find out how to style this part of the code
              title="'.$games['title'].'"

                Isn't that what the width and height are there for?

                  Hi, no that controls the size of the thumbnails outputted, 112 of them.

                    So is there something in the CSS that controls the style?

                      Yes, just tried to add a font size to the css, dont work, also tried inline css, dont work, wow.

                        22 days later

                        Well i got it, by combining div class="ran_box" with the tool tip css i was able to create a nice styled tool tip that shows the game titles, If anyone cares to see the results it can be found on the game play page of my site funplaytyme.com

                          Write a Reply...