My challenge is displaying dynamic images from a database alongside details like color, name, and size, with a hover effect that shows a border.
- Whenever I hover over one image, the other images shift to the right or left. I want them to stay in place.
- There is unwanted space between some of the pictures on the left or right side.
I have tried multiple solutions to fix these issues but to no avail. Please help.
Here is the HTML code within a PHP function:
<table id='o4_img_w<?php echo $picid ?>' style="margin-right:10px; margin-bottom: 60px; float: left">
<tr>
<td>
<span style="position: relative; top: -100px" ><?php echo "$pro_col"; ?></span>
<span><img src='images/sales/<?php echo $picname ?>' style='width: 150px'></span>
<span style="position: relative; top: 15px; left: -100px" ><?php echo "$pro_name"; ?></span>
</td>
</tr>
</table>
Javascript within the PHP function for the hover effect:
<script type="text/javascript">
$(document).ready(function () {
$("#o4_img_w<?php echo $picid; ?>").hover(function () {
$(this).css({
'border': 'solid black 1px',
'paddingBottom': '30px'
});
}, function () {
$(this).css({
'border': 'none'
});
});});
</script