注意

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

=＆GT; jsfiddle http://jsfiddle.net/Gy5rH/

只是为了让事情变得清晰，并指出你可能走错路，这是一个更好的选择。它可能主要使用css完成，但这里更容易维护。

我们只使用每个按钮上的一个点击功能，而不是使用多个触发器。每个按钮都有一个“数据目标”，它是另一个元素的id。

我们的标记将如下所示：

<html>
 <head>
  <style>
    #source { display: none; }
  </style>
  <script>
   // Our click event
   function clickEvent (ev) {
     // Get the target in the dom
     // While checking more about event should be good because 
     // Target may not be the element you're looking for in some cases.
     var target = ev.target.dataset['target'];
     var obj = document.getElementById(target);

     // change the content with the one found
     document.getElementById('content').innerHTML = obj.innerHTML;
   }

   function loaded() {
     var docs = document.getElementsByClassName("btn");
     // Transform to array 
     docs = Array.prototype.slice.call(docs);
     docs.forEach(function(elem) {
       // Assign click event to all elements
       elem.onclick = clickEvent;
     });
   }
  </script>
 </head>
 <body onload="loaded()">
  <div>
    <button class="btn" data-target="Engineering-Source">Engineering</button>
    ...
  </div>
  <div id="content"></div>
  <div id="source">
    <div id="Engineering-Source">
      Your In Engineering Section <br> <img src='a.jpg'>
    </div>
    ...more after
  </div>
 </body>
</html>

我添加了评论，但这是一个很好的方法。避免“vanillajs”可能并不是件坏事。它可以在没有太多痛苦的情况下完成。

也就是说，这里有一些原因可以解释它的优点。内容保留在html而不是javascript中。如果网络蜘蛛会下载您的网页，那么它将有更多机会在javascript源代码中查找html内容而不是文本。

在我的示例中，某些内容可能不存在于旧浏览器中，如“dataset”和“forEach”。

注意

也就是说，这样做的纯粹“css”方式是可能的，但可能会使文档的结构更难编辑。另一方面，有一些方法可以混合使用css和js来保持最小的js，并尽可能使用html / css来保持样式的排列。

无论如何，我上面的例子应该在某些浏览器中工作，以便知道如何做到这一点。如果您还不熟悉Javascript，我建议使用jQuery或prototype等库。上面的代码不应该最终生产。

Answer 2

DEMO： 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;
}

如何将文本与变量中的图像连接起来

2 个答案:

注意