Solved

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

Posted on 2009-03-31
6
750 Views
Last Modified: 2012-05-06
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

0
Comment
Question by:designersx
  • 3
  • 2
6 Comments
 
LVL 20

Expert Comment

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

Open in new window

0
 

Author Comment

by:designersx
ID: 24029796
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
 
LVL 20

Expert Comment

by:Gawai
ID: 24030119
post your complete code or let me know the url of that page.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:designersx
ID: 24035911
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
 
LVL 13

Accepted Solution

by:
qwerty021600 earned 125 total points
ID: 24036349
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
 

Author Comment

by:designersx
ID: 24036460
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Error in JQuery 5 37
P tag not forcing line space 2 22
How can I upload multiple images from a HTML form? 2 18
How to change pointer icon to hand icon on mouseover 2 17
These days socially coordinated efforts have turned into a critical requirement for enterprises.
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

912 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now