- A Bravenet.com Forum

This Message Forum is no longer in use

Please use the new Bravenet Help Forums FOUND HERE

Recent Posts

General Forum

This Forum is Locked

Author

Comment

kingjackIVV

Nov 3, 2010 - 6:56PM

cant find the answer please tell me the answer

can someone tell me how to get it so when someone hovers over this
image:

it goes to this
image:

what i want to make here is a button that when someone hovers over the first image it goes to the seconed image and when they click on it it takes them to a webpage< http://gamecrasyfreak.bravehost.com/ >
but i dont now how to do this so please help

thanks in advance for any answers

Browser: IE 7

Email Website

Nov 3rd, 2010 - 6:56 PM

Philo Kvetch

Nov 4, 2010 - 6:40AM

Re: cant find the answer please tell me the answer

OK, here are two methods and a link to a page that shows Two Hover Image Methods. Below is the code for the linked page.

Both method uses CSS. For the first one, I stuck both images together to make a single image. The whole image is displayed, but the image area is limited to half the image width and the right side is hidden. On a hover, the image is shifted left, by one half of the total image width. When the mouse is removed, the image is shifted back.

The second method puts the hover image in the background and the non-hover image in the foreground. On a hover, the foreground image is shifted out of the way to reveal the background.

The code also shows how you can include separate CSS definitions to handle different hover effects, in the same document.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Hover Images</title>

<style type="text/css">

<!-- 

a.dual_image {display:block; width:130px; height:22px; overflow:hidden;}

a.dual_image:hover img {margin-left:-130px;}

a.bg_image {display:block; width:130px; height:22px; background:url("button1over.png") left top no-repeat;}

a.bg_image:hover img { left:-999em; top:-999em;}

 /* ie6 needs his fix*/  .dual_image a:hover {zoom:1;}   

-->

</style>

</head>

<body>

<div><p>Both images concatenated. A mouse over will shift the image left and right.</p>

<a href="http://" class="dual_image" ><img src="dual_image.jpg" alt="" border="0" /></a>

</div>

<div><p>The hover image is defined as a background. The non-hover image is then overlaid in the

foreground. A mouse over will shift the foreground image out of the way.</p>

<a href="http://" class="bg_image" ><img src="button1up.png" alt="" border="0" /></a>

</div>

</body>

</html>

This can also be done with Javascript, but that needlessly complicates things. For more methods do a google search on the string "html hover image link".

Browser: Firefox

OS: Solaris, Redhat, Fedora, Suse

Website

Nov 4th, 2010 - 6:40 AM

kingjackIVV

Nov 4, 2010 - 11:37AM

Re: cant find the answer please tell me the answer

thanks now i can finally have my main navigation on my website look pro

Browser: IE7

Email Website

Nov 4th, 2010 - 11:37 AM

kingjackIVV

Nov 4, 2010 - 5:38PM

Re: cant find the answer please tell me the answer

out of the two codes you showed me i was abe to get this one to work

Code:

<style type="text/css">

<!-- 

a.bg_image {display:block; width:130px; height:22px; background:url("Images/button1over.png") left top no-repeat;}

a.bg_image:hover img { left:-999em; top:-999em;}

-->

</style>

<div>

<a href="http://gamecrasyfreak.bravehost.com/" class="bg_image" ><img src="Images/button1up.png" alt="" border="0" /></a>

</div>