你好連接具有圖像文本第一我是基本以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>

來源

2013-07-29 Farida Hamraz

使用CSS在上帝的份！您可以將所有內容添加到圖片等頁面，使用JavaScript切換類顯示/隱藏一些元素。這將更容易 –

另外，你的意思是「你是」/「你是」而不是「你的」。 –

=> jsfiddle http://jsfiddle.net/Gy5rH/

只是爲了使事情清楚，並指出你可能會走錯路，這是一個更好的選擇。它大概可以用css完成，但這裏更容易維護。

而不是使用多個觸發器，我們將只使用每個按鈕上的一個點擊功能。每個按鈕都有一個「data-target」，它是另一個元素的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或prototype的庫。上面的代碼不應該最終生產。

來源

2013-07-29 06:23:25

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

來源

2013-07-29 06:29:13 abc123

如何在可變

回答

注

相關問題