2

你好首先我是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>
4

2 回答 2

0

演示：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;
}
于 2013-07-29T06:29:13.207 回答
0

=> 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”可能不是一件坏事，但是。它可以在 vanillajs 中轻松完成。

就是说，这里有一些为什么它很好的原因。内容保留在 html 而不是 javascript 中。如果网络蜘蛛会下载您的页面，则它更有可能在 javascript 源代码中查找 html 内容而不是文本。

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

笔记

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

无论如何，我上面的示例应该在某些浏览器中工作，以给出如何做到这一点的想法。如果您还不熟悉 Javascript，我建议您使用 jQuery 或原型之类的库。上面的代码绝对不应该最终投入生产。

于 2013-07-29T06:23:25.903 回答