Jump to content

Mouse over 2 ways?


Hooch
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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>';

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Edited by Hooch
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...