How to change lots of elements on a page on mouseover

[FrankieL]

Hello,
I have built a page where you click on the thumbail images and get taken to a new page to see the large image and it's corresponding info.
See:


I would like to change it so that the images and corresponding info changes instantly on mouseover.
Please could you give me some idea of how I can go about doing it.

Would really appreciate any help on this.
Thank you for your time.
Frankie

[jscheuer1]

http://www.dynamicdrive.com/dynamici...thumbnail2.htm

And if that's not exactly what you're looking for, it probably can be adapted.

In fact several adaptations of it already exist as requested by various folks in these forums, so let us know if you need a tweak.

[SwiftReal]

http://www.mikemackay.co.uk/playgrou...ge-hover-demo/

This might be of interest too.

[FrankieL]

Can't say how grateful I am to discover this forum.
Thank you both for your replies.

[FrankieL]

http://www.dynamicdrive.com/dynamici...thumbnail2.htm

And if that's not exactly what you're looking for, it probably can be adapted.

In fact several adaptations of it already exist as requested by various folks in these forums, so let us know if you need a tweak.

Hello jscheuer1,
Thank you for your reply. I have tried but it doesn't seem to do what I need as only has one item appears on mouseover. And I don't know how to write javascript to modify it.

Basically, this is what I want it to do:
My page contains three div's.
Div1 holds the (multiple) small images.
Div2 holds the (1) large image.
Div3 holds the text.
I would like that when a small image is moused over the corresponding large image appears in div2, and at the same time, the corresponding text changes in div3.
If you were to show me an example hopefully (!) I could go from there. From this forum I can see that you are an amazing helper, so I have hope.
Any help is appreciated.

[jscheuer1]

Setup the script as per the instructions. Then in the head of the page add this script after the thumbnailviewer2.js script:

<script type="text/javascript">
jQuery(function($){
	$('a[rel=enlargeimage]').bind('click mouseenter', function(e){
		if(e.type === 'click'){e.preventDefault(); return;}
		var infodiv = /\binfodiv *: *([^\b]+)\b/.exec(this.rev), $infotarget,
		$target = $('#' + /\btargetdiv *: *([^\b]+)\b/.exec(this.rev)[1]);
		if(infodiv){
			infodiv = $('#' + infodiv[1]);
			$infotarget = $('#' + infodiv.get(0).className).html(infodiv.html() || '');
			$target.data('$infotarget', $infotarget.data('trigger', this));
		} else if (($infotarget = $target.data('$infotarget')) && $infotarget.data('trigger') !== this){
			$infotarget.empty();
		}
		
	});
});
</script>

And add this stylesheet to the head of the page:

<style type="text/css">
.infoarea {
	visibility: hidden;
	position: absolute;
	top: -30000px;
	left: -30000px;
}
</style>

or put its rules in an existing stylesheet for the page.

What this allows you to do is in addition to the loadarea div where the larger images (the link's href attribute) and title attribute (if any) will show up, you may have another division, give it an id of 'infoarea':

<div id="infoarea"></div>

Put it anywhere you want it on the page. Style it however you like (width, height, colors, font, etc.) It's different than .infoarea, it's #infoarea in a stylesheet or you may style it inline.

Now all you need to do is make up your detailed information divisions and associate them with each trigger. For example, if you have a trigger like:

<a href="some.jpg" rel="enlargeimage" rev="targetdiv:loadarea" title="Whatever, or there could be no title">Link Text or Thumbnail img tag</a>

You can add the highlighted:

<a href="some.jpg" rel="enlargeimage" rev="targetdiv:loadarea,infodiv:someid" title="Whatever, or there could be no title">Link Text or Thumbnail img tag</a>

Then at the bottom of the page, right before the closing </body> tag you can put:

<div id="someid" class="infoarea">
Detailed information About some.jpg This can go on and on and have HTML tags in it including link and/or image tags in it.
</div>

Do that for as many as you want/need, using a unique id for each one. Example with two triggers:

<a href="some.jpg" rel="enlargeimage" rev="targetdiv:loadarea,infodiv:someid" title="Whatever, or there could be no title">Link Text or Thumbnail img tag</a> 
<a href="someother.jpg" rel="enlargeimage" rev="targetdiv:loadarea,infodiv:someotherid" title="Whatever, or there could be no title">Link Text or Thumbnail img tag</a>

Then at the bottom of the page, right before the closing </body> tag you can put:

<div id="someid" class="infoarea">
Detailed information About some.jpg This can go on and on and have HTML tags in it including link and/or image tags in it.
</div>
<div id="someotherid" class="infoarea">
Detailed information About someother.jpg Like the other one, this can go on and on and have HTML tags in it including link and/or image tags in it.
</div>

If you want more help, please post a link to the page on your site that contains the problematic code so we can check it out.