In this javascript I am displaying an image and text taken from an array called 'stationInfo' is there a way to ensure that the image is displayed but the text is hidden and only displays on mouseover of the div called 'ghostinfo' - 'var Esri_WorldStreetMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
	attribution: 'Tiles &copy; Esri'
});
var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
	attribution: 'Tiles &copy; Esri'
});

var map = L.map('map', {
  center: [25, 0],
  zoom: 2,
  layers: [Esri_WorldStreetMap]
});

var baseMaps = {
  "Road Map": Esri_WorldStreetMap,
  "Satellite": Esri_WorldImagery
};

var layerControl = L.control.layers(baseMaps).addTo(map);

var strand = L.latLng(45.431019, 12.334823);
var down = L.latLng(48.8549502, 2.3468266);
var museum = L.latLng(41.8902102, 12.4922309);
var york = L.latLng(51.4994794, -0.1248092);
var brompton = L.latLng(51.0649702, -1.7971855);
var william = L.latLng(48.9402087, 2.2528139);
var mark = L.latLng(43.078697, -79.0763802);
var marys = L.latLng(40.8422517, -73.9304704);
var kent = L.latLng(51.506298, -0.120496);
var marl = L.latLng(50.9190331, 14.0572688);
var molle = L.latLng(41.935556, 12.466944);
var jatte = L.latLng(48.8948193, 2.2664345);
var fuji = L.latLng(35.3628299, 138.7307859);
var five = L.latLng(40.7143643, -74.0005577);
var granada = L.latLng(37.1768988, -3.5897378);
var bruton = L.latLng(37.2713798, -76.7025813);
var warwick = L.latLng(52.2794138, -1.5845975);
var huis = L.latLng(52.0930774, 4.3438645);
var washington = L.latLng(40.7307828, -73.9973284);
var molo = L.latLng(45.4334887, 12.3405578);
var porte = L.latLng(49.2439852, 1.2544189);
var matterhorn = L.latLng(45.976576, 7.6584719);
var center = L.latLng(39.9524397, -75.1637497);
var reine = L.latLng(43.5648263, 4.1942591);
var stage = L.latLng(42.6052657, -70.6781733);
var berlin = L.latLng(52.5170764, 13.4115749);
var rialto = L.latLng(45.4379897, 12.3359142);
var lady = L.latLng(51.2046739, 3.2244486);
var ely = L.latLng(52.3986137, 0.2638014);
var italiens = L.latLng(48.8713205, 2.3364162);
var etretat = L.latLng(49.7073109, 0.1935979);
var parth = L.latLng(37.9715219, 23.7266424);
var padua = L.latLng(45.4098414, 11.8927044);
var munich = L.latLng(48.1582611, 11.5033879);
var forum = L.latLng(40.7492886, 14.4847282);
var teatro = L.latLng(37.8523123, 15.292199);
var taj = L.latLng(27.1749757, 78.0421602);
var capitol = L.latLng(38.8898012, -77.0090292);
var marly = L.latLng(48.8804217, 2.1108704);
var egmond = L.latLng(52.6216328, 4.6545006);
var erupt = L.latLng(40.8213076, 14.4263522);
var hart = L.latLng(51.5589021, 13.0089165);
var tour = L.latLng(52.3720105, 4.905642);
var rouen = L.latLng(49.437191, 1.0913427);
var pirna = L.latLng(50.9615451, 13.9440107);
var sitka = L.latLng(57.0500595, -135.3350632);
var coto = L.latLng(-0.684064, -78.4367661);
var antwerp = L.latLng(51.2203574, 4.4015973);
var windsor = L.latLng(51.483987, -0.60431);
var rock = L.latLng(36.1441334, -5.3421144);
var florence = L.latLng(43.767922, 11.2531284);
var custom = L.latLng(55.9480583, -4.7509405);
var brooklyn = L.latLng(40.6730128, -73.9845876);
var alkmaar = L.latLng(52.632614, 4.743932);
var ghent = L.latLng(51.21264302630933, 3.2404485616302026);
var golden = L.latLng(55.94950293449235, -3.190887963219886);
var ruins = L.latLng(49.3469489361878, 2.9801644318251);
var ranger = L.latLng(40.70613429891641, -73.99669263862219);
var santa = L.latLng(43.76901934731335, 11.250309358895594);
var old = L.latLng(38.97806598531773, -76.48972283733242);
var founding = L.latLng(-33.859206443817655, 151.2115517335217);
var compton = L.latLng(50.472513544702124, -3.6002784478031242);
var eichhorn = L.latLng(49.25689, 16.462614);
var saint = L.latLng(43.92801546810641, 2.1447380095308684);
var notre = L.latLng(48.85302281283721, 2.349916971036055);
var manhattan = L.latLng(40.70717484316477, -73.99054307782178);
var karls = L.latLng(48.198283497151444, 16.37189996806785);
var persen = L.latLng(48.19003718618461, 15.075604058841773);
var wells = L.latLng(51.21035620175577, -2.64347990529991);
var bright = L.latLng(42.04637925090316, -74.11910363873254);
var oxford = L.latLng(51.75279324881308, -1.2536998938233277);
var prague = L.latLng(50.08653902704181, 14.411286392729664);
var bayisland = L.latLng(-35.26174362306738, 174.12125725381634);
var rathaus = L.latLng(47.918124059145576, 13.799400670121077);
var damplatz = L.latLng(52.373127508047965, 4.892463792419649);
var segovia = L.latLng(40.948025956381244, -4.117859686583211);
var vyborg = L.latLng(60.71570989449037, 28.72858365963885);
var cape = L.latLng(-33.925436093239625, 18.42390456546646);
var vilnius = L.latLng(54.678154606053894, 25.286912831678286);
var princes = L.latLng(55.95201455069297, -3.1963202185542468);
var trakai = L.latLng(54.652374680648784, 24.933651103827362);
var palace = L.latLng(52.21505051523167, 21.03580040216378);
var alma = L.latLng(48.86350018067251, 2.3017561919601035);
var spui = L.latLng(52.36827355674235, 4.888875532887837);
var caer = L.latLng(53.13933477642847, -4.276869915968849);
var bow = L.latLng(51.52878304978209, -0.016678761487461734);
var quila = L.latLng(28.608841973461026, 77.2422407564747);
var concorde = L.latLng(37.2896610051625, 13.59205892142171);
var chase = L.latLng(52.58979668480128, -8.870988391690116);
var slottet = L.latLng(50.352737788358674, 7.1798328365536825);
var chaff = L.latLng(49.97604207718476, 9.141663219805931);
var lilles = L.latLng(52.72720592344428, -2.3737330414142708);
var scharf = L.latLng(51.12521481341898, 13.527553439015197);
var marys = L.latLng(50.061604148424856, 19.939603944429326);
var spinner = L.latLng(48.17101144093542, 16.350696456061456);
var grote = L.latLng(52.48589679530798, 4.658556305286563);
var harf = L.latLng(49.50711206547648, 0.19991185150812835);
var oude = L.latLng(52.37438453232728, 4.898123738466199);
var christ = L.latLng(51.279307787801635, 1.0811634973173927);
var pope = L.latLng(51.442106701050115, -0.3313032507828993);
var bavo = L.latLng(51.05298992949669, 3.727187284689531);
var bogor = L.latLng(-6.598023458543918, 106.79732164413238);
var harm = L.latLng(52.0912830939025, 4.96456573829366);
var doge = L.latLng(45.434024629263035, 12.340314304893045);
var durham = L.latLng(54.773398131519045, -1.5762442807490802);
var august = L.latLng(51.055302583979135, 13.73955816351706);
var memlook = L.latLng(30.023514425961885, 31.25934967133141);
var oxford = L.latLng(51.75280785454802, -1.2510336604787498);
var lincoln = L.latLng(53.23428392889462, -0.5361550782144268);
var pantheon = L.latLng(41.89858514019062, 12.476838604931554);
var singel = L.latLng(52.37220071425841, 4.88848065222617);
var moret = L.latLng(48.372607507427574, 2.8190656931110123);
var briar = L.latLng(47.6405648765318, 2.7408497437601294);
var rotund = L.latLng(48.88346086629913, 2.3695714251083335);
var bocca = L.latLng(41.88873461210782, 12.480747969615766);
var port = L.latLng(40.8097656213272, 14.33455477753072);
var rat = L.latLng(47.918123436054714, 13.79941299512479);
var rue = L.latLng(48.86593251830277, 2.3278987624296614);
var cambridge = L.latLng(52.20514181176664, 0.11736769816618857);
var rainy = L.latLng(44.974793223471416, -93.2803792073738);
var haarlem = L.latLng(52.38143591618554, 4.635011559887189);
var brew = L.latLng(52.382282448242506, 4.6403116918953184);
var grapes = L.latLng(51.45021853757792, -0.8565816764646562);
var lviv = L.latLng(49.839268362799345, 24.034193266624985);
var plac = L.latLng(52.24889324994805, 21.007019103549943);
var myse = L.latLng(52.215511753494795, 21.03829430859862);
var amalfi = L.latLng(40.634329093808205, 14.602595196584474);
var llyon = L.latLng(45.75685716685581, 4.838035099192827);
var navona = L.latLng(41.89893660267209, 12.473066386221028);
var asch = L.latLng(49.97605645207857, 9.141627661863916);
var binn = L.latLng(52.07960016844697, 4.313337430369342);
var bello = L.latLng(52.23870761431316, 21.016797327746676);
var column = L.latLng(52.247247395461706, 21.01340040663948);
var prou = L.latLng(48.86243121097536, 2.344599039832925);
var admiral = L.latLng(-34.1898457213882, 18.426505741689887);
var geyser = L.latLng(44.463674562161295, -110.8364805492947);
var kastel = L.latLng(55.691550370464846, 12.594609947234545);
var akard = L.latLng(32.77909835936005, -96.79927957199654);
var roros = L.latLng(62.57729544765129, 11.387894825786224);
var monet = L.latLng(48.85952977780359, 2.341199888871341);
var delft = L.latLng(52.012606093238105, 4.35586516407528);

