Clickable table with javascript action in two (hidden) Iframes
Hello Expert,
I've build a screen with 14 Iframes. 12 from the 14 will present a small webcam view and two Iframes are used to perform a action to set one of the web cams in an other resolution and turn a let of on the cam.
These two actions should should be activates when I click the table cell of that cam screen.
I've tried to create the code but it does not work.
Please help me to get this working.....
I've build a screen with 14 Iframes. 12 from the 14 will present a small webcam view and two Iframes are used to perform a action to set one of the web cams in an other resolution and turn a let of on the cam.
These two actions should should be activates when I click the table cell of that cam screen.
I've tried to create the code but it does not work.
Please help me to get this working.....
<html>
<head>
<title></title>
<script language="Javascript">
function linkr(IP){
document.frames["iframeA"].location.href = "http://" + IP + "/control/control?set§ion=general&size=640x480"
document.frames["iframeB"].location.href = "http://" + IP + "/control/rcontrol?action=ledsoff"
}
</script>
</head>
<body>
<table>
<tr>
<td colspan=4><iframe ID="iframeA" src ="URL1" width="0%"></iframe><iframe ID="iframeB" src ="URL2" width="0%"></iframe></td>
</tr>
<tr>
<td onClick="linkr(192.168.1.228);"><iframe ID="iframe1" src ="view.asp?IP=192.168.1.228" scrolling=no border="0" frameborder="0" border="0" frameborder="0" width="100%"></iframe></td>
<td><iframe ID="iframe2" src ="view.asp?IP=192.168.1.229" scrolling=no border="0" frameborder="0" width="100%"></iframe></td>
<td><iframe ID="iframe3" src ="view.asp?IP=192.168.1.230" scrolling=no border="0" frameborder="0" width="100%"></iframe></td>
<td><iframe ID="iframe4" src ="view.asp?IP=192.168.1.231" scrolling=no border="0" frameborder="0" width="100%"></iframe></td>
</tr>
<tr>
<td><iframe ID="iframe5" src ="view.asp?IP=192.168.1.232" scrolling=no border="0" frameborder="0" width="100%"></iframe></td>
<td><iframe ID="iframe6" src ="view.asp?IP=192.168.1.233" scrolling=no border="0" frameborder="0" width="100%"></iframe></td>
<td><iframe ID="iframe7" src ="view.asp?IP=192.168.1.234" scrolling=no border="0" frameborder="0" width="100%"></iframe></td>
<td><iframe ID="iframe8" src ="view.asp?IP=192.168.1.235" scrolling=no border="0" frameborder="0" width="100%"></iframe></td>
</tr>
<tr>
<td><iframe ID="iframe9" src ="view.asp?IP=192.168.1.236" scrolling=no border="0" frameborder="0" width="100%"></iframe></td>
<td><iframe ID="iframe10" src ="view.asp?IP=192.168.1.237" scrolling=no border="0" frameborder="0" width="100%"></iframe></td>
<td><iframe ID="iframe11" src ="view.asp?IP=192.168.1.238" scrolling=no border="0" frameborder="0" width="100%"></iframe></td>
<td><iframe ID="iframe12" src ="view.asp?IP=192.168.1.239" scrolling=no border="0" frameborder="0" width="100%"></iframe></td>
</tr>
</table>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hello Tomarse111,
Your sollution looks like a very smart one. But it does not seem te work. I'll attach the code of the seond file too.
Could you please make changes in the code?...
Kind regards
Your sollution looks like a very smart one. But it does not seem te work. I'll attach the code of the seond file too.
Could you please make changes in the code?...
Kind regards
<%
IP = Request.QueryString("IP")
LOC = Request.QueryString("loc")%>
<html>
<head>
<title><% response.write LOC %></title>
<style type="text/css">
td,th { font-family:Helvetica,Arial,sans-serif; }
pre,textarea { font-family:monospace; }
.headtablesmall { font-family:Helvetica,Arial,sans-serif; font-size:100%; }
.standard { font-size:80%; }
.inherit { font-size:100%; }
.smallcomment { font-size:95%; }
.smallercomment { font-size:80%; }
p,table,td,th{font-family:Helvetica,Arial;}
form { margin-bottom:0px;margin-top:0px; }
.kleinerknopf { font-size:80%; }
.help { cursor:help; }
</style>
</head>
<body onclick="parent.linkr(<% response.write IP %>);" onload="if (document.all && document.all.CamPic) document.all.CamPic.style.width='auto';animation_init();">
<noscript>
<center>
<font face="Helvetica,Arial" size="+1" color=red>
Sta het gebruik van Javascripten toe om bewegend beeld te krijgen <br>Please allow the use of javascripting to receive motion picture.
</font>
</center>
</noscript>
<br><div align=center>
<form name="dkdk">
<TABLE width=320 cellpadding=0 border=0 cellspacing=0>
<TR valign=baseline>
<td colspan=2 align=center>
<img name="CamPic" src="http://" & <% response.write IP %> & "/record/current.jpg?rand=6014151" ALT="<% response.write LOC %>" TITLE="<% response.write LOC %>" width="320" height="200"></td>
</tr>
<tr>
<td>
<script language="JavaScript" type="text/javascript">
var current_refresh_method_nr=0;
var refreshmethods_type=new Array(0,0,0,1,2);
function refreshMethod(new_value) {
if (refreshmethods_type[new_value]!=refreshmethods_type[current_refresh_method_nr]) {
var url=location.href.split("?");
location.href=url[0]+"?REFRESHMETHOD="+new_value;
} else {
current_refresh_method_nr=new_value;
setframerate();
}
}
</script></td>
</TR>
</TABLE>
</form></div>
<script language="JavaScript">
var pic_url="http://<% response.write IP %>/record/current.jpg";
var noframepath="http://<% response.write IP %>/decor/m1m-error.jpg";
var n=Math.floor(Math.random()*1000000);
var session_id=Math.floor(Math.random()*1000000);
var startn=n;
var GetItOn=1;
var framerate=2;
var buffer= new Image();
var aktiv=null;
var db_enabled=0;
var passiv=null;
function DoComplete()
{
if (db_enabled != 0) {
if (db_enabled<0) {
//document.CamPic.style.filter="";buffer.style.filter="alpha(opacity=70,style=0)";
document.CamPic.style.display="";
buffer.style.display="none";
} else {
//document.CamPic.style.filter="alpha(opacity=70,style=0)";buffer.style.filter="";
buffer.style.display="";
document.CamPic.style.display="none";
}
db_enabled*=-1;
} else {
document.CamPic.src = buffer.src;
}
GetItOn = 1;
if (current_refresh_method_nr == 1 && framerate>0) {// Sync onload implementieren
if (passiv==null)
Animation();
}
}
function LoadError()
{
if (db_enabled != 0) {
db_enabled*=-1;
} else {
document.CamPic.src=noframepath;
}
GetItOn = 1;
if (current_refresh_method_nr == 1 && framerate>0) // Sync onload Fehlerbehandlung
passiv=setTimeout("passiv=null;Animation();",1000);
}
function setframerate(value) {
framerate=value;
if (aktiv) {
window.clearInterval(aktiv);
aktiv = null;
}
document.CamPic.onerror=null;
buffer.onerror=null;
if (framerate<0) {
if (current_refresh_method_nr == 2) { // Stream ausschalten
GetItOn=1; Animation();
}
return;
}
// Refresh Typen
if (current_refresh_method_nr == 2) { // Stream anschalten
buffer.onload = null;
buffer.onerror= null;
document.CamPic.onload=null;
// wg. Mozilla Bug # 42224 "Spontaner Abbruch des Streams"
document.CamPic.onerror= function () {setTimeout("setframerate();",500) } ;
document.CamPic.src = "http://<% response.write IP %>/cgi-bin/faststream.jpg?stream=full&fps="+framerate+"&rand=" + String(n++);
return;
} else if (current_refresh_method_nr == 1) { // OnLoad synced
session_id++;
Animation();
return;
}
aktiv=window.setInterval("Animation()",1000/framerate);
GetItOn=1; // auf alle Faelle anzeigen!
Animation(); // und go...
}
function Animation()
{
var my_rm_nr=current_refresh_method_nr;
var my_fr=framerate;
var my_session=session_id;
if (GetItOn == 1 || (my_rm_nr == 1 && my_fr>0))
// Bild ist geladen und das naechste kann
{ // angefordert werden.
GetItOn = 0;
if (db_enabled<0) {
buffer.onerror=buffer.onload=null;
document.CamPic.onerror= LoadError;
document.CamPic.onload = DoComplete;
if (my_rm_nr == 0)
document.CamPic.src = pic_url + "?rand=" + String(n++);
else
document.CamPic.src = pic_url + "?sync="+my_fr+"&session="+my_session+"&rand="+String(n++);
} else {
document.CamPic.onerror=document.CamPic.onload=null
buffer.onerror= LoadError;
buffer.onload = DoComplete;
if (my_rm_nr == 0)
buffer.src = pic_url + "?rand=" + String(n++);
else
buffer.src = pic_url + "?sync="+my_fr+"&session="+my_session+"&rand="+String(n++);
}
}
}
function animation_init() {
if ( document.all
&& (navigator.platform.substr(0,3) != "Mac")
&& (document.CamPic.inserAdjacentHTML)
) {
document.CamPic.insertAdjacentHTML("AfterEnd","<img border=0 style=\"display:none;\" name=dbbuffer><\/b>");
buffer=document.dbbuffer;
db_enabled=1;
}
setframerate(framerate);
}
</script>
</font>
<script type='text/javascript' language='JavaScript'>self.focus();</script></body>
</html>
i think you forgot to quote something
put quotes around:
<% response.write IP %>
put quotes around:
<% response.write IP %>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Ok I've changed your linkr function slightly to use getElementById instead of document.frames. This seems to work for me now but could you test to see if the alert is being fired when you click in your iframe. At least that way we know that the function is being reference correctly from the iframe src (view.asp).
<script language="Javascript">
function linkr(IP){
alert(IP);
document.getElementById('iframeA').src = "http://" + IP + "/control/control?set§ion=general&size=640x480";
document.getElementById('iframeB').src = "http://" + IP + "/control/rcontrol?action=ledsoff";
}
</script>
ahh yeah and as tim suggested, single quotes need adding around your ip in the function as it is a string you are passing back
ASKER
Thanks Experts,
This was what I was looing for. Have a nice weekend.
This was what I was looing for. Have a nice weekend.
mayby you should try jquery (http://jquery.com/). It really helps to simplify your javascript
2. I think the onclick-event does not work for a td; put divs in your td's and add the onclick-event to these divs