I'm trying to get a random number: 1, 2, 3, or 4 but how can I have it never return the same number twice in a row.
function largeplate() {
$('.hero.largeplate').css({"background-image":"url(<?php echo get_bloginfo('template_directory');?>/images/hero/largeplate-" + mt_rand(1, 4) + ".png)"});
};
function mediumplate() {
$('.hero.mediumplate').css({"background-image":"url(<?php echo get_bloginfo('template_directory');?>/images/hero/mediumplate-" + mt_rand(1, 4) + ".png)"});
};
<svg version="1.1" baseProfile="basic" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1400 748" xml:space="preserve">
<path id="largeplate" onmouseover="largeplate();" style="opacity:0;fill:#FFFFFF;" d="M66.785,745.854c-4.209-21.595-8.774-52.639-9.001-90.009 c-1.378-226.627,158.584-388.207,202.253-429.179c46.677-43.793,191.583-166.611,414-176c46.574-1.966,241.48-5.076,420,134.667 c166.267,130.151,234.259,318.415,244,466c2.623,39.737,0.779,72.842-1.333,95.333L66.785,745.854z"/>
<path id="mediumplate" onmouseover="mediumplate();" style="opacity:0;fill:#FFFFFF;" d="M124.704,746.667c-1.252-7.876-2.831-19.121-4-32.667 c-13.967-161.797,61.447-292.434,96.667-344.667C290.895,260.294,384.142,203.909,430.038,180 c53.978-28.119,168.826-77.147,317.333-64c219.724,19.452,351.781,160.728,374.667,186c148.734,164.246,148.901,356.341,148,397.333 c-0.889,15.778-1.778,31.556-2.667,47.333H124.704z"/>
</svg>
I've created this transparent SVG which overlays an image, each time you hover of a section, the function is called and triggers the image to change but if it returns the same number twice, it looks as though it's not working.
I ended up with this function which will generate a random whole number within the limitations of a passed maximum and will never generate the same number twice consecutively.
c=[];
function makeUniqueRandom(d){
if(!c.length){
for(var e=1;e<d;e++){
c.push(e)
}
}
c.splice(Math.floor(Math.random()*c.length),b=c[e],1);
return b
};
function randomizeBackground() {
$('.elementA').css({ "background-image":"url('/images/image-" + makeUniqueRandom(4) + ".png)" });
}
<div class="elementA" onmouseover="randomizeBackground();"></div>