Événements MouseEnter/MouseOut

Je lis des articles en ligne, je regarde des vidéos YouTube - Je suis perdu. C'est le dernier morceau de code que j'ai essayé, et qui a probablement changé en même temps que vous lisez ceci. Il semble si simple, je ne comprends pas ce que je fais mal? Mon esprit ne comprendra pas cela. De l'aide? J'essaie de remplacer l'image (src) par l'image dans (id) quand la souris est dessus. En ce moment, je suis vraiment en train d'essayer d'obtenir une alerte lorsque je souris sur l'image. N'importe quoi!Événements MouseEnter/MouseOut

**** **** CODE MISE À JOUR

CE JUSTE! Je suis un idiot. Le fichier Javascript n'a pas été dirigé correctement, il manque le sous-dossier. Toujours en difficulté, mais maintenant au moins mon roulement fonctionne. paume sur le front

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>

Le 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(); 
}; 
};

Source

2017-02-10 mallorz

Je pense que ce lien peut vous aider: [http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover](http://www.w3schools.com/jsref/tryit.asp?filename = tryjsref_onmouseover) – Thanasis

'$ (" li "). on ('mouseenter', function() {alert (" yep ");});' - manque une parenthèse fermante. – mrogers

En fait, ces trois simples lignes de code suffisent pour le faire fonctionner.

$("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>

Source

2017-02-10 01:04:44

@Thanasis - J'ai rejeté votre modification car l'auteur de la question a marqué 'jquery', il n'est donc pas nécessaire d'informer tout le monde que ma solution l'exige. –

Oh, je n'ai pas remarqué ça. Cependant, il est possible que l'OP ne puisse pas le faire fonctionner parce qu'il oublie d'inclure le jQuery. C'était mon intention. – Thanasis

@Thanasis Merci de toute façon :) –

Dans votre code HTML l'attribut id a été modifié pour data-id juste parce qu'il est préférable de garder l'attribut id pour l'identification des css. En utilisant mouseenter et mouseleave en coopération, l'extrait suivant examine chaque image comme rencontrée et remplace son attribut src par un attribut temporaire data-temp attaché à cette image.

Espérons que les commentaires sur les extraits de code soient explicites.

$("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>

Source

2017-02-10 01:20:51 Sam0

* * SOLVED

Une fois que je me suis dit que mon javascript est pas lié droit, il était juste une question de jouer avec la syntaxe. Super facile. Je suis un 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(); 
}; 
};

fonctionne comme un charme.

Merci à tous pour les conseils et astuces.

Source

2017-02-10 02:40:02 mallorz

Serait gentil si vous marqueriez ma réponse comme la meilleure, parce qu'elle vous a conduit à résoudre votre problème :) –

Événements MouseEnter/MouseOut

Répondre

Questions connexes