const station = document.getElementById("station");
const myDiv = document.getElementById("my-div");

const userMarkers = []; // Array to store user-added markers

const nextButton = document.createElement("button");
nextButton.innerText = "Next Painting";
nextButton.id = "buttonsdiv";
nextButton.disabled = true;
nextButton.className = "my-button";

const submitButton = document.createElement("subbutton");
submitButton.innerText = "Submit";
submitButton.id = "buttonsdiv";
submitButton.disabled = true;
submitButton.className = "my-button";

let totalDistance = 0; // Keep track of accumulated distance
let roundDistances = []; // Array to store distance for each round

// Custom user marker icon
const LeafIcon = L.Icon.extend({
 options: {
  iconSize: [30, 41],
  iconAnchor: [15, 40],
 },
});

const greenIcon = new LeafIcon({
 iconUrl:
  "https://cdn.glitch.global/f4cb3da3-e38f-4c57-8538-cd16160b85b3/_265a5cce-4ba0-4c1c-a76f-a7d5f00d8ea0-removebg-preview%20(1).png?v=1705859478915",
});

// Function to run the game with remaining reference points
function generateAndPlay(remainingPoints) {
 if (remainingPoints.length === 0) {
  // Fit the map to the user-added markers
  const bounds = new L.LatLngBounds();
  //fitmapbounds ro userMarker
  userMarkers.forEach(function (markerLatLng) {
   bounds.extend(markerLatLng);
  });
  map.fitBounds(bounds);
  //remove round 5 picture
  ghostinfo.innerHTML = "";

  // Add the "Play Again" button
  const playAgainButton = document.createElement("button");
  playAgainButton.id = "playAgain";
  playAgainButton.innerText = "Play Again";
  playAgainButton.className = "my-button";

  // Add click event listener to the button
  playAgainButton.addEventListener("click", function () {
   //cheating by reloading the browser. Instead this function should reset all variables and remove markers from map
   location.reload();
  });

  document.getElementById("playagain").appendChild(playAgainButton);

  // save personal best scores
  const personalBest = localStorage.getItem("personalBest");

  if (personalBest === null || totalDistance < parseFloat(personalBest)) {
   // If personalBest is not set or the current totalDistance is less than the stored personalBest
   localStorage.setItem("personalBest", totalDistance.toFixed(2));
  }

  //display game score
   
  loop(); // ready for some fireworks!
  station.innerHTML = `Well done!<br><br> You've found all the paintings! <br><br>
${roundDistances
 .map((distance, index) => `Round ${index + 1}: ${distance.toFixed(2)} miles`)
 .join("<br>")}<br>
<br>Total distance: ${totalDistance.toFixed(2)} miles.<br>
Personal Best: ${localStorage.getItem("personalBest")} miles.`;

  document
   .getElementById("station")
   .animate(
    [
     { transform: "rotate(-10deg)" },
     { transform: "rotate(10deg)" },
     { transform: "rotate(-10deg)" },
     { transform: "rotate(10deg)" },
     { transform: "rotate(-10deg)" },
     { transform: "rotate(10deg)" },
    ],
    {
     duration: 1000,
     iterations: 1,
    }
   );

  return;
 }

 const randomIndex = Math.floor(Math.random() * remainingPoints.length);
 const referencePoint = remainingPoints[randomIndex];

 const roundNumber = Math.ceil(5 - remainingPoints.length + 1); // Calculate round number

 station.innerHTML = `Round ${roundNumber}: Drop a marker on the location of ${locationNames[referencePoint]}.<br>`;
 ghostinfo.innerHTML = `${stationInfo[referencePoint]}<br>`;

 map.off("click"); // Remove previous click event listener

 // Function to create the midpoint variable
 function createMidpoint(markerLatLng, referencePointLatLng) {
  const markerLat = markerLatLng.lat;
  const markerLng = markerLatLng.lng;
  const referencePointLat = referencePointLatLng.lat;
  const referencePointLng = referencePointLatLng.lng;

  // Calculate the midpoint's latitude and longitude
  const midpointLat = (markerLat + referencePointLat) / 2;
  const midpointLng = (markerLng + referencePointLng) / 2;

  // Create the midpoint L.latLng object
  const midpoint = L.latLng(midpointLat, midpointLng);

  return midpoint;
 }

 var userMarker;

 map.on("click", function (e) {
  myDiv.innerHTML =
   "Click again to change location & click Submit when you are happy";

  // Add user marker to the array

  if (userMarker) {
   map.removeLayer(userMarker); // Remove the previous marker
  }

  userMarker = L.marker(e.latlng).addTo(map); // Add the new marker
  userMarkers.push(userMarker.getLatLng());

  //add submitbutton
  document.getElementById("buttonsdiv").appendChild(submitButton);

  submitButton.onclick = function () {
   const marker = L.marker(e.latlng).addTo(map);
   const distance = L.latLng(e.latlng).distanceTo(referencePoint);
   map.off("click");

   // Create a bounds object encompassing both markers
   const bounds = L.latLngBounds([e.latlng, referencePoint]);

   // Zoom the map to fit those bounds
   map.fitBounds(bounds);

   //remove submit button and add next painting button
   document.getElementById("buttonsdiv").appendChild(nextButton);
   document.getElementById("buttonsdiv").removeChild(submitButton);

   // Convert meters to miles:
   const distanceInMiles = distance * 0.000621371;

   myDiv.innerHTML = `You clicked ${distanceInMiles.toFixed(2)} miles from ${
    locationNames[referencePoint]
   }`;
    
   // Create the midpoint variable and display message
   const midpoint = createMidpoint(e.latlng, referencePoint);
   const popup = L.popup()
    .setLatLng(midpoint)
    .setContent(
     distanceInMiles < 0.5
      ? "Perfect"
      : distanceInMiles < 2
      ? "Very Good"
      : distanceInMiles < 10
      ? "At least you got the right city"
      : distanceInMiles < 100
      ? "Close - ish"
      : "Way off!" // Default message for distances 100 miles or more
    )
    .openOn(map);

   // Update total distance with clicked marker's distance
   totalDistance += distanceInMiles;
   roundDistances.push(distanceInMiles); // Add distance to the roundDistances array
   // connect user marker to correct location
   const polyline = L.polyline([e.latlng, referencePoint], {
    color: "black",
   }).addTo(map);

   // Put marker on correct location
   const stationMarker = L.marker(referencePoint, { icon: greenIcon }).addTo(
    map
   );

   // Remove the used reference point from the remaining pool
   remainingPoints.splice(randomIndex, 1);
  };
 });

 // Enable next button when a new game round starts
 nextButton.disabled = false;

 // Handle next button click
 nextButton.onclick = function () {
  //remove popup message
  map.closePopup();
  // Change button text to "Results" on the fifth question
  if (roundNumber === 4) {
   nextButton.innerText = "Results";
  }

  //remove next button and add submit painting button
  document.getElementById("buttonsdiv").removeChild(nextButton);
  map.setView([25, 0], 2);
  document
   .getElementById("station")
   .animate(
    [
     { transform: "translateX(-3px)" },
     { transform: "translateX(3px)" },
     { transform: "translateX(-3px)" },
     { transform: "translateX(3px)" },
     { transform: "translateX(-3px)" },
     { transform: "translateX(3px)" },
    ],
    {
     duration: 1000,
     iterations: 1,
    }
   );

  generateAndPlay(remainingPoints);
  myDiv.innerHTML = "Click on the map";
 };
}

