PDA

View Full Version : call the javascript function with in script


swetha123
06-24-2009, 12:40 PM
hello,

I need to display some dynamic text for large images when user hover overs on thumbnails

it is fine working for me when i don't call a function
I commented the code which should be called as a function in the test.js file
I want a function to be called there and display the text in the <div id="text"></div>

hope you understood my problem here is the code

test.html



<html>
<head>
<script src="test.js" type="text/javascript"></script>
<script type="text/javascript">
function mover(id)
{
document.getElementById("large").innerHTML='<img src="/swetha_static_projects/sample/images/large/'+id+'.jpg"/>';
document.getElementById("text").innerHTML= "call the javascript function txt(id) here which is in test.js file instead writing the commented code below";
/*var ch =id ;
if (document.getElementById(ch))
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="text.php"
url=url+"?x="+id
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged()
{
if (xmlHttp.readyState==4 xmlHttp.readyState=="complete")
{
document.getElementById("text").innerHTML=xmlHttp.responseText
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}*/
}
</script>

</head>
<body>
<div id="content-wrapper">
<ul>
<li><a href="javascript:msg('gallery')" id="gallery"> Gallery </a></li>
</ul>
<div id="main-content"> </div>
</div>
</body>
</html>

here is my test.js code



function txt(x)
{
var ch =x ;
if (document.getElementById(ch))
{
//alert(ch);
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="text.php"
url=url+"?id="+x
xmlHttp.onreadystatechange=stateChanged1
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
}

function stateChanged1()
{
if (xmlHttp.readyState==4 xmlHttp.readyState=="complete")
{
document.getElementById("main-content").innerHTML=xmlHttp.responseText
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

here is the text.php



<html>
<head>
</head>

<body>
<?php
$id=$_GET['x'];
$myFile = $id.".html";
$fh = fopen($myFile, 'r');
$text = fread($fh, filesize($myFile));
fclose($fh);
echo $text;
?>
</body>
</html>

here is gallery.html



<html>
<head>
<style type="text/css">
<!--
#container {
height: 350px;
width: 516px;
background-color:#000;
margin-top:0px;
}
#thumb {
margin-left:8px;
height: 200px;
width:50px;
cursor:pointer;
}
#large
{
height:300px;
width:445px;
float:right;
margin-top:-190px;
margin-right:2px;
text-align:center;
/*padding:6px 0px 0px 0px;*/
}
#text
{
height:25px;
width:350px;
text-align:center;
margin-top:-25px;
margin-right:80px;
float:right;
background-color:#000;
color:#FFF;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="thumb">
<img src="/swetha_static_projects/sample/images/thumb/001.jpg" width="50px" height="38px" id="001"
onmouseover="mover('001');" style="margin-top:25px;" alt="swe" title="s"/><br/>

<img src="/swetha_static_projects/sample/images/thumb/002.jpg" width="50px" height="38px" id="002"
onmouseover="mover('002');" style="margin-top:4px;"/><br/>

<img src="/swetha_static_projects/sample/images/thumb/003.jpg" width="50px" height="38px" id='003'
onmouseover="mover('003');" style="margin-top:4px;"/><br/>

<img src="/swetha_static_projects/sample/images/thumb/004.jpg" width="50px" height="38px" id='004'
onmouseover="mover('004');" style="margin-top:5px;"/><br/>

<img src="/swetha_static_projects/sample/images/thumb/005.jpg" width="50px" height="38px" id='005'
onmouseover="mover('005');" style="margin-top:6px;"/>
</div>
<div id="large"></div>
<div id="text"></div>

</div>
</body>
</html>