On a PHP-HTML page, I am looking to dynamically change the position of an image with PHP. I know how to do this, but I also want users to have a preview before submitting the values.
<form class="ysize" action="phpchangesize.php" method="get" name="zs"><span style="color:#FF0000"><strong>-<input name="chsize" size="1" type="text" value="400" />px <input name="sb" type="submit" value="Change Cover Top" /></strong></span></form>
<style>
.ysize
{
position:absolute;
right:0px;
top:0px;
}
.cover
{
position:absolute;
height:100%;
width:100%;
left:0px;
top:-400px;
z-index:-1;
}
</style>
<img class="cover" alt="" src="<?php echo $profilecover ?>" />
When the user clicks the submit button, the PHP will write the 400 value and display it on the page. However, I do not want the user to reload the page for every attempt at changing the value. Instead, I want to create a live preview using Javascript, allowing users to see how the image will look before submitting their changes.
So, the JavaScript needs to detect the form value and update the CSS style in real-time to show users how the image will appear with the new position before they submit it.