1 Replies - 736 Views - Last Post: 04 May 2008 - 07:15 AM

#1 mogstronaut_  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 47
  • Joined: 18-April 08

Changing content colors when anchors are active

Posted 04 May 2008 - 05:49 AM

Hey guys,
Basically I'm trying to get the background to change on these <h2> question headings. My code so far is:
<!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=iso-8859-1" />
<title>asdasd</title>
<link href="mystyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {background-color: #dcdcdc;}-->
</style></head>

<body>

<h1 id="top">Widets and What's-its</h1>

<h5><span class="black">home</span>	   <span class="black">contact us</span>   <span class="black">products</span>   <span class="black">services</span>   <span class="black">faq</span></h5>

<h3>faq.</h3>

<span class="questions">
<ul class="disc">
<li><h2><a href="#answer1">Q. What are widgets?</a></h2></li>
<li><h2><a href="#answer2">Q. Why should I buy a widget?</a></h2></li>
<li><h2><a href="#answer3">Q. Where do widgets come from?</a></h2></li>
<li><h2><a href="#answer4">Q. What are widgets made of?</a></h2></li>
<li><h2><a href="#answer5">Q. How do I use my widget?</a></h2></li>
<li><h2><a href="#answer6">Q. Who uses widgets?</a></h2></li>
</ul></span>

<h4 id="answer1">Q. What are widgets? <a href="#top"  class="a">
top</a></h4>
<p>A. Widgets are a smaller, more compact version of what's its.</p>

<h4 id="answer2">Q. Why should I buy a widget?<p1><a href="#top"  class="a">top</a></p1>
</h4> 
<p>A. Because widgets will solve all of your problems.</p>

<h4 id="answer3">Q. Where do widgets come from?<a href="#top"  class="a">top</a></p1>
</h4>
<p>A. Widgets are harvested from the Amazon rain forest by little green gnomes.</p>

<h4 id="answer4">Q. What are widgets made of?<a href="#top"  class="a">top</a></p1>
</h4>
<p>A. Widgets are made of primordial, esoteric matter, and as such could cause your head to explde into one of seven fun-filled colours.</p>

<h4 id="answer5">Q. How do I use my widget?<p1><a href="#top"  class="a">top</a></p1>
</h4>
<p>A. You must summon a troll using your propeitary magic wand and book of spells who will teach you everything you need to know about your widget.</p>

<h4 id="answer6">Q. Who uses widgets?<a href="#top"  class="a">top</a></p1>
</h4>
<p>A. Everybody!</p>
</body>
</html>


and for the CSS:
/* CSS Document */

<style type="text/css">

body {
	background color: #dcdcdc;
}

ul.circle {
	list-style-type: circle
}

span.black {
	background-color:black;
	padding: 7px;
}

h1 {
	margin: 0;
	padding: 20px;
	background-color: #939393;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: -3px;
	color: #FFFFFF;
	margin: 0;
}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: underline;
	line-height: 40%;
	font-size: 14px;
	color: #000000;
}


h3 {
	margin: 0px;
	padding: 0px;
	background-color: #939393;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: -3px;
	color: #FFFFFF;
}

h4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 	18px;
	color: #000000;
		
}

h5 {
	padding: 10px;
	text-decoration: underline;
	border-top: 7px solid #000000;
	background-color: white;
	color: white;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
}

p {
	font-family: Arial, Helvetica, sans-serif;
	padding: 12px;
  	margin: auto;
  	border: 2px solid #000000;
}

p1 {
	color: white;
	text-decoration: underline;
}

.heading a:active {
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: underline;
	line-height: 40%;
	font-size: 30px;
	color: #000000;
}

.questions a:link {
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: underline;
	line-height: 40%;
	font-size: 14px;
	color: #000000;
}

.questions.a:visited {
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: underline;
	line-height: 40%;
	font-size: 14px;
	color: #000000;
}

a.a:link {   
 	font-family: Verdana, Arial, Helvetica, sans-serif;
 	font-size: 14px;
 	color: white;
}

a.a:visited {   
 	font-family: Verdana, Arial, Helvetica, sans-serif;
 	font-size: 14px;
 	color: white;
}
</style>


I just want the background of those headings to change to orange when the links up the top are clicked. Could someone tell me how to do this, please?

This post has been edited by mogstronaut_: 04 May 2008 - 05:50 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Changing content colors when anchors are active

#2 baavgai  Icon User is offline

  • Dreaming Coder
  • member icon

Reputation: 5906
  • View blog
  • Posts: 12,810
  • Joined: 16-October 07

Re: Changing content colors when anchors are active

Posted 04 May 2008 - 07:15 AM

You'd do it in the anchor. Unfortunately, because your anchor is on the same page, the "visited" property won't do it for you.

You can try a little javascript.
<a href="#answer1" onclick="this.style.background='#FF8C00'">

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1