CSS Hover and Visited effects

using images as links.

Page 1 of 1

11 Replies - 3185 Views - Last Post: 31 March 2009 - 12:56 PM

#1 mdkallas  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 25-March 09

CSS Hover and Visited effects

Post icon  Posted 31 March 2009 - 08:08 AM

html coding:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link href='http://i212.photobucket.com/albums/cc284/mdkallas/mfavicon.png' rel='icon' type='image/jpg'/>
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
<meta name="MSSmartTagsPreventParsing" content="true"/>
<meta content="blogger" name="generator"/>
<title>{Blog} :: Misti Kallas Designs</title>
<link rel="stylesheet" media="all" href="style.css" type="text/css"/>

</head>

<body> 
		 
	  <div id="header">
		  <div id="rssemailhomenav">
			  <ul>
				<li id="rss"><a href="http://feeds2.feedburner.com/MistiKallasDesigns"><img src="http://i212.photobucket.com/albums/cc284/mdkallas/blog%20re-design/rssbutton.png" border="0' alt="rss button"/></a></li>
				<li id="email"><a href="mailto:[email protected]"><img src="http://i212.photobucket.com/albums/cc284/mdkallas/blog%20re-design/emailbutton.png" border="0" alt="email button"/></a></li>		  
				<li id="home"><a href="http://mdkjewelrydesigns.blogspot.com"><img src="http://i212.photobucket.com/albums/cc284/mdkallas/blog%20re-design/home.png" border="0" alt="home button"/></a></li>
			   </ul>
		   </div> <!--This ends the RSS EMAIL HOME Nav-->	
	  </div><!--This ends the Header-->
	 
	 
		  
	 <div id="twitter">
		 <a href="http://twitter.com/mistikallas"><img src="http://i212.photobucket.com/albums/cc284/mdkallas/twitteractivelink.png" border="0" alt="twitter active link"/></a>
	 </div><!--This ends the Twitter link-->
		   
	   <div id="header-image"> <!--This is the location of your header image.-->
		   <img src="http://i212.photobucket.com/albums/cc284/mdkallas/banner958.png" border="0" alt="banner 958"/>
	   </div> <!--This ends the header-image-->

	   


	   <div id="page-wrap"><!--This is where the maincontent bckgrnd, posts, other nav, favorite sites bckgrnd will be placed-->
	   
		  <div id="maincontent">
			 <img src="http://i212.photobucket.com/albums/cc284/mdkallas/maincontent2.png" border="0" alt="main content 2"/>
			   <h2>Post Title</h2>
			   <p>
		   This is where you will get a brief description of my lastest post.  It will be 1 paragraph at the most. 
			
		   <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies blandit sem. Duis et nunc. Fusce vel velit. Aliquam lectus. Aliquam erat volutpat. Quisque nec risus vel erat sodales volutpat. 
	   Pellentesque nec justo et risus placerat ornare. Pellentesque a enim. Duis libero. Aliquam iaculis viverra purus. Praesent est. Morbi ante. Suspendisse sagittis odio. Aenean vitae ligula.
	   <br /> <br />	Generated 1 paragraph, ### of words, #### bytes of Lorem Ipsum<br />
			  </p>								
		  </div><!--This ends the Main Content-->
		 
		  <div id="date-stamp">
			 <img src="http://i212.photobucket.com/albums/cc284/mdkallas/blog%20re-design/datestamp.png" border="0" alt="date stamp"/>
		  </div><!--This ends the date-stamp-->
		  

		  <div id="postsflickrrecipesnav">
			   <ul>
				   <li id="my designs"><a href="http://mistikallas.blogspot.com"><img src="http://i212.photobucket.com/albums/cc284/mdkallas/mydesignsactivelink.png" border="0" alt="my designs active link"/></a></li>
				   <li id="posts"><a href="http://mdkjewelryposts.blogspot.com"><img src="http://i212.photobucket.com/albums/cc284/mdkallas/postsactivelink.png" border="0" alt="posts active link"/></a></li>
				   <li id="flickr"><a href="http://flickr.com/photos/mdkjewelrydesigns"><img src="http://i212.photobucket.com/albums/cc284/mdkallas/flickractivelink.png" border="0" alt="flickr active link"/></a></li>
				   <li id="recipes"><a href="http://mdkjewelryrecipes.blogspot.com"><img src="http://i212.photobucket.com/albums/cc284/mdkallas/Recipesactivelink.png" border="0" alt="Recipes active link"/></a></li>
			   </ul>
		 </div><!--This ends the posts flickr recipes nav-->

		 <div id="about-me">
			  <a href="http://mdkjewelryme.blogspot.com"><img src="http://i212.photobucket.com/albums/cc284/mdkallas/aboutmeactivelink.png" border="0" alt="about me active link"/></a>
		 </div><!--This ends the About Me link-->
		 
		 <div id="favorite-sites">
			<a href="http://mdkjewelryfavorites.com"><img src="http://i212.photobucket.com/albums/cc284/mdkallas/favoritesitesactivelink.png" border="0" alt="favorite sites active link"/></a>
		 </div><!--This ends the Favorite Sites link-->
		  
	   </div><!--This ends the Page-Wrap section-->

	   <div id="footer">
		   <img src="http://i212.photobucket.com/albums/cc284/mdkallas/footer.png" alt="footer"/> 
	   </div>
 </body>
