Interactive Infographic

Edit the times table at the top of the code.
Select and copy the text (ctrl+a,ctrl+c) and paste in a Google Sites embed section.

<html>

<head>

/////Set the title for your infographic////

const mainTitle = "The Water Cycle"

////

////Set the image by pasting in its URL////

imageURL="https://live.staticflickr.com/3670/13579584133_014988b0fc_b.jpg"

////

/////Set visibility, position, title & text for Circle 1/////

///// Note - the underlying mage is set top be 600px wide ///

var circle1Visible="yes"

const circle1Left = "500px"

const circle1Top = "240px"

const title1 = "1.  Evaporation"

const text1 = "Energy from sunlight converts water in the sea to water vapor which then rises in the air."

////

/////Set visibility, position, title & text for Circle 2/////

var circle2Visible="yes"

const circle2Left = "300px"

const circle2Top = "50px"

const title2 = "2.  Condensation"

const text2 = "As the water vapor cools in higher air, it condenses to form clouds of small drops of water."

////

/////Set visibility, position, title & text for Circle 3/////

var circle3Visible="yes"

const circle3Left = "80px"

const circle3Top = "50px"

const title3 = "3.  Precipitation"

const text3 = "As the drops of water combine at get larger, they can fall to the ground as rain, snow or hail."

////

/////Set visibility, position, title & text for Circle 4/////

var circle4Visible="yes"

const circle4Left = "100px"

const circle4Top = "280px"

const title4 = "4.  Run Off"

const text4 = "Water from ran joins rivers and makes it way back to the sea."

////

/////Set visibility, position, title & text for Circle 5/////

var circle5Visible="no"

const circle5Left = "100px"

const circle5Top = "100px"

const title5 = "5. title here"

const text5 = "5. text here"

////

/////Set visibility, position, title & text for Circle 6/////

var circle6Visible="no"

const circle6Left = "100px"

const circle6Top = "100px"

const title6 = "6. title here"

const text6 = "6.  text here"

////

</script>

<style>

body{font-family:helvetica;}

#mainTitleBox{

text-align:center;

width:604px;

font-size:36px;

padding:0;

background-color:rgb(230,230,230);

}

.infoBox{

width:50px;

height:50px;

border-radius:50%;

color:purple;

line-height: 48px;

border:solid purple 2px;

text-align:center;

font-size:48px;

postion:absolute;

padding-top:0px;

font-family:monospace;

}

.infoBox:hover{background-color:purple;color:white;}

img{width:600px;}

#currentTitle{font-size:24px;margin-left:8px;}

#currentText{font-size:14px;margin-left:8px;}

</style>

</head>

</div>

<h2 id="currentTitle">Hover over the numbers for information.</h2>

</div>

const outputTitle = document.getElementById("currentTitle")

const outputText =  document.getElementById("currentText")

function positionCircles(){

document.getElementById('box1').style.position = "absolute";

document.getElementById('box1').style.top = circle1Top;

document.getElementById('box1').style.left = circle1Left;

if(circle1Visible=="yes"){document.getElementById('box1').style.visibility = "visible"}

else{document.getElementById('box1').style.visibility = "hidden"}

document.getElementById('box2').style.position = "absolute";

document.getElementById('box2').style.top = circle2Top;

document.getElementById('box2').style.left = circle2Left;

if(circle2Visible=="yes"){document.getElementById('box2').style.visibility = "visible"}

else{document.getElementById('box2').style.visibility = "hidden"}

document.getElementById('box3').style.position = "absolute";

document.getElementById('box3').style.top = circle3Top;

document.getElementById('box3').style.left = circle3Left;

if(circle3Visible=="yes"){document.getElementById('box3').style.visibility = "visible"}

else{document.getElementById('box3').style.visibility = "hidden"}

document.getElementById('box4').style.position = "absolute";

document.getElementById('box4').style.top = circle4Top;

document.getElementById('box4').style.left = circle4Left;

if(circle4Visible=="yes"){document.getElementById('box4').style.visibility = "visible"}

else{document.getElementById('box4').style.visibility = "hidden"}

document.getElementById('box5').style.position = "absolute";

document.getElementById('box5').style.top = circle5Top;

document.getElementById('box5').style.left = circle5Left;

if(circle5Visible=="yes"){document.getElementById('box5').style.visibility = "visible"}

else{document.getElementById('box5').style.visibility = "hidden"}

document.getElementById('box6').style.position = "absolute";

document.getElementById('box6').style.top = circle6Top;

document.getElementById('box6').style.left = circle6Left;

if(circle6Visible=="yes"){document.getElementById('box6').style.visibility = "visible"}

else{document.getElementById('box6').style.visibility = "hidden"}

document.getElementById('mainTitleBox').innerHTML=mainTitle

document.getElementById('bgImage').src=imageURL

}

</script>

</body>

</html>

Output