javascript - My image with a PHP variable source is broken -
my end goal have image swaps different image when window scrolls past point. started javascript whole scroll position , set if/else statement.
<script type="text/javascript"> function checkheight() { currentscrollpos = window.scrolly; if (currentscrollpos < 325) document.getelementbyid('test1').innerhtml = "../wp-content/uploads/2017/04/logo-1.png"; else if (currentscrollpos > 325) document.getelementbyid('test1').innerhtml = "../wp-content/uploads/2017/04/logo-1-alt.png"; } </script> <p id="test1"></p>
all of worked flawlessly. inner html contents of <p id="test1"></p>
displayed correct image source , swapped said source when scrolled. perfect.
finally, went place image source actual source of <img>
, that's hit wall. tried use simple php variable.
<?php $src = <<<end <p id="test1"></p> end; ?>
and worked. echo
$src
, displayed image source correctly before. proceeded, , put following code.
<img src='<?php echo $src; ?>' />
but nothing. seems works extent except it's showing me broken image symbol when load page. why not finding image files? missing stupid?
the new, working code. sorry wasting of time , being complete moron.
<script type="text/javascript"> function checkheight() { currentscrollpos = window.scrolly; if (currentscrollpos < 325) document.getelementbyid('image').src = "../wp-content/uploads/2017/04/logo-1.png"; else if (currentscrollpos > 325) document.getelementbyid('image').src = "../wp-content/uploads/2017/04/logo-1-alt.png"; } </script> <body onload="checkheight();" onscroll="checkheight();"></body> <img id="image" width="200px" />
Comments
Post a Comment