我想在JavaScript中將鼠標移到圖像上時顯示文本

我想在JavaScript中將鼠標移到圖像上時顯示文本。我不知道我要去哪裏，因爲我是新手。有一張表格，當我將鼠標移到圖片上時，我想要顯示其內容。我想在這裏使用JavaScript。我想在JavaScript中將鼠標移到圖像上時顯示文本

<script> 
function show() 
{ 
var welcome = document.getElementById('sub1'); 
welcome.style.display = 'block'; 
} 

function hide() 
{ 
var welcome = document.getElementById('sub1'); 
welcome.style.display = 'none'; 
} 
</script> 

<div id="sub1" onmouseover="show();" onmouseout="hide();"> </div> 

//This is the image where I want to display a text. 
<td><img border="0" src="images/img1.jpg" 
alt="iphone 5s" width="304" height="228"></td>

來源

2016-02-26 jeny

是否要將文字替換爲圖像或將文字置於其他位置？從我的理解，請檢查下面的代碼：

<script> 
function showText(text){ 
    document.getElementById("text").innerHTML=text; 
} 
function hide(){ 
    document.getElementById("text").innerHTML=""; 
} 
</script> 
<img src="image.jpg" id="image" onMouseOver="showText('Some Text')" onMouseOut="hide();"> 
<div id="text"></div>

來源

2016-02-26 02:25:49

我只想.Probably顯示圖像的頂部的文本的簡要說明一個圖像。 – jeny

您可以將Div放置在圖像上方。然後它會出現在圖像上方。如果文本和圖像從數據庫中提取並需要顯示每個圖像的不同文本，則需要修改上述代碼。但邏輯是一樣的。 –

感謝它的工作。有什麼方法可以移動文本嗎？它顯示在頂部。我希望它在圖像上或圖像旁邊。 – jeny

要輸入圖像上的任何文字，甚至添加圖標或類似的東西，你有你的圖像標記之前創建一個div ,,通常它被稱爲佈局DIV 。

<td><div class="layout"></div><img id="testImg" src="Your img path"></td>

注意：我們在放置圖像標籤之前關閉了div。你的CSS將是：

background:rgba(7,7,7,0.2); 
position:absolute; 
top:0; 
bottom:0; 
right:0; 
left:0; 
display:none

改變背景顏色和透明度，只要你喜歡.. jQuery代碼：

$("#testImg").click(function() { 
    $(".layout").css("display", "block"); 
    $(".layout").text('Test Paragraph');

}）;

來源

2016-02-26 02:27:16 Elharony

我想用JavaScript來做。感謝您的jQuery代碼 – jeny

哦srry我沒有注意到，很抱歉，再次對於這個錯誤。做相同的css和html，但用JavaScript，你可以寫內聯的img標籤onclick =「showText（）」。移動到js：你將創建一個名稱的函數，在它裏面你會寫document.getElementByClassName（'layout' ）.style.display = 「塊」;所以你已經使它看起來，然後把文本：document.getElementByClassName（'layout'）。innerHTML（'Your text'）; – Elharony

你相當接近。我認爲你的代碼現在的問題是，你的具有「onmouseover」和「onmouseout」的div是非常小的，因爲它沒有任何內容。另外，有些瀏覽器不會對您創建的內聯事件做出反應。另外，塊樣式在某些瀏覽器中可能會遇到一些樣式問題。你可能不想要這個，而只是試圖帶走顯示屏上的「無」。如果可以的話，我也會指出你使用JQuery，但是由於你沒有提到JQuery，下面的代碼就可以工作了。這是的jsfiddle以及給你看：

https://jsfiddle.net/nkxjphjm/1/

<script> 
function show() { 
    var welcome = document.getElementById('sub1'); 
    welcome.style.display = ''; 
} 

function hide() { 
    var welcome = document.getElementById('sub1'); 
    welcome.style.display = 'none'; 
} 
function init() { 
    var surround = document.getElementById('surroundDiv'); 
    surround.onmouseover = show; 
    surround.onmouseout=hide; 
} 

window.onload = init; 
</script> 

<div id="surroundDiv"> 
<img border="0" src="images/img1.jpg" 
alt="iphone 5s" width="304" height="228"> 
</div> 
<div id="sub1" style="display:none">Text to display</div>

現在，當他們將鼠標放在圖片，他們也將要在DIV。這將觸發將顯示內部div「sub1」的操作，該文本中包含文本。你也可以修改裏面的文字等等。這些選項是無窮無盡的。我希望這能讓你開始。如果有，請接受答案。如果您需要更多幫助，請發表評論，我可以更新我的答案。謝謝！

來源

2016-02-26 02:54:29 BoBoCoding

您可以使用，而不是使用JavaScript只有CSS：codepen: display text when I hover - css

HTML

<div class="thumb-item"> 
    <img class="thumb-item__image" src="http://clapat.ro/themes/legrand-wordpress/wp-content/uploads/2015/11/2.jpg" alt=""> 
    <div class="thumb-item__info"> 
    <h5>Title here</h5> 
    <p>This Is a caption Line</p> 
    </div> 
</div>

CSS

.thumb-item { 
    width: 400px; 
    position: relative; 
    overflow: hidden; 
} 
.thumb-item__image { 
    width: 100%; 
} 
.thumb-item__info { 
    position: absolute; 
    bottom: -30px; 
    left: 0; 
    width: 100%; 
    opacity: 0; 
    box-sizing: border-box; 
    color: #fff; 
    padding: 10px 20px; 
} 
.thumb-item__info h5 { 
    font-size: 16px; 
    margin: 0; 
    padding: 0; 
    font-family: tahoma; 
    font-weight: bold; 
} 
.thumb-item__info p { 
    font-size: 12px; 
    margin: 4px 0 14px; 
} 
.thumb-item:hover .thumb-item__info { 
    opacity: 1; 
    bottom: -5px; 
}

來源

2016-02-26 03:28:46 yamitrvg12

我想在JavaScript中將鼠標移到圖像上時顯示文本

回答

相關問題