JavaScriptイメージのロールオーバー - キャプションが必要です。どうすれば追加できますか？

JavaScriptを使って休暇のスライドショーを作成しています。メイン画像は、あなたが上に乗っているリンクによって変わります。私はまだjavascriptには新しく、最後の2時間を使って画像の下にキャプションを表示する方法を理解しようとしましたが、私は本当に助けが大好きです。JavaScriptイメージのロールオーバー - キャプションが必要です。どうすれば追加できますか？

これは私のjsファイルです：

var canadaOver = new Image(); 
canadaOver.src = 'images/canada.jpg'; 
var italyOver = new Image(); 
italyOver.src = 'images/italy.jpg'; 
var ukraineOver = new Image(); 
ukraineOver.src = 'images/ukraine.jpg'; 
var japanOver = new Image(); 
japanOver.src = 'images/japan.jpg'; 
var icelandOver = new Image(); 
icelandOver.src = 'images/iceland.jpg'; 
document.getElementById("canada").onmouseover = doMouseOver; 
document.getElementById("italy").onmouseover = doMouseOver; 
document.getElementById("ukraine").onmouseover = doMouseOver; 
document.getElementById("japan").onmouseover = doMouseOver; 
document.getElementById("iceland").onmouseover = doMouseOver; 


function doMouseOver(evt) { 
var anchor = evt.target || evt.srcElement; 
var img = document.getElementById("destinations"); 
var textDiv = document.getElementById('caption'); 
if (anchor.id == "canada") { 
     img.src = canadaOver.src; 
    } 
    else if (anchor.id == "italy") 
    { 
     img.src = italyOver.src; 
     textDiv.innerHTML = imgText; 
    } 
    else if (anchor.id == "ukraine") { 
     img.src = ukraineOver.src; 
     textDiv.innerHTML = imgText; 
     } 
    else if (anchor.id == "japan") { 
     img.src = japanOver.src; 
     textDiv.innerHTML = imgText; 
     } 
    else if (anchor.id == "iceland") { 
     img.src = icelandOver.src; 
     textDiv.innerHTML = imgText; 
     } 
     }

私のリンクはメイン画像の隣のテーブルです。私はキャプションがどこに行くのか分かりません！

出典

2017-10-24 Becki Anne Stone

あなたのHTMLマークアップも投稿してください –

私は、これはあなたが

https://jsfiddle.net/84cfy1Lf/

HTML

<body> 
    <section id="country-stuff"> 

    </section> 
</body>

SCRIPT

var countries = ['canada', 'italy', 'ukraine', 'japan', 'iceland']; 

countries.forEach(function(country) { 
    var img = document.createElement('img'); 
    img.id = country; 
    img.className = 'image'; 
    img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/CallingCodesWorld-Labeled.svg/500px-CallingCodesWorld-Labeled.svg.png' // swap for real image director: images/' + country +'.jpg'; 

    var mouser = document.getElementById('country-stuff').appendChild(img); 

    mouser.addEventListener('mouseover', function(event) { 
    doMouseOver(event); 
    }) 
}); 

var caption = document.createElement('div'); 
caption.id = 'caption'; 
document.getElementById('country-stuff').appendChild(caption); 


function doMouseOver(event) { 
    var anchor = event.target; 
    populateCountryText(anchor) 
} 


function populateCountryText(anchor) { 
    document.getElementById('caption').innerHTML = event.target.id; 

    return caption; 
}

CSS

探しているものだと思います0

出典

2017-10-24 22:43:56

JavaScriptイメージのロールオーバー - キャプションが必要です。どうすれば追加できますか？

答えて

関連する問題