javascript - 如何在变量中连接文本和图像

Question

你好，首先我是 java 脚本的基础，我有一些鼠标悬停在 div 上，每个

包含图像信息。问题是我想将文本与图像结合起来

每当我将鼠标悬停在每个 div 上时，在一个变量中，以便沿着图像显示信息

应该像我为他们每个人编程一样改变

问题是如何将文本和图像组合到一个变量中

但是我不知道怎么做，这里是代码:

    <script type="text/javascript">
    function ENGshowElements(){
        var Engineering = "Your In Engineering Section <br> <img src='a.jpg'>";

       document.getElementById("contents").innerHTML = Engineering;
    }
        function CONshowElements(){
        var Construction = "Your In Construction Section";

       document.getElementById("contents").innerHTML = Construction;
    }
        function LLCshowElements(){
        var LLCDubia = "Your In LLC Dubia Section";

       document.getElementById("contents").innerHTML = LLCDubia;
    }
        function WASshowElements(){
        var WasteManagement = "Your In Waste Management Section";

       document.getElementById("contents").innerHTML = WasteManagement;
    }
       function TRAshowElements(){
        var Transportation = "Your In Transportation Section";

       document.getElementById("contents").innerHTML = Transportation;
    }
           function LOGshowElements(){
        var Logistics = "Your In Logistics Section";

       document.getElementById("contents").innerHTML = Logistics;
    }
</script>




  <div class="firstbox" id="Engineering" onmouseover="ENGshowElements(); return false; " >Engineering</div>
  <div class="secbox" id="Construction"  onmouseover="CONshowElements(); return false; ">Construction</div>
  <div class="thirdbox" id="LLCDubia"  onmouseover="LLCshowElements(); return false; " >LLC Dubia</div>
  <div class="fourthbox" id="WasteManagement"  onmouseover="WASshowElements(); return false; " >Waste Management</div>
  <div class="fivthbox" id="Transportation"  onmouseover="TRAshowElements(); return false; " >Transportations</div>
  <div class="sixthbox" id="Logistics"  onmouseover="LOGshowElements(); return false; " >Logistics</div>

Answer 1

演示: jsFiddle

HTML:

<div class="firstbox" id="Engineering">Engineering</div>
<div class="secbox" id="Construction">Construction</div>
<div class="thirdbox" id="LLCDubia">LLC Dubia</div>
<div class="fourthbox" id="WasteManagement">Waste Management</div>
<div class="fivthbox" id="Transportation">Transportations</div>
<div class="sixthbox" id="Logistics">Logistics</div>
<div id="contents"></div>

JS:

document.getElementById('Engineering').onmouseover = ENGshowElements;
document.getElementById('Construction').onmouseover = CONshowElements;
document.getElementById('LLCDubia').onmouseover = LLCshowElements;
document.getElementById('WasteManagement').onmouseover = WASshowElements;
document.getElementById('Transportation').onmouseover = TRAshowElements;
document.getElementById('Logistics').onmouseover = LOGshowElements;

function ENGshowElements() {
    var Engineering = "Your In Engineering Section <br> <img src='a.jpg'>";
    document.getElementById("contents").innerHTML = Engineering;
}

function CONshowElements() {
    var Construction = "Your In Construction Section";

    document.getElementById("contents").innerHTML = Construction;
}

function LLCshowElements() {
    var LLCDubia = "Your In LLC Dubia Section";

    document.getElementById("contents").innerHTML = LLCDubia;
}

function WASshowElements() {
    var WasteManagement = "Your In Waste Management Section";

    document.getElementById("contents").innerHTML = WasteManagement;
}

function TRAshowElements() {
    var Transportation = "Your In Transportation Section";

    document.getElementById("contents").innerHTML = Transportation;
}

function LOGshowElements() {
    var Logistics = "Your In Logistics Section";

    document.getElementById("contents").innerHTML = Logistics;
}