<script type="text/javascript">
var ... ;...
Book_Image_Sources=new Array(...);
function carousel() {...}
</script>

I want to (i hope it`s possible) call the script above in a css class like

#carouse
{
... somehow call the script above
}
then in my html code

<img src="./images/placeholder.gif" class="carouse" />

I am using a WYSIWYG editor (tinyMCE) within openrealty(a real estate mg`t System) and apparently it comments out the javascript and displays the js code in the frontend.

so am trying to find a work around this and am hoping the above approach will do it.

Or how else can i get this to work. am a little new to js.

Thanx

Recommended Answers

All 4 Replies

Try this one out and run the whole document, and see if it will fit what you need:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html id="html40L" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Free Live Help!</title>
<style type="text/css">
<!--
div#main {
color : #777;
height : auto;
margin : 0 auto;
padding : 0;
line-height : 1.4;
letter-spacing : .100em; 
width : 100%; }

span.indent { 
display : inline-block;
margin : 0;
padding-top : .500em;
text-indent : .500em; }

pre:before {
content : "Posted Code :";
letter-spacing : .200em;
color : #808080;
background-color : #FAFAFA;
border-top : 1px solid;
border-bottom : 1px solid;
padding-bottom : .300em;
padding-top : .300em;
text-indent : 1em;
white-space : pre;
margin-bottom : 1em;
display : block; }

pre {
font-family : "Lucida Console", "Lucida Sans Typewriter", "Courier New", monospace;
letter-spacing : 4px;
color : #000;
padding : 0 0 1em 0;
border-bottom : 1px solid #808080;
margin : 1.500em 0 1em 1em;
white-space : pre-wrap; }

div.tube { padding : 1em; }

/* DEMO Classes, will be used as arrays inside the carousel function. */

img.class1 { 
border : 2px solid #000;
width : 100px;
height : 100px; }

img.class2 { 
border : 2px solid #000;
width : 200px;
height : 200px; }

img.class3 { 
border : 2px solid #000;
width : 300px;
height : 300px; }
-->
</style>
<script id="script15" type="text/javascript">
<!--
var carousel;

var Book_Image_Sources = [ "class1", "class2", "class3" ];
var cLen = Book_Image_Sources.length;   
   carousel = function() {
   return Book_Image_Sources[ Math.floor((( Math.random() ) * cLen )) ];
   };       
// -->
</script>
</head>
<body>
<div id="main">
<div class="tube">
<h3>Sample DEMO</h3>
<script type="text/javascript">
<!-- Calling out the carousel function using  eval method.

eval( "document.writeln( '<img src=\"images/placeholder.gif\" id=\"testClass\" class=\"' + carousel() + '\">' )" );
// -->
</script>
<hr>
<pre>&lt;script type="text/javascript"&gt; var... ;... Book_Image_Sources=new Array(...); function carousel() {...} &lt;/script&gt;</pre>

<p>I want to (i hope it`s possible) call the script above in a css class like
#carouse<br> {<br>... somehow call the script above<br> } then in my html code</p>


<pre>&lt;img src="./images/placeholder.gif" class="carouse"&gt;</pre>

<p>I am using a <acronym title="What You See Is What You Get">WYSIWYG</acronym> editor (tinyMCE) within openrealty(a real estate mg`t System) and apparently it comments out the javascript and displays the js code in the frontend.
so am trying to find a work around this and am hoping the above approach will do it.
Or how else can i get this to work. am a little new to js.
Thanx</p>
</div>
</div> 
</body>
</html>