</html>


CSS coding:
	   * {
	margin: 0;
	padding: 0;
		}
BODY
  {
		background: #B3C754 url(http://i212.photobucket.com/albums/cc284/mdkallas/bckgrndimage.jpg) no-repeat top center;
  }

#header
   {
		border: 0px dashed red;
		width: 956px;
		height:225px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 25px;
   }
	
#rssemailhomenav
	{
		border: 0px solid black;
		width: 350px;
		height: 78px;
		margin-top: 30px;
		margin-right: 18px;
		margin-bottom: 0px;
		margin-left: 165px;
	}
	
#rssemailhomenav ul 
	{
		margin: 0px;
		padding: 0px;
		list-style-type: none;
	}
	
#rssemailhomenav ul li 
	{
		display: inline;
	}		


#rssemailhomenav ul li a
	{
		text-decoration: none;
		width: 120px;
		height: 58px;
	}
	
#header-image
	{
		border: 0px solid blue;
		width: 956px;
		height: 148px;
		margin-top: -20px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 25px;
	}
		
#twitter 
	{
		border: 0px solid blue;
		width: 58px;
		height: 58px;
		margin-top:  -222px;
		margin-right: 0px;
		margin-bottom: auto;
		margin-left: 805px;	
	}
	

#page-wrap
		{
		border: 0px dashed black;
		width: 956px;
		height: 800px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 25px;
		}

#maincontent
		{
		border: 0px solid green;
		width: 725px;
		height: 492px;
		margin-top: 50px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 65px;
		}
h2
	{
		margin-top: -365px;
		margin-left: 75px;
		padding-left: 45px;
		color: #381f14;
	}
				
p  
	{
		border: 0px solid yellow;
		font-size: medium;
		text-align:justify;
		width: 525px;
		height: 225px;
		margin-top: -15px;
		margin-right: auto;
		margin-bottom: auto;
		margin-left: 55px;
		padding-top: 25px;
		padding-left: 65px;
		color: #381f14;
	}
		
#postsflickrrecipesnav
	{
		border: 0px solid black;
		width: 650px;
		height: 170px;
		margin-top: -284px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 165px;	   
	}
	
#postsflickrrecipesnav ul
	{
	   margin: 0px;
	   padding: 0px;
	   list-style-type: none;
	}  
	
#postsflickrrecipesnav ul li
	{
		display: inline;		
	} 
	
#postsflickrrecipesnav ul li a
	{
		text-decoration: none;
		width: 0px;
		height: 0px;
	}			
	 

#about-me
   {
		border: 0px solid yellow;
		width: 134px;
		height: 136px;
		margin-top: 316px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 130px;
   }

#favorite-sites
	{
		border: 0px solid pink;
		width: 320px;
		height: 120px;
		margin-top: -143px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 639px;
	}

#date-stamp
	{
		border: 0px solid yellow;
		width: 117px;
		height: 117px;
		margin-top: -250px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 52px;
	}

#footer
   {
		border: 0px dashed white;
		width: 956px;
		height: 85px;
		margin-top: -30px;
		margin-left: 0px;
		margin-left: 26px;
   }
	 


i am using images for my 2 different sets of nav links on my template because the font in my graphics is not a web standard font.

i have 3 different images, one for the link itself, one for the hover effect and the last one for the visited effect. the difference in the images in only the font color.

as you can see in my html coding that i have giving my <li> id's. how can i code each link with the hover image and the visited image?

here is an example of the link images:

link image example:
Posted Image

hover effect image example:
Posted Image

visited effect image example:
Posted Image

i have read the w3schools website, but i am just not grasping this part of it.

thank you in advance.

Is This A Good Question/Topic? 0
  • +

Replies To: CSS Hover and Visited effects

#2 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: CSS Hover and Visited effects

Posted 31 March 2009 - 08:19 AM

You'll need three rules for each link: normal, hover and visited. I'll use your first nav item as an example:

li#rss a {
   background-image:url(myNormalImage.jpg);
}

li#rss a:hover {
   background-image:url(myHoverImage.jpg);
}

li#rss a:visited {
   background-image:url(myVisitedImage.jpg);
}



As you can see, the first ruleset points to any <a> element in the <li> with an id of 'rss'. The following ones are specific for the hover and visited states.

Hope that helps!
Was This Post Helpful? 1
  • +
  • -

