Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – how do i get the mouseover effect showing the title?

var i = 0
$('#knopToggle').on('click', function () {
    i++
    var imgAttributes = {
        'src': 'kitten' + i + '.jpg',
        'title': 'Afbeelding van poes' + i,
        'alt': 'Afbeelding van poes' + i
    }
    if (i > 2) {
        i = 0
    };
    $('#imgKitten').attr(imgAttributes)
}
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<img src="kitten1.jpg" alt="" id="imgKitten" height="200px" width="200px">
<div id="divResult"></div>
<button id="knopToggle">wissel afbeelding</button>

it doesn’t show the title with mouseover on images.
How do i get to show the title attribute with mouseover?

Tags:

2

Answers


  1. 0

    Use jquery mouseover event with img element

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<img src="kitten1.jpg" alt="" id="imgKitten" height="200px" width="200px">
<div id="divResult"></div>
<button id="knopToggle">wissel afbeelding</button>
<script>
    var i = 0
    $('img').on('mouseover', function () {
        i++
        var imgAttributes = {
            'src': 'kitten' + i + '.jpg',
            'title': 'Afbeelding van poes' + i,
            'alt': 'Afbeelding van poes' + i
        }
        if (i > 2) {
            i = 0
        };
        $('#imgKitten').attr(imgAttributes)
    }
    )
</script>
    Login or Signup to reply.
  2. 0

    If you inspect the DOM you’ll see that title is not set.

    You’ll need element.prop('title', 'something') to set the Title for a DOM element.

    Place your mouse over the image, wait 2 seconds and the title will appear:

    var i = 0
$('#knopToggle').on('click', function () {
    i++
    var imgAttributes = {
        'src': 'kitten' + i + '.jpg',
        'alt': 'Afbeelding van poes' + i
    }
    if (i > 2) {
        i = 0
    };
    
    const el = $('#imgKitten');
    
    el.attr(imgAttributes);
    el.prop('title', 'Afbeelding van poes' + i);
    
}
)
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<img src="kitten1.jpg" alt="" id="imgKitten" height="200px" width="200px">
<div id="divResult"></div>
<button id="knopToggle">wissel afbeelding</button>

    Keep in mind that you You might not need jQuery, here is the native Javascript version of the above:

    var i = 0
const el = document.querySelector('#imgKitten');

document.querySelector('#knopToggle').addEventListener('click', () => {
  
    i++
    if (i > 2) {
        i = 0
    };
    
    el.src = 'kitten' + i + '.jpg';
    el.title = 'Afbeelding van poes' + i;
});
    <img src="kitten1.jpg" alt="" id="imgKitten" height="200px" width="200px">
<div id="divResult"></div>
<button id="knopToggle">wissel afbeelding</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search