Gracias ipraetoriux, pero ya tengo suficiente con las broncas entre Javascript y PHP como para meterme a estudiar jQuery. Aunque entiendo que éste hace más fácil javascript, primero quiero pelearme un poco más con javascript antes de apoyarme en una biblioteca como jQuery.
Para quien visie este post, solucioné mi problema así:
Código Javascript
:
Ver originalfunction abrirVideo(nameDelVinculo, titleDelVinculo)
{
if ( titleDelVinculo != "restringido" )
{
var ventana = window.open("", "popUp1", "width=660, height=500");
ventana.document.write('<head><title>Video gratuito (demo)</title>');
ventana.document.write('<link type="text/css" href="/Joomla/images/docs/estilos.css" rel="stylesheet" />');
ventana.document.write('</head>');
ventana.document.write('<body">');
ventana.document.write('<video src="images/video/video' + nameDelVinculo + '.ogv" controls></video>');
ventana.document.write('</body>');
}
else
{
var ventana = window.open("", "popUp2", "width=660, height=500");
ventana.document.write('<head><title>Video restringido</title>');
ventana.document.write('<link type="text/css" href="/Joomla/images/docs/estilos.css" rel="stylesheet" />');
ventana.document.write('</head>');
ventana.document.write('<body>');
ventana.document.write('<div id="contenedor"><div id="contenedorForm">');
ventana.document.write('<form action="images/docs/validarUsuario.php" method="post">');
ventana.document.write('Usuario<br /><input type="text" name="usuario" /><br /><br />');
ventana.document.write('Contraseña<br /><input type="password" name="contrasena" /><br /><br /><br />');
ventana.document.write('<input type="text" name="linkClicleado" value="' + nameDelVinculo + '" class="invisible" />');
ventana.document.write('<input type="submit" value="Entrar" />');
ventana.document.write('</form></div>');
ventana.document.write('<div id="divCandado"><img src="images/img/candado1.png" id="imgCandado" /></div>');
ventana.document.write('</div>');
ventana.document.write("</body>");
}
}
y
Código HTML:
Ver original<div id="contenedorImagenes"> <div class="cuadro floatLeft"> <a href="#n" id="imgSocial1" name="A" class="link" title="restringido" onclick="abrirVideo(this.name, this.title)"></a> <div class="cuadro floatLeft"> <a href="#n" id="imgSocial2" name="B" class="link" onclick="abrirVideo(this.name, this.title)"></a> <div class="cuadro floatLeft"> <a href="#n" id="imgSocial3" name="C" class="link" title="restringido" onclick="abrirVideo(this.name, this.title)"></a> <div class="cuadro floatLeft"> <a href="#n" id="imgSocial4" name="D" class="link" title="restringido" onclick="abrirVideo(this.name, this.title)"></a>
Explico los puntos que creo pueden resultar confusos para quien, igual que yo hace unas semanas, se inicie con funciones que hagan uso de argumentos.
1. nameDelVinculo y titleDelVinculo son variables que van a guardar respectivamente los valores de las propiedades NAME y TITLE de los links. ¿Cómo? Cuando se da clic a un link, o sea cuando se activa el evento ONCLICK, se llama la función abrirVideo(this.name, this.title). Pero aquí en el nombre de la función, se quitan los argumentos nameDelVinculo y titleDelVinculo y se ponen respectivamente las instrucciones this.name y this.title. Así, cuando la función se ejecute, la variable nameDelVinculo contendrá el valor de la propiedad name de ese link en específico, por eso se pone this.name, que significa este.name. Más claro aún, la variable nameDelVinculo hace referencia a this.name del link clicleado, y la variable titleDelVinculo hace referencia a this.title. Pero hay que poner this.name y this.title en el orden en el que están los argumentos en la función, para que nameDelVinculo y titleDelVinculo correspondan con this.name y this.title.
2. ¿Y para qué demonios esta función guarda el valor de la propiedad name y title del link clicleado? Veamos, si el link clicleado NO tiene como title el valor "restringido", entonces se abre una nueva ventana y con un video. ¿cuál video? el video llamado videoA.ogv o videoB.ogv o videoC.ogv o el que corresponda según el link clicleado. Si se clicleó el link con name "B", entonces el video a mostrar será el videoB.ogv.
3. Para qué la siguiente línea:
Código Javascript
:
Ver originalventana.document.write('<input type="text" name="linkClicleado" value="' + nameDelVinculo + '" class="invisible" >');
Pongo este input para guardar allí el valor del name del link clicleado, con el fin de enviarlo con el método POST a una página PHP que se encargará de leer este input mediante $_POST, y así PHP primero validará al usuario y contraseña de quien quiere ver el video B, por ejemplo, y si se valida correctamente, entonces PHP ejecuta el código Javascript necesario que abre una ventana y muestra el video B.
Ésta es la forma que encontré para que una variable PHP guarde el valor de una variable Javascript. (Hacer esto me costó varios días de búsqueda y frustración. Aunque mirado en retrospectiva, esta solución es tan de sentido común que resulta difícil no decirse a uno mismo "Pero si era tan fácil, estúpido!")
4. Una última cosa: al parecer hay necesidad de escapar todas las comillas y diagonales del código que se meta dentro de los document.write. Trabajando en local me lo exige el browser, si no, no funciona. Y pasa al revés trabajando en línea, ¿por qué? No sé.