// Use map to determine location name according to the chosen reference point
const locationNames = {
 [strand]: "View of the Grand Canal",
 [down]: "A View of Paris with the Ile de la Cité",
};

const stationInfo = {
 [strand]:
  '<img src="https://cdn.glitch.global/f4cb3da3-e38f-4c57-8538-cd16160b85b3/ef1f442c-24bf-40c8-a82b-e89b71c66ecf_3000.jpg?v=1704458402437" onclick="this.requestFullscreen()" class="center" alt="View of the Grand Canal" width="400"> View of the Grand Canal: Santa Maria della Salute and the Dogana from Campo Santa Maria Zobenigo (c1743) by Bernardo Bellotto. <br><br> From the <a href=\'https://www.getty.edu/art/collection/object/103RJP#full-artwork-details\'>Getty\'s Collection Online</a>.',
 [down]:
  '<img src="https://cdn.glitch.global/f4cb3da3-e38f-4c57-8538-cd16160b85b3/ef390b6c-6021-4738-92fe-2338c38cc2af_3000.jpg?v=1704459300215" onclick="this.requestFullscreen()" class="center" alt="A View of Paris with the Ile de la Cité" width="400"> A View of Paris with the Ile de la Cité (c1763) by Jean-Baptiste Raguenet. <br><br> From the <a href=\'https://www.getty.edu/art/collection/object/103RBA\'>Getty\'s Collection Online</a>.',
};



// Start the game with all reference points

function toPlay() {
 playbutton.remove();
 const shuffledEntries = [
  strand,
  down,
 ]
  //select 5 random pictures
  .slice()
  .sort(() => Math.random() - 0.5); // Shuffle using Fisher-Yates
 const randomEntries = shuffledEntries.slice(0, 5);

 generateAndPlay(randomEntries);
 myDiv.innerHTML = "Click on the map";
}

function addMarkers(map) {
 var markers = [
  strand,
  manhattan,
   
 ];

 for (var i = 0; i < markers.length; i++) {
  var marker = L.marker(markers[i], {
   icon: greenIcon,
   referencePoint: markers[i]
  });

  marker.addTo(map).on('click', function() {
   var markerKey = this.options.referencePoint;
   var correctContent = stationInfo[markerKey];
   document.getElementById('ghostinfo').innerHTML = correctContent + '<br>';
  });
 }
}

var mapSequence = [];

document.addEventListener("keydown", function (event) {
 mapSequence.push(event.key);

 if (mapSequence.length === 3 && mapSequence.join("") === "map") {
  event.preventDefault();
  mapSequence = [];
  addMarkers(map);
 } else if (mapSequence.length > 3) {
  mapSequence = [];
 }
});
'