CODEWITHSUNDEEP
javascriptjquerymouseentermouseout
mallorz
mallorz

Reputation: 55

MouseEnter / MouseOut events

I've been reading articles online, watching YouTube videos - I am lost. This is the last bit of code I have tried, which as probably changed by now as you read this. It looks so simple, I don't understand what I am doing wrong? My mind just will not grasp this. Any help? I am trying to replace the image (src) with the image in (id) when the mouse is over it. Right now I am really just trying to get an alert when I mouse over the image. Anything!

**** UPDATED CODE ****

THIS JUST IN! I'm an idiot. Javascript file wasn't directed properly, missing the sub folder. Still struggling, but now at least my rollover is working. palm to forehead

HTML:

<!DOCTYPE HTML>
    <html lang="en">
    <head>
<meta charset="utf-8">
<title>Image Rollovers</title>
<link rel="stylesheet" href="styles/main.css">
<script src="js/rollover.js"></script>
    </head>

    <body>
    <h1>Rollover Test</h1>
    <ul id="rollover_test">
        <li>
            <img src="images/h1.jpg" alt="img1" id="images/h4.jpg" onmouseover="MouseOver('img1');" onmouseout="MouseOut('img1')">
        </li>
        <li>
            <img src="images/h2.jpg" alt="img2" id="images/h5.jpg">
        </li>
        <li>
            <img src="images/h3.jpg" alt="img3" id="images/h6.jpg">
        </li>
    </ul>        
    </body>
    </html>

The Javascript:

var $ = function (id) {
return document.getElementById(id);
};

function MouseOver(id){ 
// I'm trying to figure out the syntax in here to swap the id and src tags
alert($("id").src);

};

function MouseOut(id){
alert("out");
}

window.onload = function () {
//preload images
var links = document.getElementsByTagName("li");
var i, link, image;
for (i=0; i<links.length; i++) {
    links = links[i];
    image = new Image();
};
};

Upvotes: 1

Views: 93

Answers (3)

mallorz
mallorz

Reputation: 55

* SOLVED *

Once I figured out that my javascript wasn't linked right, it was just a matter of playing with syntax. Super easy. I am an idiot.

HTML

        <ul id="image_rollovers">
        <li>
            <img src="images/h1.jpg" alt="images/h4.jpg" id="img1" onmouseenter="MouseEnter('img1');" onmouseout="MouseOut('img1')">
        </li>
        <li>
            <img src="images/h2.jpg" alt="images/h5.jpg" id="img2" onmouseenter="MouseEnter('img2');" onmouseout="MouseOut('img2')">
        </li>
        <li>
            <img src="images/h3.jpg" alt="images/h6.jpg" id="img3" onmouseenter="MouseEnter('img3');" onmouseout="MouseOut('img3')">
        </li> 
    </ul>

JAVASCRIPT

var $ = function (id) {
return document.getElementById(id);
};

function MouseEnter(id){
var img = $(id);
originalURL = img.src;
var newURL = img.alt;

img.src = newURL;
};

function MouseOut(id){
var img = $(id);

img.src = originalURL;
}

window.onload = function () {
var originalURL;
//preload images
var links = document.getElementsByTagName("li");
var i, link, image;
for (i=0; i<links.length; i++) {
    links = links[i];
    image = new Image();
};
};

Works like a charm.

Thanks, all, for the tips and advice.

Upvotes: 0

Sam0
Sam0

Reputation: 1459

In your HTML the id attribute has been changed to data-id just because it's best to keep the id attribute for css identification.

by using mouseenter and mouseleave in cooperation the following snippet looks at each image as encountered and swaps its src attribute into a temporary data-temp attribute attached to that image.

Hopefully the snippet comments are self explanatory.

$("li").find('img').on({
  mouseenter: function() {
    $this = $(this); // get the current img object
    var src = $this.attr('src'), // get the current src
      id = $this.attr('data-id'); //get the alternative src
    $this.data('temp', src); // store in a new temporary data attribute
    $this.attr('src', id);
  },
  mouseleave: function() {
    var temp = $(this).data('temp'); // lookup temp
    $(this).attr('src', temp); // swap image back
  }
})


/*

var $ = function(id) {
  return document.getElementById(id);
};

function MouseRollover(img) {
  alert("made it");
  var oldIMG = $(this).attr("src");
  var newIMG = $(this).attr("id");
};

window.onload = function() {
    //preload images
    var links = document.getElementsByTagName("li");
    var i, link, image;
    for (i = 0; i < links.length; i++) {
      links = links[i];
      image = new Image();
    }
    //rollover
    $("li").on('mouseenter', function() {
          alert("yep");
        });
        
     }

*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Rollover Test</h1>
<ul id="rollover_test">
  <li>
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSm2etjS8VnJRwuZA8ormtAyPrIt8x0twLr-APiGwrkcX8NXe3P" alt="Img1" data-id="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ-W40Oxb_QCTaGT9MVgTuXaDxacAKgChfvATaS9KffbHfGc16n">
  </li>
  <li>
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTp6eZg_pJb0_NFxdaFYSnqMzPMJc-R_iwp2x8HarvdKzoNaCXv" alt="Img2" data-id="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSwvO67upMvk1q3MicNCujQ67D2EgJf8HyVA36FqM9qrv2B4Mue">
  </li>
  <li>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREN8xal0JlNdcPcz-94kQqZ8t3uBWEfm3T4LWpPY5PhX7qndGp" alt="Img3" data-id="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT07dVJl5ghqji58Su7Gs9RuSuCgleBDUITx2Dngh3ibVWzLfde">
  </li>
</ul>

Upvotes: 0

kind user
kind user

Reputation: 41913

Actually, these simple three lines of code are enough to make it work. 

$("img").on('mouseenter', function() {
  $(this).attr("src", $(this).attr('id'));
});
img {
  width: 100px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Rollover Test</h1>
<ul id="rollover_test">
  <li>
    <img src="http://hd-wall-papers.com/images/wallpapers/stock-image/stock-image-15.jpg" alt="Img1" id="http://studio7designs.com/wp-content/uploads/free-stock-nature-photos.jpg">
  </li>
  <li>
    <img src="http://studio7designs.com/wp-content/uploads/free-stock-nature-photos.jpg" alt="Img2" id="http://www.jfcsmonmouth.org/Resources/Pictures/investing-in-stocks3---ticker-symbols_s600x600.jpg">
  </li>
  <li>
    <img src="http://www.jfcsmonmouth.org/Resources/Pictures/investing-in-stocks3---ticker-symbols_s600x600.jpg" alt="Img3" id="http://hd-wall-papers.com/images/wallpapers/stock-image/stock-image-15.jpg">
  </li>
</ul>

Upvotes: 1

Related Questions