Dynamically pass random javascript array value to html img src

Question

I'd like to dynamically pass an array value (in this case, String "../name1.jpg" or "../name2.jpg") to the img src <img src="here">. Each time you hover over "Class of 2013", a random image will fade in, then fade out.

Is that possible to pass in a value by calling it as such? <img src="getImages(); ?

How would you do it?

var ImgArray = new Array();
ImgArray[0] = "../name1.jpg";
ImgArray[1] = "../name2.jpg";

$(document).ready(function() {
    show();
});

function show(){
    $(".box").hover(
        function(){ $(this).find(".overlay").fadeIn(); } ,
        function(){ $(this).find(".overlay").fadeOut(); }
    );        
}

function getImages() {
    int i = Math.random() * (max - min) + min;          
    return ImgArray[i];
}

HTML:

<div class="box">
    Class of 2013:
    <div class="overlay"> <!-- Put images to display here...--> 
        <img src="getImages();" alt="image to be displayed" />
    </div>
</div>

Thank you

EDIT: Current Code:

<html>
<head>
    <script src="jquery.js"></script>

    <script type="text/javascript">     
        var ITLP = new Array();
        ITLP[0] = "/corp/itlp/ITLP%20Bios/DanTurcotte.jpg";
        ITLP[1] = "/corp/itlp/ITLP%20Bios/gomezwilmann.jpg";


        $(document).ready(function() {
            showimg();
        });


        function showimg()
            {
                $(".box > .overlay > img").attr("src",getImages());
                $(".box").hover(
                    function(){ $(this).find(".overlay").fadeIn(); } ,
                    function(){ $(this).find(".overlay").fadeOut(); }
                );        
            }

        function getImages() {
            int i = Math.abs(Math.random());            
            return ITLP[0];             
        }

    </script>


</head> 
<body>

    <div class="box">
        Class of 2013:
        <div class="overlay"> <!-- Put images to display here...-->                 
            <img src="" border="none"/>     
        </div>  
    </div>

</body>
</html>

Scott Mermelstein · Answer 1 · 2013-07-23T15:46:59.233

You want to change the source of the image in your first hover function (the one with fadeIn).

Since you're already using jQuery, just do this:

    function(){ $(this img).attr("src", getImages()); $(this).find(".overlay").fadeIn(); } ,

and set your img's src initially to "". Of course, you could simplify your jQuery if you added an id to the img tag.

EDIT I set up a fiddle with a working example here.

This is the script code:

   var ITLP = [];
   ITLP[0] = "http://lorempixel.com/400/200/nature";
   ITLP[1] = "http://lorempixel.com/400/200/city";

   function getImages() {
       var i = Math.floor(Math.random() * (ITLP.length + 1)); // from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FGlobal_Objects%2FMath%2Frandom
       console.log(ITLP[0]);
       return ITLP[0];
   }

   function showimg() {
       $(".box").hover(

       function () {
           console.log("Hover start");
           $(".box > .overlay > img").attr("src", getImages());
           $(this).find(".overlay").fadeIn();
       },

       function () {
           console.log("Hover end");
           $(this).find(".overlay").fadeOut();
       });
   }


   showimg();

Major things I did:

Ordered the functions to be declared before they're used.
Got rid of the int i declaration that was killing getImages()

To get it this far, I used the console log a lot, and also jsfiddle's JSHint is a big help.

Thanks Scott. Would I put the `function() { ...` directly inside the `$(document).ready(...`? I've set the img src initially to "", but it doesn't even seem to be showing the image, or working at all — user3871, Jul 23 '13 at 15:06
Hi, Growler. The line I gave you would replace the second line you have in your hover function. Setting this binding during `document(ready)` as you have should be a good thing. As reporter mentioned, you do have some bugs in the getImages() function. That may be part of the issue you're having. Check the console and see if it tells you anything. — Scott Mermelstein, Jul 23 '13 at 15:33
@Growler Please check my edits, they should help you considerably. — Scott Mermelstein, Jul 23 '13 at 15:47

Reporter · Accepted Answer · 2013-07-23T15:07:17.190

1

I prefer the classic way:

    $(".box > .overlay > img").attr("src",getImages());

Extension:

function show()
{
    $(".box > .overlay > img").attr("src",getImages());
    $(".box").hover(
        function(){ $(this).find(".overlay").fadeIn(); } ,
        function(){ $(this).find(".overlay").fadeOut(); }
    );        
}

I think your requested way doesn't work, because the browser expect a string for the source attribute.

P.S.: Take an eye on your random function. My Firefox did complain something "(missing ';' before statement")

edited Jul 23 '13 at 15:07

answered Jul 23 '13 at 14:57

Reporter

3,897
5
33
47

Thanks, reporter. Not sure how to use this though – user3871 Jul 23 '13 at 15:04
See the comment to http://stackoverflow.com/questions/8211744/convert-milliseconds-or-seconds-into-human-readable-form/8211872#8211872 . It is a mathematical function. I could never find out the main meaning. – Reporter Jul 23 '13 at 15:44
Reporter, that link doesn't provide a meaning. And, also, what is the notation `.box > .overlay > img` in `$(".box > .overlay > img").attr("src",getImages());` ? – user3871 Jul 23 '13 at 15:47
1

The definition within the $() uses the normal css selector. So: find elements with class 'box'. Within that elements find elements with css class 'overlay' and within these, find elements with the html tag 'img' – Reporter Jul 23 '13 at 15:51
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/33994/discussion-between-growler-and-reporter) – user3871 Jul 23 '13 at 15:59
reporter, is there a way to display all images in the array at once upon hover over? – user3871 Jul 23 '13 at 15:59
I asked something in the chat – Reporter Jul 23 '13 at 21:42

score 1 · Answer 3 · answered Jul 23 '13 at 15:39

1

You may try this

var ImgArray = new Array();
// add images

$(document).ready(show);

// Show function
function show(){
    $('img').attr('src', ImgArray[0]).parent().hide();
    var max = ImgArray.length;
    $(".box").hover(
        function(){ $(this).find(".overlay").fadeIn(); },
        function(){ 
            var img = $(this).find(".overlay").find('img');
            var i = Math.floor(Math.random()*max);
            $(this).find(".overlay").fadeOut(function(){
                img.attr('src', ImgArray[i]);
            }); 
        }
    );        
}

DEMO.

answered Jul 23 '13 at 15:39

The Alpha

143,660
29
287
307

is there a way to display all images in the array at once upon hover over? – user3871 Jul 23 '13 at 16:00
At once, how ? One `img` can show on one image at a time, can you describe it ? – The Alpha Jul 23 '13 at 19:34

Dynamically pass random javascript array value to html img src

3 Answers3