#3 mdkallas  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 25-March 09

Re: CSS Hover and Visited effects

Posted 31 March 2009 - 08:42 AM

thank you!

i had just left out the li when i tried to code it the first time.

i did it like this #rss a.......

once again you have helped me. :)
Was This Post Helpful? 0
  • +
  • -

#4 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: CSS Hover and Visited effects

Posted 31 March 2009 - 09:10 AM

Actually, the example I gave you should work without the li before the #. Putting it in is just a good practise because it means "any li with an id of" rather than "any element with an id of". Never mind though, it working is the main thing!
Was This Post Helpful? 0
  • +
  • -

#6 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: CSS Hover and Visited effects

Posted 31 March 2009 - 10:14 AM

Another cool way to do it, so that your browser only loads 1 image is to place all of them in sequential order, then you set the width of the li to fit just one.

For example, here is 1 image with all of your button states:
Attached Image

Now you would set your li settings as such:

li {
   background: url(../buttonimage.png) top left no-repeat;
   width: 151px;}

   li a:hover {
	   background: url(../buttonimage.png)  -151px  top no-repeat;}
  
   li a:visited {
	   background: url(../buttonimage.png) -302px top no-repeat;}




That's the general idea, if you need any help with it let me know.
Was This Post Helpful? 1
  • +
  • -

#7 capty99  Icon User is offline

  • i am colt mccoy
  • member icon

Reputation: 99
  • View blog
  • Posts: 10,081
  • Joined: 26-April 01

Re: CSS Hover and Visited effects

Posted 31 March 2009 - 10:54 AM

Agreed - sprites are the way of the future.

at first look you say, thats a pain but then its so much easier.
Was This Post Helpful? 1
  • +
  • -

#8 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: CSS Hover and Visited effects

Posted 31 March 2009 - 11:15 AM

I like this idea a lot. :^:

It's a better plan than the one I suggested because of the single load, and I'm going to use it in future. Cheers Greg!
Was This Post Helpful? 0
  • +
  • -

#9 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: CSS Hover and Visited effects

Posted 31 March 2009 - 12:00 PM

WOW! I didn't know that this was so unheard of, I use it whenever my client forces me to use graphical navigation. I didn't come up with it sadly - you can see a full tut here ( a little too in-depth for my tastes):

http://www.webdesign...anced-css-menu/
Was This Post Helpful? 1
  • +
  • -

#10 mdkallas  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 25-March 09

Re: CSS Hover and Visited effects

Posted 31 March 2009 - 12:31 PM

Thanks all for your helpful suggestions.

I have heard of Sprites from Chris Coyier from http://CSS-Tricks.com. He has a video regarding Sprites. I never finished the video because I felt like it was way over my head. :) Since I am new to HTML & CSS coding. I am very interested in less load time, so I am intrigued enough to bite the bullet and try it.

#1 question is this, do I need to go back into Gimp and get all of my images for one link into one image or is this done in the CSS stylesheet?

#2 question does this go after my coding for #rssemailhomenav ul li a
and before #header-image coding?

I am a huge fan of Web Designer Wall site as well.
Was This Post Helpful? 0
  • +
  • -

#11 mdkallas  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 25-March 09

Re: CSS Hover and Visited effects

Posted 31 March 2009 - 12:38 PM

Also, I had a 3rd question about this. Do I need to remove my img src codes from the index.html file?

I have all of my images except my background image in the html file.
Was This Post Helpful? 0
  • +
  • -

#12 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: CSS Hover and Visited effects

Posted 31 March 2009 - 12:52 PM

Quote

#1 question is this, do I need to go back into Gimp and get all of my images for one link into one image or is this done in the CSS stylesheet?


Yes, you do this in a graphics editor of some sort, Gimp, Photoshop, Fireworks, etc.


Quote

#2 question does this go after my coding for #rssemailhomenav ul li a
and before #header-image coding?


Yes. You shove those elements into the anchor tag of the li, unless you have your li set to block. Here is how I would set it up:

HTML
<ul id="mainNav">
	<li><a href="link1.html"><span>Link 1</span></a></li>
</ul>




CSS:

#mainNav li a {
	display: block;
	height: 85px;
	width: 151px;
	background: url(../myimagepath.png) top left no-repeat;}

	 #mainNav li span {
			   /* This is here so that when someone comes to your site with styles turned off (ie: cell phone, text only browser) they will still have a link */
			  display: none;}

	#mainNav li a:hover {
		  background: url(../myimagepath.png) -151px top no-repeat;}

	#mainNav li a:visited {
		  background: url(../myimagepath.png) -302px top no-repeat;}

Was This Post Helpful? 0
  • +
  • -

#13 mdkallas  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 25-March 09

Re: CSS Hover and Visited effects

Posted 31 March 2009 - 12:56 PM

Greg,
Thank you for the fast reply. I will give it a try later.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1