CODEWITHSUNDEEP
javascripthtml
Stoufa Gheribi
Stoufa Gheribi

Reputation: 35

Change image with MouseOver

I'm new to javascript and Html , Typed a code that changes the image when the mouse hovers over, it works but i was wondering if there is any better solution because it is very long and repetitive ; Here is the code : 

<doctype html>
<html>
<head>
</head>
<body>
    <table>
        <tr>
            <td>
                <img src="image1.jpg" height="200px" width="300px" 
onmouseover="rollover(this)" onmouseout="mouseaway(this)/>
            </td>
            <td>
                <img src="image2.jpg" height="200px" width="300px" 
onmouseover="rollover1(this)" onmouseout="mouseaway1(this)"/>
            </td>
        </tr>
        <tr>
            <td>
                <img src="image3.jpg" height="200px" width="300px" 
onmouseover="rollover2(this)" onmouseout="mouseaway2(this)"/>
            </td>
            <td>
                <img src="image4.jpg" height="200px" width="300px" 
onmouseover="rollover3(this)" onmouseout="mouseaway3(this)"/>
            </td>
        </tr>
    </table>
<script language="javascript">
function rollover(img1)
{
    img1.src = 'image2.jpg';
}
function mouseaway(img1)
{
    img1.src = "image1.jpg";
}
function rollover1(img2)
{
    img2.src='image3.jpg';
}
function mouseaway1(img2)
{
    img2.src='image2.jpg'
}
function rollover2(img3)
{
    img3.src='image4.jpg';
}
function mouseaway2(img3)
{
    img3.src='image3.jpg'
}
function rollover3(img4)
{
    img4.src='image1.jpg';
}
function mouseaway3(img4)
{
    img4.src='image4.jpg'
}

</script>
</body>
</html>

Upvotes: 1

Views: 819

Answers (4)

Phil
Phil

Reputation: 164731

You could store all the information required in each image tag, that way you wouldn't have to create extra functions for each one.

For example

document.addEventListener('DOMContentLoaded', () => {
  Array.from(document.querySelectorAll('img[data-src-enter]')).forEach(img => {
    img.setAttribute('data-src-out', img.src)
    img.addEventListener('mouseenter', () => {
      img.src = img.getAttribute('data-src-enter')
    }, false)
    img.addEventListener('mouseout', () => {
      img.src = img.getAttribute('data-src-out')
    }, false)
  })
})
<p>
  <img src="http://lorempixel.com/50/50/cats/1/" data-src-enter="http://lorempixel.com/50/50/cats/2/">
</p>
<p>
  <img src="http://lorempixel.com/50/50/cats/3/" data-src-enter="http://lorempixel.com/50/50/cats/4/">
</p>

Upvotes: 0

dev8080
dev8080

Reputation: 4020

All the above answers are good. I just want to add you could also use data-* attributes.

<img src="image1.jpg" height="200px" width="300px" onmouseover="rollover(this)" onmouseout="mouseaway(this)" data-hover-img="image1.jpg" data-normal-img="image2.jpg" />

In JS:

function rollover(img)
{

     img.src = this.dataset.hoverImg;


 }
function mouseaway(img)
{

   img.src = this.dataset.normalImg;

}

Upvotes: 1

Cfreak
Cfreak

Reputation: 19309

You want to make one function and give them an argument as to which image to display. Something like this:

function rollover(img, src) {
   img.src = src
}

Then call the same function on over and out:

<img src="image4.jpg" height="200px" width="300px" 
onmouseover="rollover(this,'image1.jpg')" onmouseout="rollover(this,'image4.jpg')"/>

This is even easier if you load a library such as jquery. Here's an example using it. You don't even have to have the events repeated. Just give each image a class

<img src="image4.jpg" class="rollover">

Then assign events using the class name (classes are identified by the leading .)

$(document).ready( function() {
     $('.rollover').mouseover( function(e) {
         this.old_src = this.src; // remember what the old src was
         this.src = 'image1.jpg';
     });
     $('.rollover').mouseout( function(e) {
         this.src = this.old_src;
     });
});

You wrap it in $(document).ready(...) to ensure the page has loaded before the events are attached.

Upvotes: 2

Nayana_Das
Nayana_Das

Reputation: 1817

Simple answer is :

<img onmouseover="this.src='image2.jpg'" onmouseout="this.src='image1.jpg'" height="200px" width="300px" src="image1.jpg">

Upvotes: 3

Related Questions