Rollover / image swap in CSS?

Page 1 of 1

3 Replies - 2781 Views - Last Post: 31 July 2009 - 02:06 PM

#1 tscott  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 370
  • Joined: 30-January 09

Rollover / image swap in CSS?

Posted 30 July 2009 - 11:41 AM

http://www.carroll.edu/ Does anyone know how they are achieving this rollover in CSS? Here is my code and I can't seem to get this to work. Please refer to the class .about and the id #aboutov in my css


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jacqueline Zinn Design</title>
<style type="text/css">
#body
{
	margin: 100px 0 0 0;
	background-color: #ffffcc;
	font-size: 90%;
	text-align: center;
	font-family: arial, helvetica, sans-serif;
}


	
#outsidebox
{
	background-color: #393a43;
	margin: 0 auto;
	width: 860px;
	height: 580px;
	padding: 0;
	text-align: center;
}
#header
{
	background-color: #3C2214;
	float: left;
	height: 125px;
	width: 852px;
	margin: 4px 4px 2px 4px;
	padding: 0;
}
.about
{
	float: left;
	margin: 100px 20px 0 40px;
}
#aboutov
{
	background-image: url(images/aboutov.gif);
	float: left;
	margin: 100px 20px 0 40px;
}


#jzlogo
{
	padding: 5px;
	float: right;
	
}
#border
{
	background-color: #fff;
	background: (images/sides.jpg);
	padding: 0px;
	margin: 0px;
	
}

#leftnav
{
	background-color: #3c2214;
	float: left;
	width: 240px;
	height: 408px;
	padding: 40px 0 0 0;
	margin: 0 2px 2px 3px;
}

#middle
{
	background-color: #b5c6b4;
	width: 602px;
	height: 430px;
	float:left;
	padding: 0 4px; 
	
}
#page1
{
	padding: 10px 0 0 0;
}

#ourwork
{
	float: right;
	padding: 15px 70px 0px 0px; /* moves right to left */
	margin: 180px 0 0 10px; /* moves down */
}
</style>
</head>

<body>
<div id="outsidebox">

	<div id="header">
		<a href="about.html" class="about" id="aboutov" style="text-decoration:none"> <img src="images/about.gif" height="24" width="81" style="border: none" /></a>

		<img src="images/jz.gif" alt="home" class="jzlogo" id="jzlogo" />
		
	</div>
	
		<div id="border">
		</div>
	
			<div id="leftnav">
			</div>
			<div id="middle">
			<img src="images/page1.gif" alt="home" class="page1" id="page1" height="377" width= "602" />
			</div>
	

</div>

</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: Rollover / image swap in CSS?

#2 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 200
  • View blog
  • Posts: 1,561
  • Joined: 20-January 09

Re: Rollover / image swap in CSS?

Posted 30 July 2009 - 03:04 PM

Are you talking about the sliding images, because beyond that I couldn't find an image rollover?? And that still isn't technically an image rollover.

--

Greg
Was This Post Helpful? 0
  • +
  • -

#3 Dogstopper  Icon User is offline

  • The Ninjaducky
  • member icon



Reputation: 2696
  • View blog
  • Posts: 10,556
  • Joined: 15-July 08

Re: Rollover / image swap in CSS?

Posted 30 July 2009 - 03:09 PM

Make the links images, one white text and one orange text FOR each link that you need. Look here fore the javascript and css way: http://www.webvamp.c...mage-rollovers/

Additionally, here's a more advanced tutorial(read the first one first): http://www.webvamp.c...r-menu/#example

This post has been edited by Dogstopper: 30 July 2009 - 03:14 PM

Was This Post Helpful? 0
  • +
  • -

#4 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 200
  • View blog
  • Posts: 1,561
  • Joined: 20-January 09

Re: Rollover / image swap in CSS?

Posted 31 July 2009 - 02:06 PM

The thing is though their navigation isn't using images, but yes your would use the method if you desire to use an image nav.

But if you are simply wanting to use text:


<ul>
   <li><a href="link.html">Link</a>
</ul>


CSS:

ul li a:link, ul li a:visited {
   color: red;
   text-decoration: none;}

ul li a:hover {
   text-decoration: underline;}


The key is in the :psuedo elements - let us know if you need any help with either method.

--

Greg
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1