Using onMouseOver in a link
- I am able to display a file's contents in a frame.
- I can display an image file in an IMG tag
But I can't figure out how to combine the two. What I want to do is onMouseOver display the contents of a text or html file in a TD element.
In essence:
<a href="#" onmouseover='document.getElementById('ingred2').[I]text[/I]="FileName.htm"'>
<TH id='ingred2'>Display-File-Contents-Here</TH>
This can be done easily using a combination of Ajax and PHP , see this small solution I made for u and hope that u already familiar with php and ajax
u have index.htm
<!doctype html>
<head>
<title>Get File Contents</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
function get_content()
{
$.ajax({
type:'POST',
url: 'file.php',
data:{file: $("#myfile").val()},
dataType:'html',
success: function(data){
$("th#response").html(data);
}
});
}
</script>
<style>
table{margin:20px;
border-collapse:collapse;
width:300px;
}
table tr th{
padding:20px;
background:#ccc;
border:1px solid #aaa;
}
</style>
</head>
<body>
<input type = "file" id="myfile">
<a onmouseover="get_content()" href="#">Get File Get Content</a>
<table>
<tr>
<th id="response"></th>
</tr>
</table>
</body>
</html>u have to make anothe file call it file.php that will read the file you select and return their content
<?php
$file = $_POST['file'];
echo file_get_contents($file);
?>Note: u can browse file only from inside the directory of your project or ur php script will complains with an error
how it works: browse the file from inside ur project root then hover over file content link
Of course I can do it with PHP. But you have to have them installed on your server. Not an option.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.