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>

Reporter · Accepted Answer · 2013-07-23 15:07:17Z

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, 2013 at 15:07

answered Jul 23, 2013 at 14:57

Reporter

3,9345 gold badges36 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user3871 Over a year ago

Thanks, reporter. Not sure how to use this though

Reporter Over a year ago

See the comment to stackoverflow.com/questions/8211744/… . It is a mathematical function. I could never find out the main meaning.

user3871 Over a year ago

Reporter, that link doesn't provide a meaning. And, also, what is the notation .box > .overlay > img in $(".box > .overlay > img").attr("src",getImages()); ?

Reporter Over a year ago

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'

user3871 Over a year ago

let us continue this discussion in chat

|

The Alpha · Accepted Answer · 2013-07-23 15:39:50Z

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, 2013 at 15:39

The Alpha

147k30 gold badges294 silver badges313 bronze badges

2 Comments

user3871 Over a year ago

is there a way to display all images in the array at once upon hover over?

The Alpha Over a year ago

At once, how ? One img can show on one image at a time, can you describe it ?

Scott Mermelstein · Accepted Answer · 2013-07-23 15:46:59Z

1

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.

edited Jul 23, 2013 at 15:46

answered Jul 23, 2013 at 14:57

Scott Mermelstein

15.4k4 gold badges51 silver badges77 bronze badges

3 Comments

user3871 Over a year ago

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

Scott Mermelstein Over a year ago

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 Over a year ago

@Growler Please check my edits, they should help you considerably.

Collectives™ on Stack Overflow

Dynamically pass random javascript array value to html img src

3 Answers 3

7 Comments

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related