Forums

dodgson

Hey guys, I'm trying to do something that I haven't done before. I want to preload a buttons hover state, when loading a page for the first time. That's the part I can do... I was hoping that when you hover over one of the other buttons the original button that loaded in the hover state would load back to the regular link state.

Is this possible.

TheDoc

CSS Sprites will accomplish this.

http://css-tricks.com/css-sprites-what- ... -use-them/

dodgson

Thank you for the quick response. I appreciate it. I have set-up the buttons using this sprite technique and it works perfectly. The only thing that I'm having trouble with is the idea of having one highlighted btn load. I can do this... but the problem is when I go to another button, I would like the highlighted button (button in hover on load) to go to the down state once the new button is in the hover state. I hope this make sense. I'm starting to confuse myself.

TheDoc

It should do that automatically. Do you have a link to what you're working on?

dodgson

The following is a link to the working site http://www.simsadvertising.com/testSites/pdsV2/index.php. As you can see the insurance Professionals tab is highlighted at the bottom. I would like to be able to hover over the tabs and the insurance professionals tab instantly snaps to the down state. I just want to have it temporarily highlighted on load, to show that their is additional info when you hover over all of the tabs.

Thanks for your help.

TheDoc

Aaahhhh, I see your problem now.

Though, I don't see an easy solution. I will have to think about this one. Anyone else have any suggestions?

ikthius

a temporary solution is to have a different colour for the hover effect and have that colour for the selected state.

I am not that knowledgeable on JavaScript at the moment, I have lost my mojo with it, but I believe JavaScript will be your buddy in this instance.

why not have an onmouse over event and in that event, make the element that your hovering have the new image and turn off the other image at the same time;


function imageOnOff()
{
  getElementById('PropOwner').src=\"new hover image\";
  getElementById('InsProf').src=\"white image\";
}

<a href=\"\" class=\"\" id=\"PropOwner\" onmouseover=\"imageOnOff()\">Prop owner</a>
<a href=\"\" class=\"\" id=\"InsProf\" onmouseover=\"imageOnOff()\">Insurance</a>

this is only an idea, not tested and don't know if it is entirely correct coding wise.

here is a very quick test: use your own image called 1.jpg, 2.jpg, 3.jpg


<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">
<html>
 <head>
  <title> New Document </title>
  <meta name=\"Generator\" content=\"EditPlus\">
  <meta name=\"Author\" content=\"\">
  <meta name=\"Keywords\" content=\"\">
  <meta name=\"Description\" content=\"\">

	<script>
		function imageOn1()
    {
			if(document.getElementById(\"hover1\"))
			{
				document.getElementById('newImage1').src=\"2.jpg\";
			}
    }
		function imageOn2()
    {
			if(document.getElementById(\"hover2\"))
			{
				document.getElementById('newImage2').src=\"3.jpg\";
			}
    }
		function imageOff1()
    {
			if(document.getElementById(\"hover1\"))
			{
				document.getElementById('newImage1').src=\"1.jpg\";
			}
    }
		function imageOff2()
    {
			if(document.getElementById(\"hover2\"))
			{
				document.getElementById('newImage2').src=\"1.jpg\";
			}
    }

	</script>
 </head>

 <body>
  <a href=\"\" class=\"link\" id=\"hover1\" onmouseover=\"imageOn1()\" onmouseout=\"imageOff1()\"><img src=\"1.jpg\" id=\"newImage1\"></a>
	<a href=\"\" class=\"link\" id=\"hover2\" onmouseover=\"imageOn2()\" onmouseout=\"imageOff2()\"><img src=\"1.jpg\" id=\"newImage2\"></a>
 </body>
</html>

//disclaimer, I have been playing with teh code, this has been changed 3 times now, and I think it now shows what it is suppossed to do

not perfect but you will get ideas from this

dodgson

Thanks guys, I really appreciate your efforts. i'm going to give the javascript example a try tomorrow during the day. I will post how things worked out.

Thanks again.

ikthius

"dodgson" said:
Thanks guys, I really appreciate your efforts. i'm going to give the javascript example a try tomorrow during the day. I will post how things worked out.

Thanks again.

you may want to try a function for each link on hover state, a function for each link for non hover state and one function for selected state.

it sounds like a lot of functions, but I tried if statements and it never worked, i think because it is generated by the event.

it may work with if statements and call one function / you may even get a switch to cut it all down, but not entirely sure, and was just wanting a working model last night..... on the javascript people....

apostrophe

I think you guys are over complicating this. I think the simplest solution is jQuery, create a class for the hover state in your CSS, add the class to the element on page load with jQuery and remove it as soon as you mouseover anything else.

treehouse : what would you like to learn today?

Forums

preload hover state, re-set orig if othe button is hovered