PDA

View Full Version : 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 (http://jquery.com/) for that, just add this to your head section:

<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:

<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
<!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>