I'm having problems with changing the destination folder of my images when clicking a certain button, and changing the src of this image when hovering over another element, whilst retaining the new chosen folder.
The code I have is here, with the jquery excerpt here:
<script type="text/javascript">
$(document).ready(function(){
imgFldr = 'period-black';
//click the hardware buttons and change the folder where the images are coming from, but not the image itself (by name)
$('#standardBlack').click(function(){
$("#pic").attr("src",'standard-black/'+$("#pic").attr("src").split('/')[1]);
});
$('#standardGold').click(function(){
$("#pic").attr("src",'standard-gold/'+$("#pic").attr("src").split('/')[1]);
});
$('#standardChrome').click(function(){
$("#pic").attr("src",'standard-chrome/'+$("#pic").attr("src").split('/')[1]);
});
//on hovering the 21 or 24 colour options, change the colour of the image but not the folder
$('#black').hover(function(){
$("#pic").attr("src",imgFldr+"/black.jpg");
});
$('#blueGrey').hover(function(){
$("#pic").attr("src",imgFldr+"/blue-grey.jpg");
});
$('#burgundy').hover(function(){
$("#pic").attr("src",imgFldr+"/burgundy.jpg");
});
});
</script>
Whats happening is that once you hover over the src change button, the folder goes back to the original variable, but it should keep the chosen folder.
Any ideas on how this could work properly?