如何在主题的同时改变形象？

Question

<div id="div1" class="index-speaker-img">

 <img id="image1" src="" onmouseout="hide(this,'keynote2')" onmouseover="show(this,'keynote2')" width="30%" class="fl"/>

<div id="keynote2" class="tip1" style="display:none;top:22%;left:2%;" onmouseout="hidePop(this,'keynote6')" onmouseover="showPop(this,'keynote6')">
<p style="line-height:15px;font-size:19px;font-family:'Neo_Sans_Bold';color:#ffffff;">Venkat</p>
            <p >Founder,Developer Inc.</p>  
            </div>
</div >

<div class="index-speaker-img">
<img id="image2" src="" onmouseout="hide(this,'keynote4')" onmouseover="show(this,'keynote4')" width="30%"   class="fl"/>

 <div id="keynote4" class="tip1" style="display:none;top:22%;left:33%;" onmouseout="hidePop(this,'keynote6')" onmouseover="showPop(this,'keynote6')">
            <p style="line-height:15px;font-size:19px;font-family:'Neo_Sans_Bold';color:#ffffff;"> Mann</p>
            <p >Editor-in Central</p>   
            </div>
      </div >

和

JS文件

var images = [
    "http://static.ddmcdn.com/gif/lightning-gallery-18.jpg",
    "http://static.ddmcdn.com/gif/lightning-gallery-19.jpg",
    "http://static.ddmcdn.com/gif/lightning-gallery-20.jpg",
    "http://static.ddmcdn.com/gif/lightning-gallery-17.jpg"];

function randImg() {
    var size = images.length
    var x = Math.floor(size * Math.random())
    document.getElementById('image1').src = images[x];
}

window.onload = randImg;

它改变了形象，但没有随着图像而改变它的基调。预先多谢.

额外.http://jsfiddle.net/gFft7/20/

Answer 1

我会考虑重新编写目标明确的代码，但是要获得带有图像的随机主题，您可以执行以下操作

HTML：

<img id="image" src="" width="30%" class="fl"/>
<div id="keynote"></div>

然后是javascript：

var images = [
    { 
        "imagesrc": "http://static.ddmcdn.com/gif/lightning-gallery-18.jpg", 
        "keynotecontent": '<p style="line-height:15px;font-size:19px;font-family:\'Neo_Sans_Bold\';color:#000066;">Something</p><p>Test 1.</p>' 
    },
    { 
        "imagesrc": "http://static.ddmcdn.com/gif/lightning-gallery-19.jpg", 
        "keynotecontent": '<p style="line-height:15px;font-size:19px;font-family:\'Neo_Sans_Bold\';color:#666666;">Something else 1</p><p>Test 2.</p>'  
    },
    { 
        "imagesrc": "http://static.ddmcdn.com/gif/lightning-gallery-20.jpg", 
        "keynotecontent": '<p style="line-height:15px;font-size:19px;font-family:\'Neo_Sans_Bold\';color:#006600;">Something else 2</p><p>Test 3.</p>'  
    }
];

function randImg() {
    var size = images.length
    var x = Math.floor(size * Math.random())
    document.getElementById('image').src = images[x].imagesrc;
    document.getElementById('keynote').innerHTML = images[x].keynotecontent;
}

window.onload = randImg;

下面是一个js篡改实现的http://jsfiddle.net/gFft7/25/代码