CODEWITHSUNDEEP
javascriptjqueryhtmlcsshyperlink
HappyHands31
HappyHands31

Reputation: 4101

Javascript Function that changes Text Color, Hyperlink Color, and Image

enter image description here

Hi,

I need help with a class assignment. We were given an HTML file for a pretend business, "Castaway Vacations LLC". The first step in the assignment is to create a javascript function that changes the Text Color, Hyperlink Color, and Image when a particular link is clicked. So when the "Romantic" link is clicked, for example, the text that reads "Select Mood" will change to red, along with all other text on the page (including the other hyperlinks). Clicking this link will also change the image. One thing that's tricky about the file that our teacher sent is that there isn't a matching CSS file - I created one myself that contains the class colors, but besides that, all the other styles are inline, which I'm not used to. Here is the JSfiddle link to my code:

UPDATE!

I've gotten the code down for changing text color and image, but the hyperlink colors still aren't changing. You can see my attempt at changing them with the function named colorLinks in the updated javascript. Unfortunately, not only does this function not work, it's also causing the previous (good) functions to not work as well. Thanks for your help.

http://jsfiddle.net/HappyHands31/twkm12r2/1/

HTML: 

<!DOCTYPE html>
<html>
<head>
<title>Castaway Vacations, LLC</title>
</head>
<body leftmargin=0 rightmargin=0 bgcolor=#ffcc99 
text=#993300 link=#993300 vlink=#996633>

<br>
<table width=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=95% align="right" bgcolor=#ffffff>
<img src="castaway_logo.jpg">
<br>
<font face=arial>Vacations, LLC</font></td>
<td bgcolor=#ffffff>&nbsp;</td>  
</tr>
</table>
<br><br>
<div align="center">
<table width=600>
<tr>
<td width=300 valign="top">
   <font face=arial size=3><b><i>Select Mood...</i></b></font><br><br>
   <font face=arial>
   <a id="one" href="#">Romantic</a><br><br>
   <a id="two" href="#">Adventure</a><br><br>
   <a id="three" href="#">Relaxation</a><br><br>
   <a id="four" href="#">Family</a><br><br><br>
   <br>
   <a href="#">Request A Brochure...</a>
   </font>
</td>
<td align="center"><img id="original.jpg" src="orig_main.jpg">
<br>   <i>Your Vacation Awaits!

</tr>
</center>
<script src="castaway.js"></script>
</body>
</html>
</DOCTYPE>

Javascript: 

document.getElementById('one').addEventListener
('click', change_color);
document.getElementById('two').addEventListener
('click', change_color2);                                                               
document.getElementById('three').addEventListener
('click', change_color3);
document.getElementById('four').addEventListener
('click', change_color4);

function change_color(){
  document.body.style.color = "red";
  document.getElementById("original.jpg").src = "rom_main.jpg";
}

function change_color2(){
  document.body.style.color = "blue";
  document.getElementById("original.jpg").src = "adv_main.jpg";
}

function change_color3(){
  document.body.style.color = "green";
  document.getElementById("original.jpg").src = "rel_main.jpg";
}

function change_color4(){
  document.body.style.color = "orange";
  document.getElementById("original.jpg").src = "fam_main.jgp";
}

colorLinks ("#00FF00");

function colorLinks (hex)

var links = document.getElementsByTagName("a");
for(var i=0;i<links.length;i++)
{
      if(links[i].href)
      {
          links[i].style.color = "red";  
      }
}

Thank you!

Upvotes: 0

Views: 2103

Answers (1)

Shocklo
Shocklo

Reputation: 467

ok, for starters to change color of something you just need to do something like this

function change_color(){ 
 document.body.style.color = "red";  // this will change the color of the text to RED
 document.getElementById("image_to_change").src = "something.jpg"; // change img src
}

to use the function just add the call to the function where you want it, for example

  <a onClick="change_color();" href="#">Romantic</a><br><br>

well, its already accepted answer, but just wanted to complete it, to change the img src of, first you need to add an id for that img, for example

<td align="center"><img id="image_to_change"src="orig_main.jpg"><br><i>Your Vacation Awaits!

after you added the id, you can see how i added this line to the "change_color" function

document.getElementById("image_to_change").src = "***SOURCE_TO_YOUR_IMAGE***";

* Working Code * OK, here is the working fiddle http://jsfiddle.net/8ntdbek3/1/ i changed a few things to make it work, first, you need to understand that when you give an "ID" to something, in this case to the img (you gave the id "rom_main.jpg") the ID is what you need to use to call that element, so when you are using 

document.getElementById("orig_main.jpg").src = "rom_main.jpg";

it should go 

document.getElementById("rom_main.jpg").src = "rom_main.jpg";

since you gave it the id "rom_main.jpg" in this line, and the id "orig_main.jpg" does not exist! 

 <td align="center"><img id=**"rom_main.jpg**" src="orig_main.jpg"><br><i>Your Vacation Awaits!

also its important to note that you can put ANY id that you want, so repeating the name of the jpg file its something that i would not recommend, since it leads to confusion.

I changed the ID to something more readable and thats it. if you still need help comment below and i'll do my best to help you.

* EDIT to change color *

ok, finally i added a few lines of code to change the color of EVERY element in your page, for each onclick i adde these lines:

var list = document.getElementsByTagName("a");     
for (i = 0; i < list.length; i++) { 
  list[i].style.color = "red";  
}

as you can see, i get in a list every element with the tag "a", then every element i turn it into "red" (or the color you want).

here is the working fiddle http://jsfiddle.net/8ntdbek3/3/

regards.

Upvotes: 4

Related Questions