how to call the specific css on specific image onclick event?

i have 2 images sunset.jpg and blue.jpg and each image has its own css as u can see below in the style.css.

now these images are shown on the front end , now there is a div like this:-

<div id="common">Company name</div>

now what i want is that when i click on sunset.jpg, its css should be called and blue.jpg is clicked its css should be called.

on clicking blue.jpg ,

font-family:arial;
        font-color:red;      
        font-size:8;           this css should be applied to company name .

on clicking sunset.jpg

font-family:verdana;
        font-color:pink;      
        font-size:18;          this css should be applied to company name .

i think u have get my point ,please help me out in this.


After doing all this i will do it for dynamic but for the time being just static.
[style.css]
 
.final1 
	{ font-family:arial;
	  font-color:red;	
	  font-size:8;
	  background-image:url(sunset.jpg); 	
	}
.final2 
	{ font-family:verdana;
	  font-color:pink;	
	  font-size:18;
	  background-image:url(blue.jpg); 	
	}

Open in new window

designersxAsked:
Who is Participating?
 
qwerty021600Connect With a Mentor Commented:
Try this. Done through 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>Untitled Document</title>
<style>
.finalt
{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      color: #006666;
}

.finaly
{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 16px;
      color: #FF0000;
}
</style>
</head>

<body>

     <img src="Images/button_viewresults.gif" onclick="document.getElementById('try').className='finalt' " />
        <br>
     <img src="Images/button_refresh_off.gif"  onclick="document.getElementById('try').className='finaly'" />
     <div id="try" class="finalt">Final</div>
</body>
</html>
0
 
GawaiCommented:
like :
<div><a href="#" onClick="this.style.className=final1">Final</a></div>

Open in new window

0
 
designersxAuthor Commented:
no, this is not i want.

two images are shown and below 2 images say Company name is written, now when i click on any image, its corresponding css should be applied to Company name.

hope u understand.

If any questions, please let me know and question me.

kind regards,
yogesh
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
GawaiCommented:
post your complete code or let me know the url of that page.
0
 
designersxAuthor Commented:
right now i am doing totally static but later on i need to it dynamic. rest i have cleared in code part.

so if u can help with the dynamic i will be very grateful to you.

kind regards
yogesh
[style.css]
 
.abc 
	{ font-family:arial;
	  font-color:red;	
	  font-size:8;
	  background-image:url(sunset.jpg); 	
	}
.xyz 
	{ font-family:verdana;
	  font-color:blue;	
	  font-size:18;
	  background-image:url(winter.jpg); 	
	}
 
[form.php]
 
<html>
<head>image onclick css call</head>
<body>
     <img src="images/sunset.jpg" onclick="here class abc should be called and applied on company name "/>
        <br>
     <img src="images/winter.jpg" onclick="here class xyz should be called and applied on company name "/>
</body>
</html>
 
<div id="common">Company Name</div>
 
 
you can take any of the images by yourself.

Open in new window

0
 
designersxAuthor Commented:
this is working fine , now

1) i am generating dynamic css and the code    
.abc
        { font-family:arial;
          font-color:red;      
          font-size:8;
          background-image:url(sunset.jpg);    
        }
               
generates automatically when i fill the user form and upload the specific sunset.jpg , so that means this sunset.jpg has above css as written. now each image will be having its own css like this.

now i want that specific css should be called on the image click. means it is all dynamic.
have u undersood, if not then please let me know. this is a very big problem i guess i am facing.

u do the above code dynamic.


//the css i have given 
.abc 
        { font-family:arial;
          font-color:red;       
          font-size:8;
          background-image:url(sunset.jpg);     
        }
 
//the css u have given
.finaly
{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 16px;
      color: #FF0000;
}
//there is a difference of background image.

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.