Afișarea textului utilizând onMouseover JavaScript/HTML (Programare, Javascript, Html)

Bobby Digital a intrebat.
a intrebat.

Am o sarcină care solicită o imagine a unei persoane celebre și scopul aici este ca, odată ce utilizatorul mută mouse-ul pe imagine, să fie vizibil un text care afișează un citat făcut de acea persoană. Odată ce utilizatorul se mișcă de pe imagine, textul va dispărea. Acest lucru pare relativ simplu și știu că se poate face folosind CSS însă doresc să îmi lărgesc abilitățile HTML și voi ignora CSS deocamdată și mă voi concentra pe HTML și JS. Acum știu că onMouseover este gestionarul de evenimente cheie pentru acest lucru, însă am impresia că codul meu are erori de care nu sunt conștient. Totul este închis în tag-urile de script. Mulțumesc.

<img src="julius_caesar.jpg" id="jCaes" onMouseover="displayQuote();">
function displayQuote() {
document.getElementById("jCaes").value = "I came, I saw, I conquered";
}

Comentarii

  • doar adăugați textul în title din atributul img –  > Por grabthefish.
  • nu aveți nevoie de evenimentul onMouseover pentru asta, doar adăugați atributul title la tag-ul imaginii dvs. ca <img src=”…” title=”Textul pe care doriți să-l afișați” .. /> –  > Por Sudhir Bastakoti.
4 răspunsuri
Nakul91

Aveți nevoie de un atribut title pentru a afișa textul la trecerea mouse-ului.

<img src="julius_caesar.jpg" id="jCaes" title="your text"/>

Ganesh Salunkhe

Ca aceastaDemo ?

Dacă acest lucru pe care îl doriți, atunci Bootstrap Tooltip vă ajută, de asemenea, să vă ajutați.

Vedeți Aici

vă rugăm să mă ștergeți

Tag img nu are atributul „value”

<script>
    function displayQuote() {
        document.getElementById("jCaes").textContent = "I came, I saw, I conquered";
    }
</script>

<img src="http://www.tivix.com/uploads/blog_pics/Android-logo.png"  onMouseover="displayQuote();" height="150" width="150">
<p id="jCaes"></p>

Comentarii

  • Mulțumesc tuturor, voi sunteți grozavi! Practica face perfecțiunea! –  > Por Bobby Digital.
Andrew Hendrie

Soluția 1: Puteți adăuga un atribut title la tag-ul HTML:

<img src="julius_caesar.jpg" id="jCaes" title="your text" />

Soluția 2: Ai putea folosi css pentru acest lucru (dacă vrei să stilizezi citatul care este afișat):

div.quote {
    display: none;
    border:1px solid #000;
    height:30px;
    width:290px;
    margin-left:10px;
}

img#jCaes:hover + div.quote {
    display: block;
}

Soluția trei: Chiar nu este nevoie să folosiți JavaScript pentru acest lucru; totuși, iată o soluție JS de asemenea:

HTML suplimentar:

<div id="popup">Your quote here</div>

CSS:

#popup {
  display:none;
}

JS

var e = document.getElementById('jCaes');

e.onmouseover = function() {
  document.getElementById('popup').style.display = 'block';
}

e.onmouseout = function() {
  document.getElementById('popup').style.display = 'none';
}   

Soluția 4: Iată o altă soluție, dacă puteți folosi jQuery: http://jsfiddle.net/9RxLM/

Comentarii

  • Tocmai ați copiat răspunsul lui Nakul91 –  > Por pan1490.
  • Ei bine, aceasta este cea mai de bază soluție. Totuși, între timp am dat și o altă opțiune. –  > Por Andrew Hendrie.