Question

I’ve got this code:

while ($row = mysql_fetch_assoc($result1)) {
echo "
<a href='#'id='VV".$row['id']."'>
<p>".$row['title']."</p>
<p>".$row['date']."</p>
<img onload='scale()' id='II".$row['id']."' src='../res/videos/img/".$row['img']."'/>
</a>
<script type='text/javascript'>
function scale(){
    var image = document.getElementById('II".$row['id']."');
    var width = image.width;
    var height = image.height;
    if (width > 150) {
    image.style.width = '150px';
    image.style.height = 'auto';
    }
    width = image.width;
    height = image.height;
    if (height > 80) {
    image.style.height = '80px';
    image.style.width = 'auto';
    }
    width = image.width;
    height = image.height;
}
VV".$row['id'].".onclick = function() {
var Result = '".$row['id']."';
location.href='loged.php?Result=' + Result;
     }
</script>
";
}?>

I want the resize function be called on every image loaded, but it is called when the last image is loaded, and only the last image takes effect. What should i change?

Answer 1

I think you are trying to fit an image in a 150×80 area. If that’s the case, I suggest you use CSS background-size: contain to do the scaling for you.

while ($row = mysql_fetch_assoc($result1))
    echo "<a href='#' id='VV" . $row['id'] . "'>" .
           "<p>" . $row['title'] . "</p>" .
           "<p>" . $row['date'] . "</p>" .
           "<div id='II" . $row[id] . "' " .
                "style='width: 150px; " .
                       "height: 80px; " .
                       "background: url(../res/videos/img/" . $row['img'] . "); " .
                       "background-size: contain; " .
                       "background-repeat: no-repeat;'>" .
           "</div>" .
         "</a>";

It’d be a good idea to abstract out the styling into a CSS file.

while ($row = mysql_fetch_assoc($result1))
    echo "<a href='#' id='VV" . $row['id'] . "'>" .
           "<p>" . $row['title'] . "</p>" .
           "<p>" . $row['date'] . "</p>" .
           "<div id='II" . $row[id] . "' " .
                "class='my_img_box' " .
                "style='background: url(../res/videos/img/" . $row['img'] . ");'>" .
           "</div>" .
         "</a>";

The CSS

div.my_img_box {
    width: 150px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
}