JSFiddle - React, Tailwind, and code Playground

by SASSACB

HTML

<!DOCTYPE html>
<html>
<head>
<title> Using JavaScript to Change the Source of an Image </title>
</head>
<body>
<span>Contact</span>
<span>Address Card</span>
<span>Clock</span>
<span>Clock</span>
<img id="imgDisp" src="https://dcbm.ualg.pt/sites/ualg.pt/files/dcbm/cgd.jpg" />
<span onclick="changeImage('http://images.tcdn.com.br/img/img_prod/585589/comando_de_valvulas_hr_l200_k2500_cams500_1072_1_20180117162358.jpg')">Contact</span>
<span onclick="changeImage('address.png')">Address Card</span>
<span onclick="changeImage('clock.png')">Clock</span>
</body>
</html>

CSS

body
{
font-family: Arial, Helvetica, sans-serif;
}
span
{
margin-left: 50px;
text-transform: uppercase;
font-size: 14px;
}
span:hover
{
text-decoration: underline;
cursor: pointer;
color: blue;
}

JavaScript

function changeImage(imgName)
{
image = document.getElementById('imgDisp');
image.src = imgName;
}