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.
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);
}
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
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.
ASKER
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
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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(sunse t.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.
1) i am generating dynamic css and the code
.abc
{ font-family:arial;
font-color:red;
font-size:8;
background-image:url(sunse
}
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