Home/ Questions/Q 7827447
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T09:52:50+00:00

I am trying to use Javascript to change a picture with on-hover. I have

  • 0

I am trying to use Javascript to change a picture with on-hover. I have a thumbnail image and when the user hovers on top, the big picture will then change, depending on what thumbnail is being hovered over.

This is the HTML I have used.

<img onmouseover="showT(0)" src="pictures/278 Edit 10-8-11 2312.jpg" 
                    height="75" width="75" >
            <a href="#" onmouseover="showT(0)">pic 1</a>
            <a href="#" onmouseover="showT(1)">pic 2</a>
            <a href="#" onmouseover="showT(2)">pic 3</a>

This is the java script placed in header.

    <!-- onhover mouse for thumbNail -->
<script language="JavaScript" type="text/JavaScript"> 
function showT(q){ 
document.getElementById('ima').setAttribute('src','0'+q+'.jpg') 
} 
</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is a way to do it using jQuery:

    HTML:

    <img src="my-initial-picture.jpg" alt="Any alternative text" id="bigpic" />
<!-- store the id of the picture that should be displayed in a data-* attribute -->
<a href="#" class="thumbnail" data-index="0">pic 1</a>
<a href="#" class="thumbnail" data-index="1">pic 2</a>
<a href="#" class="thumbnail" data-index="2">pic 3</a>

    JS (in <head></head>):

    <script>
/* when mouse is over any HTML element that has a "thumbnail" class */
$(".thumbnail").mouseover(function() {
    /* change the "src" attribute of the element whose id is "bigpic" */
    /* the .data() method will get the picture id stored in the data-* attribute */
    $("#bigpic").attr("src", "0" + $(this).data("index") + ".jpg");
});
</script>

    You can add jQuery using the repo of Google (in <head></head>):

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    • 0