I want to create "links" that are actually titles of equipment or items I wish to review. When the title is moused over, I want the image to change, but remain changed even after the mouse moves away.
Existing code options don't meet my requirements. I'm open to using jquery, css, or javascript for implementation on a Wordpress site.
The simple concept involves having something like:
PICTURE GOES HERE
Equipment 1: front | back | side Equipment 2: front | back | side
Initially, Equipment 1: front would be displayed above. Then, upon hovering over any other option such as front, back, or side, the picture would change and hold until moving to another text.
Pre-loading is acceptable since it already exists on the site. The goal is to make it function similar to regular images on WP where clicking enlarges the picture, hovering provides caption, etc.
The desired appearance should mirror this example, featuring more titles below an image which can be hovered over.
I've tried using jquery with no success, as well as css that alters images upon mouse out – not the behavior I desire.
JQUERY - Attempted Code 1 (not effective):
<script type="text/javascript>
$(document).ready(function() {
$("#picture_links a").hover(function(){
var src = $(this).attr("href");
$("#picture_holder img").attr("src", src);
})
$("#picture_links a").click(function(){
return false;
})
})
</script>
CSS - Alternative Script (functional but not ideal):
/* On mouse image roll over */
img.nohover {
border:0
}
img.hover {
border:0;
display:none
}
a:hover img.hover {
display:inline
}
a:hover img.nohover {
display:none
}