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

时间：2014-07-22 07:38:36

标签： javascript html css

点击一下按钮，我就会在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;}

1 个答案:

答案 0 :(得分：0)

要开始那么多需要重新考虑的代码......

话虽如此，你希望你的图片有文字...最接近的是知道你的 img 标签不支持你想要的文字：

i2.innerHTML = "1";

但您可以添加更改或标题文字

i2.setAttribute('alt', '1');
i2.setAttribute('title', '1');
如果你想把文字放在图像上，你可以做的其他事情是使用div并将imgs作为背景，然后你可以直接用 .innerHTMl =将文本添加到div中＆＃34; 1＆＃34;

如果您想要的话，请查看question

相关问题
最新问题