I have a default image on my site using prependTo
:
$('<li></li>').prependTo('#files')
.html('<img src="/media/sample1.jpeg" alt="" /><br />')
.addClass('success');
Above the default image are 3 thumbnails, which are written as:
<div id="gallery">
<ul>
<li>
<a href="/media/glasses1.png" title="styling yourself w/ this armani pair">
<img src="/media/glasses1.png" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="/media/glasses0.png" title="styling yourself w/ this guess pair">
<img src="/media/glasses0.png" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="/media/glasses2.png" title="styling yourself w/ this guess pair">
<img src="/media/glasses2.png" width="72" height="72" alt="" />
</a>
开发者_Go百科 </li>
</ul>
</div>
How do I detect a mouseover on the thumbnail so that I can replace the default image with the full size image of the thumbnail?
something like:
$('#gallery img').mouseenter(function() {
$('#files img.success').attr("src", $(this).attr("src"));
});
you'll need to figure out what to do on .mouseleave()
You need to clone the actual image from the gallery container, just copying the image source does not force the browser to rerender.
EDIT: From what you describe in your comments I think this should work for you
$('#gallery img').mouseenter(function() {
var img = $('<img alt=""/>').attr('src', $(this).data('other'));
$('#files img').replaceWith(img);
});
And add a data-other attribute on your thumbnails:
<a href="/media/glasses1.png" title="styling yourself w/ this armani pair">
<img src="/media/glasses1.png" data-other="replacementImage.png" width="72" height="72" alt="" />
</a>
If you have a naming convention or some other way to determine the url to the new image without adding the attribute, you can do that instead.
精彩评论