Thanx Essential,
ok this is what i have according to essentials reply...
tinyMCE accepts the call now but it still fails to run, as in nothing displays i don`t why but i think i am failing to make out where to call the <img>.

<style type="text/css">
<!--
<head>...
div#main {
color : #777;
height : auto;
margin : 0 auto;
padding : 0;
line-height : 1.4;
letter-spacing : .100em; 
width : 100%; }

span.indent { 
display : inline-block;
margin : 0;
padding-top : .500em;
text-indent : .500em; }

pre:before {
content : "Posted Code :";
letter-spacing : .200em;
color : #808080;
background-color : #FAFAFA;
border-top : 1px solid;
border-bottom : 1px solid;
padding-bottom : .300em;
padding-top : .300em;
text-indent : 1em;
white-space : pre;
margin-bottom : 1em;
display : block; }

pre {
font-family : "Lucida Console", "Lucida Sans Typewriter", "Courier New", monospace;
letter-spacing : 4px;
color : #000;
padding : 0 0 1em 0;
border-bottom : 1px solid #808080;
margin : 1.500em 0 1em 1em;
white-space : pre-wrap; }

div.tube { padding : 1em; }

/* DEMO Classes, will be used as arrays inside the carousel function. */

img.class1 { 
border : 2px solid #000;
width : 100px;
height : 100px; }

img.class2 { 
border : 2px solid #000;
width : 200px;
height : 200px; }

img.class3 { 
border : 2px solid #000;
width : 300px;
height : 300px; 

}
-->
</style>
<script id="script15" type="text/javascript">
<!--
var carousel;
	var Book_Image_Width=140;
	var Book_Image_Height=225;
	var Book_Border=true;
	var Book_Border_Color="gray";
	var Book_Speed=15;
	var Book_NextPage_Delay=1500; //1 second=1000
	var Book_Vertical_Turn=0;	

// array to specify images and optional links. At least 4
// If Link is not needed keep it ""

	Book_Image_Sources=new Array(
		"images/listing_photos/1_china_room.jpg","http://www.dynamicdrive.com",
		"images/listing_photos/1_dining_room.jpg","http://www.javascriptkit.com",
		"images/listing_photos/1_green_room.jpg","", //this slide isn't linked
		"images/listing_photos/1_vermeil_room.jpg","http://www.codingforums.com" // NOTE No comma after last line
		);

/***************** DO NOT EDIT BELOW **********************************/
	var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;
	var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);

	function ImageBook(){
		if(document.getElementById){
			for(i=0;i<Book_Image_Sources.length;i+=2){
				B_Pre_Img[i]=new Image();B_Pre_Img[i].src=Book_Image_Sources[i]}
			Book_Div=document.getElementById("Book");
			B_LI=document.createElement("img");Book_Div.appendChild(B_LI);	
			B_RI=document.createElement("img");Book_Div.appendChild(B_RI);
			B_MI=document.createElement("img");Book_Div.appendChild(B_MI);	
			B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";
			B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;
			B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px";
			B_LI.style.left=0+"px";
			B_MI.style.top=0+"px";
			B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
			B_RI.style.top=0+"px";
			B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
			B_LI.style.height=Book_Image_Height+"px";
			B_MI.style.height=Book_Image_Height+"px";
			B_RI.style.height=Book_Image_Height+"px";
			B_LI.style.width=Book_Image_Width+"px";
			B_MI.style.width=Book_Image_Width+"px";
			B_RI.style.width=Book_Image_Width+"px";
			if(Book_Border){
				B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";
				B_LI.style.borderWidth=1+"px";
				B_MI.style.borderWidth=1+"px";
				B_RI.style.borderWidth=1+"px";
				B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color}
			B_LI.src=B_Pre_Img[0].src;
			B_LI.lnk=Book_Image_Sources[1];
			B_MI.src=B_Pre_Img[2].src;
			B_MI.lnk=Book_Image_Sources[3];
			B_RI.src=B_Pre_Img[4].src;
			B_RI.lnk=Book_Image_Sources[5];
			B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
			B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;
			B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;
			BookImages()}}

	function BookImages(){
		if(!B_Stppd){
			if(Book_Vertical_Turn){
				B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));
				MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;
				B_MI.style.top=MidOffset+"px";
				B_MI.style.height=B_MSz+"px"}
			else{	B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));
				MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;
				B_MI.style.left=MidOffset+"px";
				B_MI.style.width=B_MSz+"px"}
			B_Angle+=Book_Speed/720*Math.PI;
			if(B_Angle>=Math.PI/2&&B_Direction){
				B_Direction=0;
				if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
				B_MI.src=B_Pre_Img[B_CrImg].src;
				B_MI.lnk=Book_Image_Sources[B_CrImg+1];
				B_CrImg+=2}
			if(B_Angle>=Math.PI){
				B_Direction=1;
				B_TI=B_LI;
				B_LI=B_MI;
				B_MI=B_TI;
				if(Book_Vertical_Turn)B_MI.style.top=0+"px";
				else B_MI.style.left=Book_Image_Width+1+"px";			
				B_MI.src=B_RI.src;
				B_MI.lnk=B_RI.lnk;

				setTimeout("Book_Next_Delay()",Book_NextPage_Delay)}
			else setTimeout("BookImages()",50)}
		else setTimeout("BookImages()",50)}

	function Book_Next_Delay(){
			if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
			B_RI.src=B_Pre_Img[B_CrImg].src;
			B_RI.lnk=Book_Image_Sources[B_CrImg+1];
			B_MI.style.zIndex=2;
			B_LI.style.zIndex=1;
			B_Angle=0;
			B_CrImg+=2;
		setTimeout("BookImages()",50)}

	function B_LdLnk(){if(this.lnk)window.location.href=this.lnk}
	function B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}
	function B_Rstrt(){B_Stppd=false}
	
var Book_Image_Sources = [ "class1", "class2", "class3" ];
var cLen = Book_Image_Sources.length;   
   carousel = ImageBook() {
   return Book_Image_Sources[ Math.floor((( Math.random() ) * cLen )) ];
   };       
// -->
</script>...</head>

then in the body

<!-- Calling out the carousel function using  eval method.  eval( "document.writeln( '<img src="placeholder.gif" id="testClass" class="' + carousel() + '">' )" ); // -->

You mean, the entire code is not working or it just won't display images?

yeah the entire code wont work i think due to some invocation irregularity..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.