dimanche 28 juin 2015

Show AJAX div when image hovered and follow the mouse

I need help. I'm working on a website that's give user a download link to movies. But I can't get the preview_block div showed up when the mouse is hovered on the movie_block. I can't even make the div follow my mouse when I hovered it. Here's my code. I temporarily comment out the style link.

<?php
require_once('includes/variables.php');
?>
<!DOCTYPE html>
<html>
    <head>
        <!--<link href="includes/styles.css" />-->
        <style>#movie_block {
    cursor: pointer;
}
#preview_block {
    position: absolute;
    display: none;
}
body {
    position: relative;
}</style>
    </head>
    <body>
        <div class="">
            <div id="preview_block" style="display:none"><p>test</p></div>
            <table>
                <!-- -->
                <tr>
                    <td>
                        <a href="<?php echo $movieNameList->data->movies[0]->torrents[0]->url; ?>"><span id="movie_block"><img src="<?php echo $movieNameList->data->movies[0]->medium_cover_image ?>" alt="<?php echo $movieNameList->data->movies[0]->title; ?>" /></span></a>
                        <br>
                        <a href="<?php echo $movieNameList->data->movies[0]->torrents[0]->url; ?>"><?php echo $movieNameList->data->movies[0]->title; ?></a>
                        <br>
                    </td>
                    <td>
                        <a href="<?php echo $movieNameList->data->movies[1]->torrents[0]->url; ?>"><span id="movie_block"><img src="<?php echo $movieNameList->data->movies[1]->medium_cover_image ?>" alt="<?php echo $movieNameList->data->movies[1]->title; ?>" /></span></a>
                        <br>
                        <a href="<?php echo $movieNameList->data->movies[1]->torrents[0]->url; ?>"><?php echo $movieNameList->data->movies[1]->title; ?></a>
                        <br>
                    </td>
                    <td>
                        <a href="<?php echo $movieNameList->data->movies[2]->torrents[0]->url; ?>"><span id="movie_block"><img src="<?php echo $movieNameList->data->movies[2]->medium_cover_image ?>" alt="<?php echo $movieNameList->data->movies[2]->title; ?>" /></span></a>
                        <br>
                        <a href="<?php echo $movieNameList->data->movies[2]->torrents[0]->url; ?>"><?php echo $movieNameList->data->movies[2]->title; ?></a>
                        <br>
                    </td>
                    <td>
                        <a href="<?php echo $movieNameList->data->movies[3]->torrents[0]->url; ?>"><span id="movie_block"><img src="<?php echo $movieNameList->data->movies[3]->medium_cover_image ?>" alt="<?php echo $movieNameList->data->movies[3]->title; ?>" /></span></a>
                        <br>
                        <a href="<?php echo $movieNameList->data->movies[3]->torrents[0]->url; ?>"><?php echo $movieNameList->data->movies[3]->title; ?></a>
                        <br>
                    </td>
                    <td>
                        <a href="<?php echo $movieNameList->data->movies[4]->torrents[0]->url; ?>"><span id="movie_block"><img src="<?php echo $movieNameList->data->movies[4]->medium_cover_image ?>" alt="<?php echo $movieNameList->data->movies[4]->title; ?>" /></span></a>
                        <br>
                        <a href="<?php echo $movieNameList->data->movies[4]->torrents[0]->url; ?>"><?php echo $movieNameList->data->movies[4]->title; ?></a>
                        <br>
                    </td>
                </tr>
                <!-- -->
                <tr>
                    <td>
                        <a href="<?php echo $movieNameList->data->movies[5]->torrents[0]->url; ?>"><span id="movie_block"><img src="<?php echo $movieNameList->data->movies[5]->medium_cover_image ?>" alt="<?php echo $movieNameList->data->movies[5]->title; ?>" /></span></a>
                        <br>
                        <a href="<?php echo $movieNameList->data->movies[5]->torrents[0]->url; ?>"><?php echo $movieNameList->data->movies[5]->title; ?></a>
                        <br>
                    </td>
                    <td>
                        <a href="<?php echo $movieNameList->data->movies[6]->torrents[0]->url; ?>"><span id="movie_block"><img src="<?php echo $movieNameList->data->movies[6]->medium_cover_image ?>" alt="<?php echo $movieNameList->data->movies[6]->title; ?>" /></span></a>
                        <br>
                        <a href="<?php echo $movieNameList->data->movies[6]->torrents[0]->url; ?>"><?php echo $movieNameList->data->movies[6]->title; ?></a>
                        <br>
                    </td>
                    <td>
                        <a href="<?php echo $movieNameList->data->movies[7]->torrents[0]->url; ?>"><span id="movie_block"><img src="<?php echo $movieNameList->data->movies[7]->medium_cover_image ?>" alt="<?php echo $movieNameList->data->movies[7]->title; ?>" /></span></a>
                        <br>
                        <a href="<?php echo $movieNameList->data->movies[7]->torrents[0]->url; ?>"><?php echo $movieNameList->data->movies[7]->title; ?></a>
                        <br>
                    </td>
                    <td>
                        <a href="<?php echo $movieNameList->data->movies[8]->torrents[0]->url; ?>"><span id="movie_block"><img src="<?php echo $movieNameList->data->movies[8]->medium_cover_image ?>" alt="<?php echo $movieNameList->data->movies[8]->title; ?>" /></span></a>
                        <br>
                        <a href="<?php echo $movieNameList->data->movies[8]->torrents[0]->url; ?>"><?php echo $movieNameList->data->movies[8]->title; ?></a>
                        <br>
                    </td>
                    <td>
                        <a href="<?php echo $movieNameList->data->movies[9]->torrents[0]->url; ?>"><span id="movie_block"><img src="<?php echo $movieNameList->data->movies[9]->medium_cover_image ?>" alt="<?php echo $movieNameList->data->movies[9]->title; ?>" /></span></a>
                        <br>
                        <a href="<?php echo $movieNameList->data->movies[9]->torrents[0]->url; ?>"><?php echo $movieNameList->data->movies[9]->title; ?></a>
                        <br>
                    </td>
                </tr>
            </table>
        </div>


        <script>
            $("#movie_block").hover(function(event) {
                $("#preview_block").css({top: event.clientY, left: event.clientX}).show();
            }, function() {
                $("#preview_block").hide();
            });
        </script>
    </body>
</html>

Aucun commentaire:

Enregistrer un commentaire