I have about 10 pictures, when :hover each picture there is an ajax.load that will be trigger. I am about to do 10 jquery.hover, but something tells me there is a better solution.
I was thinking about somthing like
case 1 : load a
case 2 : load b
case 3 : load c
etc...
How would I do this in jquery?
Understand the 10 different picture with 10 different text must be loaded in the <div> so now i am doing
$('#a).hover.load('file' #tx-a');
$('#b).hover.load('file' #tx-b');
$('#c).hover.load('file' #tx-c');
,
Here’s a simple example for you:
<p id="status"> </p>
<img class="viewable" id="unique" src="foo.jpg"/><br/>
<img class="viewable" id="id" src="foo.jpg"/><br/>
<img class="viewable" id="for" src="foo.jpg"/><br/>
<img class="viewable" id="each" src="foo.jpg"/><br/>
<img class="viewable" id="element" src="foo.jpg"/><br/>
<script type="text/javascript">
$(function() {
var stuff = 'hello', 'world', 'you', 'look', 'nice';
$('.viewable').hover(
// triggered when mouse moves onto element
function() {
var index = $('.viewable').index(this);
// Replace this next line with a jQuery AJAX call. Pass the index
// as a parameter to whatever location you are pulling the text
// from, and have the AJAX callback stuff the text into the
// #status element. This is just a placeholder.
$('#status').html('Hover IN, index ' + index + ' (' + stuffindex + ')');
},
// triggered when mouse move off of element
function() {
// Optional: clear status element when mouse moves off image
$('#status').html(' ');
}
);
});
</script>
,
I would definately recommend using some sort of shared function for this. There are two recommendations that I would make.
Option 1. Setup a plugin and then bind all 10 to the plugin.
(function($) {
$.fn.loadImageOnHover = function(image) {
return $(this).hover(function() {
// load the image using ajax
}, function() {
// unload
});
};
})(jQuery);
$('#image1').loadImageOnHover('image.jpg');
$('#image2').loadImageOnHover('image2.jpg');
$('#image3').loadImageOnHover('image3.jpg');
$('#imageN').loadImageOnHover('image4.jpg');
Option 2. Setup a common function and use an attribute, the hash, or index as mentioned by William Brendel
$('.hoverImage').hover(function() {
var image = this.hash.replace('#','');
alert(image);
// load via ajax
}, function() {
// unload
});
<a href="#image1.jpg" class="hoverImage">Hover</a>
<a href="#image2.jpg" class="hoverImage">Hover</a>
<a href="#image3.jpg" class="hoverImage">Hover</a>
<a href="#imagen.jpg" class="hoverImage">Hover</a>
,
You could use the following:
$('img').hover(function (e) { ... }, function (e) { ... });
The e in each of the functions represent the event object for the mouseover and the mouseout event respectively. To find out which of the images it triggered for, use $(this).
Some people (including myself) have had problem with using the hover() function because it doesn’t always register mouseout events correctly. Maybe this has been fixed in the later versions, but I usually do $('img').mouseover(...).mouseout(...) instead to be sure.
,
In jQuery you can bind hover event to all of them at once
$("img").hover(function(e) {
// triggered when mouse enters the element
// here you can load picture by Ajax
}, function(e) {
// triggered when mouse leaves the element
// unload picture or do whatever else ...
});
You can get reference to current image element via $(this)
,
base on work from : William Brendel, here is the final code
<script type="text/javascript">
$(document).ready(function () {
$('#equipe-gens img').hover(
function() {
myID=$(this).attr('id');
$('#equipe-profile').load('equipedecourse.html #' + myID);
$('#'+myID).css('border','2px solid red');
},
function() {
$('#'+myID).css('border','2px solid #000000');
$('#equipe-profile').html("<h1>Profil</h1><p>Pour voir le profile des membre de l'équipe, sélectinnez-les</p>");
}
);
});
</script>