单击按钮后，我使图像出现在 DIVS 中。图像向右偏移。我想对 DIVS 左侧的图像(1、2、3、4 等)进行编号。我无法显示任何文本。一旦我有文本，我想将其删除。
我尝试使用 i2.innerHTML = "1"; 运气不佳。
我用我的网站创建了一个 Codepen。图像不存在，但您应该能够在单击按钮时看到新图像出现在我的 DIV 中的什么位置。
http://codepen.io/angstd/pen/ropca
JS:
var i1 = document.createElement("img");
var i2 = document.createElement("img");
var i3 = document.createElement("img");
var i4 = document.createElement("img");
var i5 = document.createElement("img");
var i6 = document.createElement("img");
var i7 = document.createElement("img");
var i8 = document.createElement("img");
var i9 = document.createElement("img");
i1.type = "image";
i2.type = "image";
i3.type = "image";
i4.type = "image";
i5.type = "image";
i6.type = "image";
i7.type = "image";
i8.type = "image";
i9.type = "image";
var floatingButton1 = document.getElementById('floatingButton1');
var floatingButton2 = document.getElementById('floatingButton2');
var floatingButton3 = document.getElementById('floatingButton3');
var floatingButton4 = document.getElementById('floatingButton4');
var floatingButton5 = document.getElementById('floatingButton5');
var floatingButton6 = document.getElementById('floatingButton6');
var floatingButton7 = document.getElementById('floatingButton7');
var floatingButton8 = document.getElementById('floatingButton8');
var floatingButton9 = document.getElementById('floatingButton9');
floatingButton1.style.paddingLeft="35px";
floatingButton2.style.paddingLeft="35px";
floatingButton3.style.paddingLeft="35px";
floatingButton4.style.paddingLeft="35px";
floatingButton5.style.paddingLeft="35px";
floatingButton6.style.paddingLeft="35px";
floatingButton7.style.paddingLeft="35px";
floatingButton8.style.paddingLeft="35px";
floatingButton9.style.paddingLeft="35px";
floatingButton1.style.paddingTop="5px";
floatingButton2.style.paddingTop="5px";
floatingButton3.style.paddingTop="5px";
floatingButton4.style.paddingTop="5px";
floatingButton5.style.paddingTop="5px";
floatingButton6.style.paddingTop="5px";
floatingButton7.style.paddingTop="5px";
floatingButton8.style.paddingTop="5px";
floatingButton9.style.paddingTop="5px";
function clearButtons() {
i = 1;
while (i < 10) {
var floatingButtonToClear = document.getElementById('floatingButton' + i);
floatingButtonToClear.style.backgroundImage="url('Images/whitesquare.png')";
i = i + 1;
}
}
function makeOptionButtons(a, b) {
i = a;
while (a <= b) {
var floatingButtonOptionsClear = document.getElementById('floatingButton' + a);
floatingButtonOptionsClear .style.backgroundImage="url('Images/buttonUnclicked.png')";
a = a + 1;
}
}
function clearThumbnails() {
if (floatingButton1.hasChildNodes())
{
floatingButton1.removeChild(i1);
}
if (floatingButton2.hasChildNodes())
{
floatingButton2.removeChild(i2);
}
if (floatingButton3.hasChildNodes())
{
floatingButton3.removeChild(i3);
}
if (floatingButton3.hasChildNodes())
{
floatingButton3.removeChild(i3);
}
if (floatingButton4.hasChildNodes())
{
floatingButton4.removeChild(i4);
}
if (floatingButton5.hasChildNodes())
{
floatingButton5.removeChild(i5);
}
if (floatingButton6.hasChildNodes())
{
floatingButton6.removeChild(i6);
}
if (floatingButton7.hasChildNodes())
{
floatingButton7.removeChild(i7);
}
if (floatingButton8.hasChildNodes())
{
floatingButton8.removeChild(i8);
}
if (floatingButton9.hasChildNodes())
{
floatingButton9.removeChild(i9);
}
}
function showImageOnClick1(a) {
clearThumbnails()
clearButtons()
document.getElementById(a).style.visibility = 'visible';
}
function showImageOnClick2(a, b) {
clearThumbnails()
clearButtons()
document.getElementById(a).style.visibility = 'visible';
document.getElementById(b).style.visibility = 'hidden';
}
function showImageOnClick3(a, b, c) {
clearThumbnails()
clearButtons()
document.getElementById(a).style.visibility = 'visible';
document.getElementById(b).style.visibility = 'hidden';
document.getElementById(c).style.visibility = 'hidden';
}
function showImageOnClick4(a, b, c, d) {
clearThumbnails()
clearButtons()
document.getElementById(a).style.visibility = 'visible';
document.getElementById(b).style.visibility = 'hidden';
document.getElementById(c).style.visibility = 'hidden';
document.getElementById(d).style.visibility = 'hidden';
}
function Door() {
clearThumbnails()
clearButtons()
makeOptionButtons(1, 4);
i1.src = "Images/tnBB1.png";
floatingButton1.appendChild(i1);
i2.src = "Images/tnBB1.png";
floatingButton2.appendChild(i2);
i3.src = "Images/tnBB1.png";
floatingButton3.appendChild(i3);
i4.src = "Images/tnBB1.png";
floatingButton4.appendChild(i4);
i1.onclick = function () {
showImageOnClick4('Door1', 'Door2', 'Door3', 'Door4')
};
i2.onclick = function () {
showImageOnClick4('Door2', 'Door1', 'Door3', 'Door4')
};
i3.onclick = function () {
showImageOnClick4('Door3', 'Door1', 'Door2', 'Door4')
};
i4.onclick = function () {
showImageOnClick4('Door4', 'Door1', 'Door2', 'Door3')
};
}
function Trim() {
clearThumbnails()
clearButtons()
makeOptionButtons(2, 4);
i2.src = "Images/tnS1.png";
i2.innerHTML = "1";
floatingButton2.appendChild(i2);
i3.src = "Images/tnS2.png";
floatingButton3.appendChild(i3);
i4.src = "Images/tnR3 - Copy.png";
floatingButton4.appendChild(i4);
i2.onclick = function () {
showImageOnClick3('Trim1', 'Trim2', 'Trim3')
};
i3.onclick = function () {
showImageOnClick3('Trim2', 'Trim1', 'Trim3')
};
i4.onclick = function () {
showImageOnClick3('Trim3', 'Trim1', 'Trim2')
};
}
function Roof() {
clearThumbnails()
clearButtons()
makeOptionButtons(3, 5);
i3.src = "Images/tnT3.png";
floatingButton3.appendChild(i3);
i4.src = "Images/tnBB3.png";
floatingButton4.appendChild(i4);
i5.src = "Images/tnBB1.png";
floatingButton5.appendChild(i5);
i3.onclick = function () {
showImageOnClick3('Roof1', 'Roof2', 'Roof3')
};
i4.onclick = function () {
showImageOnClick3('Roof2', 'Roof1', 'Roof3')
};
i5.onclick = function () {
showImageOnClick3('Roof3', 'Roof1', 'Roof2')
};
}
function Siding() {
clearThumbnails()
clearButtons()
makeOptionButtons(4, 6);
i4.src = "Images/tnBB2.png";
floatingButton4.appendChild(i4);
i5.src = "Images/tnBB311.png";
floatingButton5.appendChild(i5);
i6.src = "Images/tnBB112.png";
floatingButton6.appendChild(i6);
i4.onclick = function () {
showImageOnClick3('Siding1', 'Siding2', 'Siding3')
};
i5.onclick = function () {
showImageOnClick3('Siding2', 'Siding1', 'Siding3')
};
i6.onclick = function () {
showImageOnClick3('Siding3', 'Siding1', 'Siding2')
};
}
function Stone() {
clearThumbnails()
clearButtons()
makeOptionButtons(5, 7);
i5.src = "Images/tnBB1.png";
floatingButton5.appendChild(i5);
i6.src = "Images/tnR3 - Copy14.png";
floatingButton6.appendChild(i6);
i7.src = "Images/tnBB1.png";
floatingButton7.appendChild(i7);
i5.onclick = function () {
showImageOnClick3('Stone1', 'Stone2', 'Stone3')
};
i6.onclick = function () {
showImageOnClick3('Stone2', 'Stone1', 'Stone3')
};
i7.onclick = function () {
showImageOnClick3('Stone3', 'Stone1', 'Stone2')
};
}
function BB() {
clearThumbnails()
clearButtons()
makeOptionButtons(6, 9);
i6.src = "Images/tnBB1.png";
floatingButton6.appendChild(i6);
i7.src = "Images/tnBB117.png";
floatingButton7.appendChild(i7);
i8.src = "Images/tnBB218.png";
floatingButton8.appendChild(i8);
i9.src = "Images/tnBB319.png";
i9.type = "image";
floatingButton9.appendChild(i9);
i6.onclick = function () {
showImageOnClick4('BB1', 'BB2', 'BB3', 'BB4')
};
i7.onclick = function () {
showImageOnClick4('BB2', 'BB1', 'BB3', 'BB4')
};
i8.onclick = function () {
showImageOnClick4('BB3', 'BB1', 'BB2', 'BB4')
};
i9.onclick = function () {
showImageOnClick4('BB4', 'BB1', 'BB2', 'BB3')
};
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test Site Hand Written</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8" src="java.js"></script>
</head>
<body>
<div id="container">
<div id="banner">
<img src="Images/companyLogo.png" z-index: 1; style="left: -119px; top: 411px" />
</div>
<div id="maincontent">
<div id="leftcolumn">
<form action="#">
<ul>
<li>
<input type="radio" class="button" name="button" onclick="Door();" id="button1" checked/>
<label for="button1">Door</label>
</li>
<li>
<input type="radio" class="button" name="button" onclick="Trim();" id="button2" />
<label for="button2">Trim</label>
</li>
<li>
<input type="radio" class="button" name="button" onclick="Roof();" id="button3" />
<label for="button3">Roof</label>
</li>
<li>
<input type="radio" class="button" name="button" onclick="Siding();" id="button4" />
<label for="button4">Siding</label>
</li>
<li>
<input type="radio" class="button" name="button" onclick="Stone();" id="button5" />
<label for="button5">Stone</label>
</li>
<li>
<input type="radio" class="button" name="button" onclick="BB();" id="button6" />
<label for="button6">BB</label>
</li>
</ul>
</form>
</div>
<div id="middlecolumn">
<ul></ul>
<div id="floatingButton1"></div>
<div id="floatingButton2"></div>
<div id="floatingButton3"></div>
<div id="floatingButton4"></div>
<div id="floatingButton5"></div>
<div id="floatingButton6"></div>
<div id="floatingButton7"></div>
<div id="floatingButton8"></div>
<div id="floatingButton9"></div>
</div>
<div id="rightcolumn">
<img src="Images/Quincy-Bungalow-Hip-2Car.png" class="imageright" style="position: absolute; z-index: 0; "/>
<img id="Door1" src="Images/FDoor 1.png" style="visibility:hidden" class="imageright"/>
<img id="Door2" src="Images/FDoor 2.png" style="visibility:hidden" class="imageright"/>
<img id="Door3" src="Images/FDoor 3.png" style="visibility:hidden" class="imageright"/>
<img id="Door4" src="Images/FDoor 4.png" style="visibility:hidden" class="imageright"/>
<img id="Trim1" src="Images/Hardi Trim 1.png" style="visibility:hidden" class="imageright"/>
<img id="Trim2" src="Images/Hardi Trim 2.png" style="visibility:hidden" class="imageright"/>
<img id="Trim3" src="Images/Hardi Trim 3.png" style="visibility:hidden" class="imageright"/>
<img id="Roof1" src="Images/Roof 1.png" style="visibility:hidden" class="imageright"/>
<img id="Roof2" src="Images/Roof 2.png" style="visibility:hidden" class="imageright"/>
<img id="Roof3" src="Images/Roof 3.png" style="visibility:hidden" class="imageright"/>
<img id="Siding1" src="Images/Siding 1.png" style="visibility:hidden" class="imageright"/>
<img id="Siding2" src="Images/Siding 2.png" style="visibility:hidden" class="imageright"/>
<img id="Siding3" src="Images/Siding 3.png" style="visibility:hidden" class="imageright"/>
<img id="Stone1" src="Images/Stone 1.png" style="visibility:hidden" class="imageright"/>
<img id="Stone2" src="Images/Stone 2.png" style="visibility:hidden" class="imageright"/>
<img id="Stone3" src="Images/Stone 3.png" style="visibility:hidden" class="imageright"/>
<img id="BB1" src="Images/B&B 1.png" style="visibility:hidden" class="imageright"/>
<img id="BB2" src="Images/B&B 2.png" style="visibility:hidden" class="imageright"/>
<img id="BB3" src="Images/B&B 3.png" style="visibility:hidden" class="imageright"/>
<img id="BB4" src="Images/B&B 4.png" style="visibility:hidden" class="imageright"/>
<script type="text/javascript" charset="utf-8" src="java.js"></script>
</div>
</div>
</div>
</body>
</html>
CSS:
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;}
最佳答案
首先需要重构大量代码...
话虽如此，您希望您的图像具有文本...知道您的 img 标签不支持您想要的文本最接近于此:
i2.innerHTML = "1";
但您可以添加更改或标题文本来代替
i2.setAttribute('alt', '1');
i2.setAttribute('title', '1');
如果您想将文本放在图像上，您可以做的另一件事是使用 div 并将 img 作为背景，然后您可以使用 .innerHTMl = 将文本直接添加到 div “1”
如果这是您想要的，请查看此 question
关于javascript - 尝试使用 Javascript 对我正在制作的图像进行编号，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24881440/