PHP, JS : Preview with mouse hover not working, images shown by default always
Question
I am working on a PHP project in which I am trying to show an image preview after mouse hover. I am trying it with JS script, but it's not working as intended. I have to pass the image URL in a for loop depending upon name of file. I am seeing the preview always.
Code:
<!doctype html>
<html lang="en">
<head>
<style>
.test {
display: none;
}
.underline {
text-decoration: underline;
}
</style>
</head>
<body>
<?php
echo "
<table align='center' class='loopblock'>
<tr class='loop'>
<td>Template ID Client: $client_id </th>
</tr>
";
echo "<table align='center' class='loopblock'>";
$path = "/var/www/html/pdf/";
$files = scandir($path);
$files = array_diff(scandir($path), array('.', '..'));
$counter = 1;
foreach($files as $key) {
echo "
<tr class='label-loop'>
<td class='counter' align='left' width='100' >
<a class='label-loop' align='left' href='/send-email.php?fileName=$key'>
$counter
</a>
</td>
<img id='test' src='PATH/to/image.png'>
Name
</img>
<td class='click' align='center' width='500' class='loop'>
<a class='loop' align='right' href='/send-email.php?fileName=$key'>
$key
</a>
</td>
</tr>
";
$counter++;
}
echo"</table>";
?>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script>
$(document).ready(function () {
$('span').hover(function(){
$(this).addClass('underline'); //to make text underlined on hover
$('#image').show(); //displays image on mouse in
},function(){
$(this).removeClass('underline'); //remove underline on mouse out
$('#image').hide(); //hides image on mouse out
});
});
</script>
</body>
</html>
1 answers
solution1
1 ACCPTED 2019-02-19 11:57:43
The following css code sets the display for a class test , but there is only an id test in here <img id='test' src='PATH/to/image.png'>Name</img> :
.test{
display: none;
}
Since the images are created in a loop it should be a class not an id.
And your Javascript Code $('#image').hide(); is used for an id image , which is nowhere to find in your code.
So either there is some code missing in your question, or the above might be your problem.
Edit: Your hover also is triggered by a span tag, which is nowhere to find. And if you have changed the test to an class, you have to use $('.test').show();
Edit 2:
Here is a js example of how to do it with a td hover and show only the image which is inside it:
HTML / PHP PART:
foreach($files as $key) {
echo "
<tr class='label-loop'>
<td class='counter' align='left' width='100' >
<a class='label-loop' align='left' href='/send-email.php?fileName=$key'>
$counter
</a>
</td>
<td class='click loop' align='center' width='500'>
<a class='loop' align='right' href='/send-email.php?fileName=$key'>
$key
</a>
<img class='test' src='PATH/to/image.png'>
</td>
</tr>
";
$counter++;
}
JS PART:
$(document).ready(function () {
$('td.click').hover(function(){
$(this).addClass('underline'); //to make text underlined on hover
$(this).find(".test").show(); //displays image on mouse in
},function(){
$(this).removeClass('underline'); //remove underline on mouse out
$(this).find(".test").hide(); //hides image on mouse out
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.