exchange image using views/panels and javascript/mouseover

By wb-mh-ms on 26 Jul 2015 at 21:12 UTC

Hi!
I have a "chair"-content type with these fields:
- name
- image

in a first view, i list all the names available and in a second view, i want to display the image according to the chair-name "onmouseover"ed. Means, that when the user "mouseovers" chair2, the image in the second column should change. I use a 2column-panel to display each of both views:

panels 2-column-display:

chair 1 |
chair 2 | image chair 1
chair 3 |
chair 4 |

Anyone could help me with this? Should I use jquery or a css-only-solution? I spend a lot of time on the jquery solution, but couldnt get it to work!

Thanks!!!!!!

Comments

you can use jquery

XandieL commented 27 July 2015 at 00:53

you can use jquery

display all of the images in the right side, then hide them via jquery. Then show then on hover of the same class on the left views.

I like the universe, but she messes with my words
I'm not talking planets or galaxies and the distance just makes it worse.
I know what you're thinking, this probably sounds rehearsed.

thx

wb-mh-ms commented 27 July 2015 at 09:44

thanks for your post! This works for me:

Views
Display "left" (content-pane):
<a class="left left[counter]">[title]</a>
Display "right" (content-pane):
<img class="right right[counter]" src="[uri]" alt="[title]" title="[title]">

Panels:
Column left: content generated by view "left" (text)
Column right: content generated by view "right" (images)

"custom_js.js" (in libraries)

jQuery(document).ready(
function () {
jQuery('.right').each(
	function () {
	jQuery(this).css('display','none');
    }
);
var count=0;
jQuery('.left').each(
	function (count) {
		count++;
		jQuery('.left'+count).mouseover(function(){
			jQuery('.right').each(
				function () {
					jQuery(this).css('display','none');
				});
			jQuery('.right'+count).css('display','block');
		});
		
    }
);
jQuery('.right1').css('display','block');
});