I am looking for some help for javascript and styles together. Onclick, I want to change the style for a text (or link) to another style. Along with the same action, I want to change an image placed somewhere on the same page. All this occurs on the same w/o going to another page. Does anyone have an idea how I could do so?
Thanks in advance.See <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/alternate/.Originally">http://www.alistapart.com/articles/alte ... Originally</a><!-- m --> posted by koms
Onclick, I want to change the style for a text (or link) to another style.
Surely if you click on a link it will go to it's destination and hence you wont be able to see the change?
I'm not sure if you wanted to use Charles' method of switching style sheets or if you just wanted to apply a different class to a specific element on your web page.
Your text - what i would do is enclose it in Table/Div tags and set...
<table>
<tr>
<td class="<class1>" onClick="this.class='<class2>';">
Insert Your Text Here
Insert Your Text Here
Insert Your Text Here
</td>
</tr>
</table>
with class1 and class2 being the different styles you wish to use.
For the pic...
I'd probably use exactly the same method and have the two different classes have "background-image" attribute different.
But thats one of many different ways to do that and i'm sure there are others who will come up with better ways of doing it (For example i have no idea if my example will work accross all browsers etc)
Hope that helps<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>
<style type="text/css">
<!--
.highlight {background-color:#aaa; color:#fff}
-->
</style>
<ul>
<li onclick="this.className = this.className == '' ? 'highlight' : ''">Fee</li>
<li onclick="this.className = this.className == '' ? 'highlight' : ''">Fie</li>
<li onclick="this.className = this.className == '' ? 'highlight' : ''">Foe</li>
<li onclick="this.className = this.className == '' ? 'highlight' : ''">Fum</li>
</ul>THanks all for the help. This code seems to fit perfect.Here is another example you may find beneficial (does not work in stoopid IE though): <!-- m --><a class="postlink" href="http://www.vladdy.net/demos/AdjuscentSiblingsFun.html">http://www.vladdy.net/demos/AdjuscentSiblingsFun.html</a><!-- m --><input type="button" value=" hello" onClick="this.style.borderColor='#006699';">
Thanks in advance.See <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/alternate/.Originally">http://www.alistapart.com/articles/alte ... Originally</a><!-- m --> posted by koms
Onclick, I want to change the style for a text (or link) to another style.
Surely if you click on a link it will go to it's destination and hence you wont be able to see the change?
I'm not sure if you wanted to use Charles' method of switching style sheets or if you just wanted to apply a different class to a specific element on your web page.
Your text - what i would do is enclose it in Table/Div tags and set...
<table>
<tr>
<td class="<class1>" onClick="this.class='<class2>';">
Insert Your Text Here
Insert Your Text Here
Insert Your Text Here
</td>
</tr>
</table>
with class1 and class2 being the different styles you wish to use.
For the pic...
I'd probably use exactly the same method and have the two different classes have "background-image" attribute different.
But thats one of many different ways to do that and i'm sure there are others who will come up with better ways of doing it (For example i have no idea if my example will work accross all browsers etc)
Hope that helps<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>
<style type="text/css">
<!--
.highlight {background-color:#aaa; color:#fff}
-->
</style>
<ul>
<li onclick="this.className = this.className == '' ? 'highlight' : ''">Fee</li>
<li onclick="this.className = this.className == '' ? 'highlight' : ''">Fie</li>
<li onclick="this.className = this.className == '' ? 'highlight' : ''">Foe</li>
<li onclick="this.className = this.className == '' ? 'highlight' : ''">Fum</li>
</ul>THanks all for the help. This code seems to fit perfect.Here is another example you may find beneficial (does not work in stoopid IE though): <!-- m --><a class="postlink" href="http://www.vladdy.net/demos/AdjuscentSiblingsFun.html">http://www.vladdy.net/demos/AdjuscentSiblingsFun.html</a><!-- m --><input type="button" value=" hello" onClick="this.style.borderColor='#006699';">