Mouse over 2 ways?

[Hooch]

Hey all.I was hoping it's possible to have a mouse over work 2 ways.I have 6 links on one side that will link to 6 images beside.Is it possible to mouse over the link to change the image related to that link, (this I know is possible)but I would like the ability to mouse over that image to change the look of the link.Just an FYI both the links and images are being drawn from a database.Thanks in advance.

[ShadowMage]

Just give the images a onmouseover event like you would do with the links.

[Hooch]

I think i may have used that option up on the images mouse over.I have the following code to go from B&W thumb to a full color thumb on mouse over.

echo '<a href="link.php" onMouseOver="document.MyImage1.src=\'' . $image1 . '\';" onMouseOut="document.MyImage1.src=\'' . $image1g . '\';" title="' . $linkTo1 . '"><img src="' . $image1g . '" name="MyImage1"  height="' . $newHeight1 . '" width="' . $newWidth1 . '" border="0"></a>';

Just an FYI that's what the mouse over on the links does too.

echo '<a href="link.php" onmouseover="MyImage1.src=\'images/items/' . $image1 . '\'" onmouseout="MyImage1.src=\'images/items/' . $image1g . '\'">' . $collection . '</a>';

[justsomeguy]

So does that work for you, do you still have an issue?

Mouse over 2 ways

Sounds like a Chinese dish.

[Hooch]

This allowing me to mouse over the image to change it to the full color.I can mouse over the text link and the same image will react the same.So we are close.I was hoping to mouse over the image, keep the rollover effect there, but have the corresponding link change it's style.

[justsomeguy]

You would need to make a new class for the different style, and then manually change the class on over and out. It's not going to automatically show the :hover class, if that's what you're going for.

[Hooch]

I should clarify something too.I want the text links to be image rollovers.Here is my working code so far.

<?PHPecho '<table align="center" border="0" cellspacing="0" cellpadding="20" bgcolor="#777777">';echo '<tr>';echo '<td valign="top" align="center">';echo '<a href="hover.php" onmouseover="MyImage1.src=\'images/items/1265209482-1.jpg\'" onmouseout="MyImage1.src=\'images/items/1265209482-g.jpg\'">Link 1</a>';echo '<br />';echo '<a href="hover.php" onmouseover="MyImage2.src=\'images/items/1265205798-1.jpg\'" onmouseout="MyImage2.src=\'images/items/1265205798-g.jpg\'">Link 2</a>';echo '<br />';echo '</td>';echo '<td  width="266" valign="top" align="left">';echo '<a href="hover.php" onMouseOver="document.MyImage1.src=\'images/items/1265209482-1.jpg\';" onMouseOut="document.MyImage1.src=\'images/items/1265209482-g.jpg\';" title="Link 1"><img src="images/items/1265209482-g.jpg" name="MyImage1"  height="414" width="500" border="0"></a>';echo '<a href="hover.php" onMouseOver="document.MyImage2.src=\'images/items/1265205798-1.jpg\';" onMouseOut="document.MyImage2.src=\'images/items/1265205798-g.jpg\';" title="Link 2"><img src="images/items/1265205798-g.jpg" name="MyImage2"  height="398" width="500" border="0"></a>';echo '</td>';echo '</tr>';echo '</table>';?>

This can be viewed here...inspirationsartgallery.com/beta/hover.phpI'm not following you guy. Plus me using the rollovers might change your reply?Thanks in advance

[justsomeguy]

What exactly are you still missing or having problems with? I don't see the links change their style when I mouse over them, but you want them to change style when you mouse over the image? The way to do that is like I described last, your mouse over and mouse out handlers need to manually change the class on the link to use a different style.

[Hooch]

Yes, I want to mouse over the image to change the text rollover.I have added some code for the plain text rollover.

<style type="text/css"><!--/*  =================================  *//*  ====== Subject Matter Rollovers ======  */#menuButton1{height: 41px;width: 133px;overflow: hidden;background: url(images/content/buttons/subjectmatter.png) top left no-repeat;display: block;text-decoration:none;line-height:2.5em;color:#000000;} #menuButton1:hover{color:#FFFF00;line-height:2.5em;background-position: bottom left;}--></style><?PHPecho '<table align="center" border="0" cellspacing="0" cellpadding="20" bgcolor="#777777">';echo '<tr>';echo '<td valign="top" align="center">';echo '<a href="hover.php" onmouseover="MyImage1.src=\'images/items/1265209482-1.jpg\';" onmouseout="MyImage1.src=\'images/items/1265209482-g.jpg\';" id="menuButton1">Link 1</a>';echo '<br />';echo '<a href="hover.php" onmouseover="MyImage2.src=\'images/items/1265205798-1.jpg\';" onmouseout="MyImage2.src=\'images/items/1265205798-g.jpg\';" id="menuButton1">Link 2</a>';echo '<br />';echo '</td>';echo '<td  width="266" valign="top" align="left">';echo '<a href="hover.php" onMouseOver="document.MyImage1.src=\'images/items/1265209482-1.jpg\';" onMouseOut="document.MyImage1.src=\'images/items/1265209482-g.jpg\';" title="Link 1"><img src="images/items/1265209482-g.jpg" name="MyImage1"  height="414" width="500" border="0"></a>';echo '<a href="hover.php" onMouseOver="document.MyImage2.src=\'images/items/1265205798-1.jpg\';" onMouseOut="document.MyImage2.src=\'images/items/1265205798-g.jpg\';" title="Link 2"><img src="images/items/1265205798-g.jpg" name="MyImage2"  height="398" width="500" border="0"></a>';echo '</td>';echo '</tr>';echo '</table>';?>

See the current results here...inspirationsartgallery.com/beta/hover.phpSo I am very close. when you mouse over the "Link1" the rollover changes the backgound imagefor the effect. I want that same result when I mouse over the top image.I hope this is clear enough.I'm not sure on coding the image side. Maybe I have gone about it the wrong wayto this point?Thanks in advance.

[justsomeguy]

You need to create another class with the same properties as the :hover class, e.g.:

.menu_hover{color:#FFFF00;line-height:2.5em;background-position: bottom left;}

Then your over and out handlers on the image need to either add or remove that class to the menu link. You should be able to find plenty of examples online about how to use Javascript to add or remove a class.

[Hooch]

Thanks Guy.I added the css as you typed it out.I then added

document.getElementById(\'link2\').className=\'menu_hover\';

to the onmouseover for the 2nd image. This will be linked to the 2nd link named link2.Still no success, but it's the best solution I can find. Do I need to worry about onmouseout? Thanks for your time and help.

[Hooch]

By changing the css to the above, it's not knowing what image to use, correct?I changed your example to

#menu_hover{background: url(images/content/buttons/link2.png);text-decoration:none;line-height:2.5em;color:#FFFF00;background-position: bottom left;}

Still a no go though

[justsomeguy]

By changing the css to the above, it's not knowing what image to use, correct?

What image to use? I thought when you put your mouse over the image, you just want the link to change to the same style it normally would when you hover over the link. So I'm not sure which image it's supposed to use for the hover state on the link, the hover state you showed didn't have an image on it. You need to set both the class and className properties. I think IE is the only one that uses className. Also, don't have the CSS target an ID if you're going to set it using class and className, make it a class.

[Hooch]

The link is an image rollover link.