0

It performs the toggle function to change the class of the paragraph tags and reverts back to the default class name when user rollout of it. You can embed the CSS style code inside the Head section of your page using HTML style tag. Code is as follows :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Javascript class switcher</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
/* RED Class */
.red { color: red; text-align: center; }
/* BLUE Class */
.blue { color: blue; text-align: center; }
-->
</style>
<script type="text/javascript">
<!-- BEGIN HIDING
var red = 'red'; 
var blue = 'blue';
function class_switcher(classes)
{ 
   var class = document.getElementById(classes);
 
if ( class.className == red ) 
{ class.className = blue; class.innerHTML = '~Now i\'m with the <b>BLUE</b> class~';
} 
else if ( class.className == blue )
{ class.className = red; class.innerHTML = '~Now i\'m with the <b>RED</b> class~';
} else { class.className = red; } 
}
function normal(id, class, default_value)
{ document.getElementById(id).className = class;
  document.getElementById(id).innerHTML = default_value;
}
// DONE HIDING-->
</script>
</head>
<body>
<p id="first_paragraph" class="blue" onMouseOver="class_switcher('first_paragraph');" onmouseout="normal('first_paragraph', 'blue', '< I\'m from the <b>BLUE</b> class >');"><< I'm from the BLUE class >></p>
<p id="second_paragraph" class="red" onMouseOver="class_switcher('second_paragraph');" onmouseout="normal('second_paragraph', 'red', '< I\'m from the <b>RED</b> class >');"><< I'm from the RED class >>
</p>
</body>
</html>
2
Contributors
1
Reply
8
Views
9 Years
Discussion Span
Last Post by tekagami
0
<script type="text/javascript">
function switchclass(obj){
	 if (obj.className == 'small'){
	 obj.className = "big";
	 }
	else if (obj.className == 'big'){
	 obj.className = "small";
	 }
    }
</script>
<style>
.small { width: 40px; }
.big { width: 100%; }
</style>
<img src="/picture.jpg" class="small" onclick="switchclass(this);">
<img src="/picture.jpg" class="small" onclick="switchclass(this);">

css is up to you

Edited by tekagami: comment

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.