Interactive Infographics

The code below will allow you to embed an interactive infographic like the example below.  The code allows you to add your own title and background image using an image from the internet.  You can then position the numbered circles and edit the text that show when a users hovers their mouse over it.

This is an ideal exercise for learners to when using Sites to record or share their learning.

Full code:

Edit the text in blue and embed in your Google Site.

<html>

<head>

<script>

/////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>


<body onload="positionCircles()">

<h1 id="mainTitleBox" style="margin-bottom:8px;"></h1>

<div id="container" style="position:absolute;border:solid purple;">

<div id="imageDiv" >

<img id="bgImage" src="">

</div>

<div id="box1" class="infoBox" onmouseover="outputTitle.innerHTML=title1;outputText.innerHTML=text1;">1</div>

<div id="box2" class="infoBox" onmouseover="outputTitle.innerHTML=title2;outputText.innerHTML=text2;">2</div>

<div id="box3" class="infoBox" onmouseover="outputTitle.innerHTML=title3;outputText.innerHTML=text3;">3</div>

<div id="box4" class="infoBox" onmouseover="outputTitle.innerHTML=title4;outputText.innerHTML=text4;">4</div>

<div id="box5" class="infoBox" onmouseover="outputTitle.innerHTML=title5;outputText.innerHTML=text5;">5</div>

<div id="box6" class="infoBox" onmouseover="outputTitle.innerHTML=title6;outputText.innerHTML=text6;">6</div>

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

<p id="currentText">&nbsp;</p>

</div>

<script>

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>