尝试使用Javascript对我正在制作的图像进行编号

点击一个按钮，我就会使图像出现在div中。图像向右偏移。我想对div左侧的图像（1、2、3、4等）进行编号。我无法显示任何文本。一旦我有文本，我想删除它

我尝试使用i2.innerHTML=“1”； 运气不好

我用我的网站创建了一个代码笔。图像不在那里，但当单击按钮时，您应该能够看到新图像出现在my DIV中的何处

JS:

---

首先，需要对大量代码进行重新分析

话虽如此，你还是希望你的图片有文字。。。最接近这一点的是，您知道您的img标签不支持您想要的文本：

i2.innerHTML = "1"; 

但您可以添加一个alter或title文本

i2.setAttribute('alt', '1');
i2.setAttribute('title', '1');

如果您想将文本放在图像上，您可以做的另一件事是使用divs并将imgs作为背景，然后您可以使用.innerHTMl=“1”

如果这是你想要的检查这个

html, body {
 margin: 0;
padding: 0;}
#banner {
height:40px;}
#container {    
margin: 0 auto;}
#maincontent {
width: 770px;
background-repeat: repeat-y;
overflow: hidden;}
#leftcolumn {
padding-left: 10px;
padding-right: 10px;
float: left;
width: 130px;}
#middlecolumn {
float: left;
width: 100px;
padding-left: 10px;
padding-right: 10px;}
#rightcolumn {
float: right;
width: 490px;
height:330px;
padding: 5px;}  
.imageright {   
float: right;
padding-right: 5px;
max-height:90%;
max-width:70%;} 
img {
position:absolute;
z-index:3;}
ul {
list-style: none;}
.button {
visibility:hidden;
clip:rect(0 0 0 0);
position: absolute;
left: 9999px;}
label {
background-image: url("Images/buttonUnclicked.png");
background-size: 100px;
background-repeat: no-repeat;
width: 100px;
height: 30px;
display: block;
float: left;
margin-right: 50px;
text-align:center;font-size:small;
padding-top:7px;
font-family:"Tekton Pro";}
.button:checked + label {
background-image: url("Images/buttonClicked.png");}
 input[type=button] { 
font: 10px verdana,arial,sans-serif;
width: 100px; 
height:30px;
border-style:none;
background:transparent;
float:none;}
#testThumbnail {
padding-left:30px;
padding-top:10px;
}
#floatingButton1 {
float: left;
height: 32px;
width: 100px;   
border:thin;
background-image: url("Images/whitesquare.png");
background-repeat: no-repeat;
display: block;
float: left;
border-top:medium;}
#floatingButton2 {
float: left;
height: 32px;
width: 100px;   
border:thin;
background-image: url("Images/whitesquare.png");
background-repeat: no-repeat;
display: block;
border-top:medium;}
#floatingButton3 {
float: left;
height: 32px;
width: 100px;   
border:thin;
background-image: url("Images/whitesquare.png");
background-repeat: no-repeat;
display: block;
border-top:medium;}
#floatingButton4 {
float: left;
height: 32px;
width: 100px;   
border:thin;
background-image: url("Images/whitesquare.png");
background-repeat: no-repeat;
display: block;
border-top:medium;}
#floatingButton5 {
float: left;
height: 32px;
width: 100px;   
border:thin;
background-image: url("Images/whitesquare.png");
background-repeat: no-repeat;
display: block;
border-top:medium;}
#floatingButton6 {
float: left;
height: 32px;
width: 100px;   
border:thin;
background-image: url("Images/whitesquare.png");
background-repeat: no-repeat;
display: block;
border-top:medium;}
#floatingButton7 {
float: left;
height: 32px;
width: 100px;   
border:thin;
background-image: url("Images/whitesquare.png");
background-repeat: no-repeat;
display: block;
border-top:medium;}
#floatingButton8 {
float: left;
height: 32px;
width: 100px;   
border:thin;
background-image: url("Images/whitesquare.png");
background-repeat: no-repeat;
display: block;
border-top:medium;}
#floatingButton9 {
float: left;
height: 32px;
width: 100px;   
border:thin;
background-image: url("Images/whitesquare.png");
background-repeat: no-repeat;
display: block;
border-top:medium;}

i2.innerHTML = "1"; 

i2.setAttribute('alt', '1');
i2.setAttribute('title', '1');