Javascript link in image

Question

我有3张图片但不在线，我需要将这三张图片链接到不同的页面上！ 每幅图像各个环节

var images = [ 
 
    'image/dragao1.jpg', 
 
    'image/dragao2.jpg', 
 
    'image/dragao3.jpg' 
 
]; 
 

 
function slideShowForward() { 
 
    images.push(images.shift()); 
 
    document.getElementById('imagesP').style.backgroundImage = 'url(' + images[0] + ')'; 
 
} 
 

 
function slideShowBack() { 
 
    images.unshift(images.pop()); 
 
    document.getElementById('imagesP').style.backgroundImage = 'url(' + images[0] + ')'; 
 
}

<div id="imagesP" style=" border: 1px solid black; height: 200px; width:750px;"> 
 
    <div id="form"> 
 
    <input type="button" value="previous" onclick="slideShowBack();" style="width: 39px; height: 34px;" /> 
 
    <input type="button" value="next" onclick="slideShowForward();" style="width: 39px; height: 34px;" /> 
 
    </div> 
 
</div>

Answer 1

var images = [ 
 
    'http://cinemacomrapadura.com.br/imagens/2014/01/20140127-como-treinar-seu-dragao1.jpg', 
 
    'http://cinemacomrapadura.com.br/imagens/2014/01/20140127-como-treinar-seu-dragao2.jpg', 
 
    'http://br.web.img2.acsta.net/c_520_690/newsv7/15/02/06/17/22/496087.jpg' 
 
]; 
 
var hrefs=["http://www.google.com","http://www.msdn.com","http://www.yahoo.com"] 
 

 
function slideShowForward() { 
 
    images.push(images.shift()); 
 
    hrefs.push(hrefs.shift()); 
 
    document.getElementById('imagesP').style.backgroundImage = 'url(' + images[0] + ')'; 
 
    document.getElementById('imagesP').setAttribute(href,hrefs[0]); 
 
} 
 

 
function slideShowBack() { 
 
    images.unshift(images.pop()); 
 
    hrefs.unshift(hrefs.pop()); 
 
    document.getElementById('imagesP').style.backgroundImage = 'url(' + images[0] + ')'; 
 
    document.getElementById('imagesP').setAttribute(href,hrefs[0]); 
 
} 
 
window.onload=function() { 
 
    document.getElementById('imagesP').onclick=function(e) { 
 
    var tgt = e.target||e.srcElement; 
 
    if (tgt.tagName.toLowerCase()=="input") e.preventDefault(); 
 
    else location=this.getAttribute("href"); 
 
    } 
 
}

#imagesP { border: 1px solid black; height: 200px; width:750px; background-image: url(http://br.web.img2.acsta.net/c_520_690/newsv7/15/02/06/17/22/496087.jpg)}

<div id="imagesP" href="http://www.google.com"> 
 
    <div id="form"> 
 
    <input type="button" value="previous" onclick="slideShowBack();" style="width: 39px; height: 34px;" /> 
 
    <input type="button" value="next" onclick="slideShowForward();" style="width: 39px; height: 34px;" /> 
 
    </div> 
 
</div>