help with double image rollovers

**moscarda** · 01-05-2009, 01:04 PM

please see the page i'm working on:

http://moscarda.com/dd/test.html

there are five rollovers on the left A,B,C,D,E

i would like the brain image on the right to change from its current image (brain_x.gif) to brain_a.gif, brain_b.gif, brain_c.gif, brain_d.gif, brain_e.gif, respectivly, onmouseover. then it should revert back to default onmouseout. i've seen tutorials elsewhere, but they all use the href, which i will need later to link to the page that the rollovers refer to.

once you view the page, it should be clear what i'm trying to do.

thank you in advance for your help! love you guys...

**Snookerman** · 01-05-2009, 02:12 PM

You can use jQuery for that, just add this to your head section:

HTML Code:

<script type="text/javascript" src= "http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js">
</script>
<script type="text/javascript">
    $(function(){
        $('img.brains').hide();
        $('img.swap').hover(function(){
			$('#mainImage').hide();
            $('#' + $(this).attr('name')).show();
        }, function(){
            $('#' + $(this).attr('name')).hide();
			$('#mainImage').show();
        });
    });
</script>

Then give all the swap images (the text ones) a class value of "swap" and a name value that is the same as the id value for the brain images. So for example:

Code:

<img class="swap" id="swap3" height="39" width="438" border="0" name="c_base" alt="" srcover="media/c_over.gif" src="http://moscarda.com/dd/media/c_base.gif" oldsrc="http://moscarda.com/dd/media/c_base.gif"/>

Then the brain image that corresponds to this one should have the id value "c_base". Last thing to do is give all the brains that should be hidden in the beginning the class value "brains" and put them all next to each other in the code right after the one you have now with the regular brain. You can of course change all these values, I think it's pretty simple to find them in the script, if not just ask.

Good luck!

**vwphillips** · 01-05-2009, 04:40 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="author" content="{mdc}" />
		<title>haputnam.com</title>
		<link href="http://moscarda.com/dd/media/body.css" rel="stylesheet" type="text/css" />
		<link href="http://moscarda.com/dd/media/trail.css" rel="stylesheet" type="text/css" />

		<script type="text/javascript" src="http://moscarda.com/dd/media/trail.js"></script>
		<script type="text/javascript" src="http://moscarda.com/dd/media/rollover.js"></script>
<script  type="text/javascript">
/*<![CDATA[*/

function Swap(id,src){
 var obj=document.getElementById(id);
 obj.src=obj.src.substring(0,obj.src.lastIndexOf('/')+1)+src;
}
/*]]>*/
</script>	</head>

	<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
		<center>
			<table width="64" border="1" cellspacing="2" cellpadding="0">
				<tr height="583">

					<td width="1004" height="583" background="media/header.jpg">
						<table width="1004" border="0" cellspacing="0" cellpadding="0" height="583">
							<tr height="180">
								<td height="180">&nbsp</td>
							</tr>
							<tr>
								<td>
									<table width="1004" border="0" cellspacing="0" cellpadding="0">
										<tr>

											<td>
												<table width="64" border="0" cellspacing="0" cellpadding="0" height="100%">
													<tr>
														<td align="right">&nbsp;</td>
													</tr>
													<tr height="55">
														<td align="right" height="55"><img id="swap1" onmouseover="Swap('mainImage','brain_a.gif');" onmouseout="Swap('mainImage','brain_x.gif');" src="http://moscarda.com/dd/media/a_base.gif" srcover="media/a_over.gif" alt="" name="a" height="39" width="438" border="0" /></td>
													</tr>
													<tr height="55">

														<td align="right" height="55"><img id="swap2" onmouseover="Swap('mainImage','brain_b.gif');" src="http://moscarda.com/dd/media/b_base.gif" srcover="media/b_over.gif" alt="" name="b_base" height="39" width="438" border="0" /></td>
													</tr>
													<tr height="55">
														<td align="right" height="55"><img id="swap3" onmouseover="Swap('mainImage','brain_c.gif');" src="http://moscarda.com/dd/media/c_base.gif" srcover="media/c_over.gif" alt="" name="c_base" height="39" width="438" border="0" /></td>
													</tr>
													<tr height="55">
														<td align="right" height="55"><img id="swap4" onmouseover="Swap('mainImage','brain_d.gif');" src="http://moscarda.com/dd/media/d_base.gif" srcover="media/d_over.gif" alt="" name="d_base" height="39" width="438" border="0" /></td>
													</tr>
													<tr height="55">

														<td align="right" height="55"><img id="swap5" src="http://moscarda.com/dd/media/e_base.gif" srcover="media/e_over.gif" alt="" name="e_base" height="39" width="438" border="0" /></td>
													</tr>
													<tr>
														<td align="right">&nbsp;</td>
													</tr>
												</table>
											</td>
											<td><img id="mainImage" src="http://moscarda.com/dd/media/brain_x.gif" alt="" height="403" width="521" border="0" /></td>
										</tr>

									</table>
								</td>
							</tr>
						</table>
					</td>
				</tr>
		</center>
	</body>

</html>

Thread: help with double image rollovers

Thread Tools

Search Thread

help with double image rollovers

Bookmarks

Bookmarks

Posting Permissions