Link to home
Start Free TrialLog in
Avatar of designersx
designersx

asked on

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

Avatar of Emad Gawai
Emad Gawai
Flag of United Arab Emirates image

like :
<div><a href="#" onClick="this.style.className=final1">Final</a></div>

Open in new window

Avatar of designersx
designersx

ASKER

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
post your complete code or let me know the url of that page.
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

ASKER CERTIFIED SOLUTION
Avatar of qwerty021600
qwerty021600
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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