Changement d'une image en survolant le texte/Sans utiliser jQuery

Question

Je crée une page de portfolio en tant que projet d'école. Mon idée est d'avoir une image avec des titres en dessous et chaque fois que je survole un titre (disons qu'il y aura un titre pour Design Manual, Animation, Storyboard etc.), l'image changera pour correspondre au titre sur lequel on peut cliquer et conduira à une sous-page avec plus d'informations sur le thème choisi. Je ne peux pas utiliser jQuery mais seulement javascript. J'ai écrit ce morceau de code qui fonctionne mais c'est trop long et j'aimerais savoir s'il y a une possibilité plus courte. Je pensais à un tableau avec fonction de commutation? Cependant, je suis très nouveau pour javascript, donc je ne pouvais pas le mettre en place quand j'ai essayé. Toute aide est appréciée.

let thumbnail = document.querySelector("#thumbN"); 

let buttonOne = document.querySelector("#ButtonOne"); 
let buttonTwo = document.querySelector("#ButtonTwo"); 
let buttonThree = document.querySelector("#ButtonThree"); 
let buttonFour = document.querySelector("#ButtonFour"); 
let buttonFive = document.querySelector("#ButtonFive"); 
let buttonSix = document.querySelector("#ButtonSix"); 
let buttonSeven = document.querySelector("#ButtonSeven"); 
let buttonEight = document.querySelector("#ButtonEight"); 
let buttonNine = document.querySelector("#ButtonNine"); 
let buttonTen = document.querySelector("#ButtonTen"); 

buttonOne.addEventListener("mouseover", doBackgroundOne); 
buttonOne.addEventListener("mouseout", removeBackOne); 

buttonTwo.addEventListener("mouseover", doBackgroundTwo); 
buttonTwo.addEventListener("mouseout", removeBackTwo); 

buttonThree.addEventListener("mouseover", doBackgroundThree); 
buttonThree.addEventListener("mouseout", removeBackThree); 

buttonFour.addEventListener("mouseover", doBackgroundFour); 
buttonFour.addEventListener("mouseout", removeBackFour); 

buttonFive.addEventListener("mouseover", doBackgroundFive); 
buttonFive.addEventListener("mouseout", removeBackFive); 

buttonSix.addEventListener("mouseover", doBackgroundSix); 
buttonSix.addEventListener("mouseout", removeBackSix); 

buttonSeven.addEventListener("mouseover", doBackgroundSeven); 
buttonSeven.addEventListener("mouseout", removeBackSeven); 

buttonEight.addEventListener("mouseover", doBackgroundEight); 
buttonEight.addEventListener("mouseout", removeBackEight); 

buttonNine.addEventListener("mouseover", doBackgroundNine); 
buttonNine.addEventListener("mouseout", removeBackNine); 

buttonTen.addEventListener("mouseover", doBackgroundTen); 
buttonTen.addEventListener("mouseout", removeBackTen); 

function doBackgroundOne() { 
    thumbnail.classList.add('BackOne'); 
    console.log("fatality");  
} 

function removeBackOne() { 
    thumbnail.classList.remove('BackOne'); 
} 


function doBackgroundTwo() { 
    thumbnail.classList.add('BackTwo'); 
    console.log("fatality");  
} 

function removeBackTwo() { 
    thumbnail.classList.remove('BackTwo'); 
} 


function doBackgroundThree() { 
    thumbnail.classList.add('BackThree'); 
    console.log("fatality");  
} 

function removeBackThree() { 
    thumbnail.classList.remove('BackThree'); 
} 


function doBackgroundFour() { 
    thumbnail.classList.add('BackFour'); 
    console.log("fatality");  
} 

function removeBackFour() { 
    thumbnail.classList.remove('BackFour'); 
} 


function doBackgroundFive() { 
    thumbnail.classList.add('BackFive'); 
    console.log("fatality");  
} 

function removeBackFive() { 
    thumbnail.classList.remove('BackFive'); 
} 


function doBackgroundSix() { 
    thumbnail.classList.add('BackSix'); 
    console.log("fatality");  
} 

function removeBackSix() { 
    thumbnail.classList.remove('BackSix'); 
} 


function doBackgroundSeven() { 
    thumbnail.classList.add('BackSeven'); 
    console.log("fatality");  
} 

function removeBackSeven() { 
    thumbnail.classList.remove('BackSeven'); 
} 


function doBackgroundEight() { 
    thumbnail.classList.add('BackEight'); 
    console.log("fatality");  
} 

function removeBackEight() { 
    thumbnail.classList.remove('BackEight'); 
} 


function doBackgroundNine() { 
    thumbnail.classList.add('BackNine'); 
    console.log("fatality");  
} 

function removeBackNine() { 
    thumbnail.classList.remove('BackNine'); 
} 

function doBackgroundTen() { 
    thumbnail.classList.add('BackTen'); 
    console.log("fatality");  
} 

    function removeBackTen() { 
    thumbnail.classList.remove('BackTen'); 
} 

HTML

<div class="thumbnail" id="thumbN"></div> 

    <section class="palete"> 

     <a href="http://www.takodesign.one/mobile/index.html" id="ButtonOne" class="firewatch">First Site</a> 


     <a href="http://takodesign.one/index2.html" id="ButtonTwo" class="mountains">Redesign</a> 


     <a href="https://drive.google.com/open?id=0B1nl9VJkUj7cN01YNmtsdDVVT2c" id="ButtonThree" class="storyboard">Storyboard</a> 


     <a href="http://www.takodesign.one/animation/index.html" id="ButtonFour" class="animation">Animation</a> 


     <a href="http://www.takodesign.one/animation_interactive/animation.html" id="ButtonFive" class="interactive">Interactive</a> 


     <a href="http://www.takodesign.one/project/index.html" id="ButtonSix" class="redesign">Group project</a> 


     <a href="documents/abeona_report.pdf" id="ButtonSeven" class="abeona">Abeona</a> 


     <a href="documents/design_manual.pdf" id="ButtonEight" class="visual">Visual identity</a> 


     <a href="https://www.youtube.com/watch?v=zy-ZeRD4Img" id="ButtonNine" class="reportage">Reportage</a> 


     <a href="https://vimeo.com/219885010" id="ButtonTen" class="filming">Stronger together</a> 

    </section> 

Answer 1

Et vous boucle à travers tous les boutons de votre page et ajouter des écouteurs d'événements:

étapes

• Obtenir tous les boutons votre page
• boucle par boutons collection
• Lors de la conception de votre HTML vous pouvez appliquer classe spécifique css comme un identifiant sur les boutons que vous souhaitez ajouter un événement écouter, utilisez ce contrôle au sein de la boucle.
• Define seulement un mouseover et mouseout fonctions pour ajouter et supprimer des classes, les attacher comme écouteur d'événement et de transmettre le nom de classe via le paramètre (vous pouvez définir ces classes dans un certain modèle c.-à-buttonid + classe)

échantillon code ci-dessous

var allButtonsOnYourPage = document.getElementsByTagName('button'); 
for (var i = 0; i < allButtonsOnYourPage.length; i++) { 
    var button = allButtonsOnYourPage[i]; 
    //check button's class 
var appliedCssClass = button .className 
    if(appliedCssClass == 'yourCustomClass'){ 
    button.addEventListener("mouseover", applyBackground, false); 
    addEventListener('mouseover', applyBackground.bind(null, event, 'pass class to be applied')); 
    addEventListener('mouseout', applyBackground.bind(null, event, 'pass class to be removed')); 

} 

} 

function applyBackground(applyThisclass) { 
    document.querySelector("#thumbN").classList.add(applyThisclass); 

} 

function removeBackground(removeThisclass) { 
    document.querySelector("#thumbN").classList.remove(removeThisclass); 
}