Назначить конкретный цвет bg изображению в массиве (только для Javascript)

Question

Я использую скрипт для генерации случайного изображения заголовка, но я хотел бы иметь возможность назначать определенный цвет фона за каждым заголовком, когда он загружает , Мне интересно, можно ли достичь этого, используя только Javascript (к сожалению, невозможно использовать какой-либо другой язык).

Это сценарий случайного изображения, который я использую. Для каждого из 6 изображений я хотел бы назначить определенный backgroundColor. Я пробовал несколько вещей, но ничего не работает. Любые предложения ?:

<script language="JavaScript"> 

function random_imglink(){ 
var myimages=new Array() 

myimages[1]="image1.gif" 
myimages[2]="image2.gif" 
myimages[3]="image3.gif" 
myimages[4]="image4.gif" 
myimages[5]="image5.gif" 
myimages[6]="image6.gif" 

var ry=Math.floor(Math.random()*myimages.length) 
if (ry==0) 
ry=1 
document.write('<img src="'+myimages[ry]+'" class="header">') 
} 
random_imglink() 

</script> 

Answer 1

Что-то вроде этого? Я думаю, что вам понадобится контейнер-контейнер, чтобы обернуть изображение для цвета фона. (Я предполагаю, что эти прозрачные GIFs ...)

Вот скрипка: http://jsfiddle.net/f4drr6kL/3/

var myimages = new Array(); 

function random_imglink(){ 
    myimages[0]= { 
     img : "http://info.eps.surrey.ac.uk/logos/transbugs.gif", 
     color : "red" 
    }; 
    myimages[1]= { 
     img : "http://info.eps.surrey.ac.uk/logos/transbugs.gif", 
     color : "blue" 
    }; 
    myimages[2]= { 
     img : "http://info.eps.surrey.ac.uk/logos/transbugs.gif", 
     color : "green" 
    }; 
    myimages[3]= { 
      img : "http://info.eps.surrey.ac.uk/logos/transbugs.gif", 
      color : "yellow" 
    }; 
    myimages[4]= { 
     img : "http://info.eps.surrey.ac.uk/logos/transbugs.gif", 
     color : "orange" 
    }; 
    myimages[5]= { 
     img : "http://info.eps.surrey.ac.uk/logos/transbugs.gif", 
     color : "cyan" 
    }; 

    var ry = Math.floor(Math.random()*myimages.length); 
    document.getElementById("a_div").innerHTML = '<img src="' + myimages[ry].img + '" class="header" style="background-color:' + myimages[ry].color + ';">'; 
} 
random_imglink();