Home/ Questions/Q 4068956
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T16:26:23+00:00

In the following code, I want the first image to be displayed when the

  • 0

In the following code, I want the first image to be displayed when the page loads, however, it doesn’t show anything, and no error in Firebug.

How can I get this line to work:

$('img#main').attr('src', $('img:first').src);

Full Code:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load('jquery', '1.5');
            google.setOnLoadCallback(function() {

                $('img.thm').css({opacity: 0.7});
                $('img#main').attr('src', $('img:first').src); //doesn't work

                $('img.thm').width(80).click(function() {
                    $('img#main').attr('src', this.src);
                });
                $('img.thm').mouseover(function() {
                    $(this).css({opacity: 1.0});
                });
                $('img.thm').mouseout(function() {
                    $(this).css({opacity: 0.7});
                });
            });
        </script>
        <style type="text/css">
            img.thm {
                cursor: hand;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="menu">
            <img class="thm" src="images/test1.png"/>
            <img class="thm" src="images/test2.png"/>
            <img class="thm" src="images/test3.png"/>
        </div>
        <div id="content">
            <img id="main"/>
        </div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use .attr() when getting the image source from $('img:first') which is a jQuery object:

    $('img#main').attr('src', $('img:first').attr('src'));

    The .src property is for the DOM object representing the image. You could use it like this (see .get()):

    $('img#main').attr('src', $('img').get(0).src);

    But for consistency’s sake I would use .attr().

    • 0