Foros del Web » Creando para Internet » HTML »

¿como hacer un popup que funcione con un click?

Estas en el tema de ¿como hacer un popup que funcione con un click? en el foro de HTML en Foros del Web. bueno encontre este tema en otra pagian http://blogandweb.com/css/visualizacion-pop-up-de-una-imagen-con-css/ ignoro todo lo que esta escrito pero instigo para saber que hace cada cosa pero necesito ayuda ...
  #1 (permalink)  
Antiguo 17/10/2011, 15:11
 
Fecha de Ingreso: octubre-2011
Ubicación: oaxaca
Mensajes: 42
Antigüedad: 12 años, 6 meses
Puntos: 0
¿como hacer un popup que funcione con un click?

bueno encontre este tema en otra pagian
http://blogandweb.com/css/visualizacion-pop-up-de-una-imagen-con-css/
ignoro todo lo que esta escrito pero instigo para saber que hace cada cosa
pero necesito ayuda quiero que todo funcione igual solo que el pop aparesca cuando le di click a la imagen y desaparesca cuando le di clik al pop y no solo eso sino q cuando poga el cursor sobre la imagen aparesca un lupo con +, y cuando olo ponga sobre el pop aparesca una lupa con el -
aqui encontre eso
gemablog-.blogspot.com/2009/06/anadiendo-una-lupa.html
pero no lo aplica al pop y no le entindo asi que alguien me ayude, esplique y me diga como hacer todo esto grax, para mayor referencia estoy usando una hoja de estilos externa
  #2 (permalink)  
Antiguo 17/10/2011, 15:49
Avatar de alex_dh  
Fecha de Ingreso: septiembre-2011
Ubicación: Kreuzberg
Mensajes: 235
Antigüedad: 12 años, 7 meses
Puntos: 14
Respuesta: ¿como hacer un popup que funcione con un click?

javascript...


para que la imagen sea el link es asi
Código HTML:
Ver original
  1. <a href="PAGINA.COM"><img src="RUTA/DE/IMAGEN.FORMATO"></a>

busca bien en javascript que todo lo que pides debe ir ahi
  #3 (permalink)  
Antiguo 18/10/2011, 16:10
Avatar de diegoalvarezb  
Fecha de Ingreso: octubre-2011
Ubicación: Quito
Mensajes: 17
Antigüedad: 12 años, 6 meses
Puntos: 15
Mensaje Respuesta: ¿como hacer un popup que funcione con un click?

este es el script

Código HTML:
<script language=JavaScript>
<!--

function click(e) {
if (document.all) {
if (event.button==2||event.button==3) {
window.open('http://www.diego.com.ec/minipopup.phtml','_blank','location=0,menubar=0,toolbar=0,personalbar=0,status=0,scrollbars=0,width=250,height=60')

return false;
}
}
if (document.layers) {
if (e.which == 3) {
window.open LA DIRECCION QUE EMPIEZA DESDE HTTP, HASTA .PHTML, LO BORRAS Y PONES LA URL DE LA FOTO, HACES LO MISMO CON LO DE ARRIBA Y ESO DE CATION Y TODO ESO, ES PARA NO MOSTRAR NADA COMO LA DIRECCION, HISTORIAL Y ESO ESTO DE width=250,height=60' ES EL TAMAÑO DE LA VENTANA,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,ESQUE SI NO EXPERIMENTAS NO VAS APRENDER('http://www.webservicio.com/minipopup.phtml','_blank','location=0,menubar=0,toolbar=0,personalbar=0,status=0,scrollbars=0,width=250,height=60')

return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
// -->
</SCRIPT> 

Cascading Style Sheets

CSS ("Cascading Style Sheets") es una metodología para dar uniformidad al uso de tags en documentos HTML, como habrá notado en las secciones anteriores de la guia rápida, el agregar atributos a cada Tag HTML puede ser un proceso mecánico. Imagínese que desee centrar todas las celdas (<td> ) en un documento o en todo un sitio, seguramente el agregar align="center" a todos los elementos <td> sería un proceso muy tediosos, y es precisamente a través de CSS ("Cascading Style Sheets") que se facilitan este tipo de tareas.

El nombre Cascading (En Cascada) tiene sus raíces en el funcionamiento de las mismas, ya que es posible definir uniformidades en tres distintos puntos de un documento :

Uniformidad en Varios Documentos (Archivo CSS)

Uniformidad en Documento (Tags <style> y <span> )

Uniformidad en Tag ( Clases y en Linea )



Ahora bien, el efecto en Cascada se debe al nivel de precedencia (importancia) que se toma al ser interpretadas las diversas uniformidades en el documento, esto es, si en los atributos dentro de los tags <style> (Uniformidad en Documento) existen varias definiciones traslapadas con aquellas definidas en un archivo CSS, entonces las ultimas tomarán precedencia, de igual manera, aquellas definiciones por Tag ( Clases y en Linea) tomarán precedencia sobre aquellas de Documento (Tags <style> y <span>) y archivos CSS.

Finalmente vale mencionar que en dado caso de no definirse ninguna funcionalidad para algún tag el Navegador utiliza sus valores "defaults".



Uniformidad en Varios Documentos (Archivo CSS)

Esta implementación es aquella utilizada a lo largo de varios documentos y su funcionamiento depende de un archivo que es llamado dentro del documento HTML, este tipo de declaración es similar a la de una imagen, y existen dos posibilidades como se muestra a continuación :

<html> <head> <title> Documento de CSS </title> <link rel="stylesheet" type="text/css" href="/css/estilo.css"> <style type="text/css"> <!-- @import url(http://www.diego.com.ec/css/estilo.css) --> </style> </head> <body> ........ ........ </body> </html>



Nótese que ambas definiciones para importar el archivo CSS son anidadas dentro del Tag <head> del documento; la primer declaración importa el archivo CSS mediante el elemento link son sus respectivos atributos, la segunda declaración hace uso de los Tags <style> para importar el mismo archivo CSS; a pesar de las diferencias en sintaxis, ambas declaraciones tienen el mismo funcionamiento.

La utilización de comentarios <!-- y --> antes y después de los tags <style> se hace con la intención de evitar errores en los Navegadores que no reconocen el tag <style> y/o tienen desactivado el uso de CSS.

Uniformidad en Documento (Tags <style> y <span> ).

Dentro de los tag <style> también es posible definir el comportamiento de tags que afectarán un documento en particular.

<head> <title> Documento de CSS </title> <style type="text/css"> <!-- body { background-color:black } h1,h3,h4 {text-align: center} h2 {text-align: right} p b {color: yellow} a:link { color: blue } a:active { color: red; font-weight: bold} a:visited { color: green } span { color: red } span.negrita { font-weight: bold } --> </style> </head>



Los parámetros definidos dentro de los tags <style> indican lo siguiente:

body { background-color: black } : Cualquier contenido dentro de los Tags <body> (todo el documento en sí) tendrá fondo negro.

h1,h3,h4 {text-align: center} : Cualquier contenido dentro de los Tags <h1> , <h3> , <h4> será alineado en el centro.

h2 {text-align: right} : Cualquier contenido dentro de los Tags <h2> será alineado hacia la derecha.

p b {color: yellow} : Después de cualquier salto de renglón ( tags <p> ) si precedía de letras negritas ( tags <b> ) el contenido será de color amarillo; aquí es importante mencionar que si existen letras negritas no será asignado el color amarillo salvo estas se encuentren dentro de un salto de renglón, lo anterior se debe a la omisión de comas (",") entre los elementos que genera un comportamiento anidado.

a:link { color: red } : Todos los links de la página ( tags <a> ) estarán en rojo.

a:active { color: blue; font-weight: bold}: Al momento de oprimir el Link, la letras aparecerán azules y la letra se tornará negrita.

a:visited { color: green } : Si el usuario observa un Link que ya visito, éste aparecerá de color verde.



Las definiciones que inician con span tienen un comportamiento especifico ya que forman parte de CSS; al utilizarse las diversas definiciones mencionadas anteriormente, estas toman un efecto sobre todas las declaraciones del documento, esto es, todo el contenido de los Tags <h2> será alineado a la derecha, aquel de <a> (links) será rojo, sin embargo, existen ocasiones en las que este comportamiento no es deseado para todos los elementos del documento, para este tipo de situaciones se utiliza el Tag <span>

La siguiente declaración permite que únicamente una sección del contenido sea afectada:

<span> este contenido será desplegado en colo rojo </span>



Para que el tag <span> pueda ser utilizado en diversas circunstancias, es posible generar clases de la siguiente manera:

<span class="negrita"> este contenido será desplegado en letras negritas </span>



Además del uso de clases, el Tag <span> también puede contener declaraciones en linea a través del atributo style ; el uso de Clases y declaraciones en linea forma parte de las definiciones más refinadas en CSS descrita a continuación.

Uniformidad en Tag ( Clases y en Linea )

Finalmente existe la posibilidad de definir el funcionamiento de cualquier tag HTML al mismo nivel de tags , esto es, el funcionamiento solo tendrá efecto dentro del tag y ningún otro tag del mismo tipo será afectado en el documento, para esto existen dos posibilidades:



Definir Clases ("Classes")

Para realizar esto es necesario definir clases dentro de los parámetros definidos en <style> o bien que sean incluidas estas definiciones en un archivo CSS: <head> <title> Documento de CSS </title> <style type="text/css"> <!-- h2.azul {color: azul} h2.verde {color: green; text-align: center} h2.amarilla { color: yellow } .cursiva { font-style: italic } --> </style> </head>



Los parámetros anteriores definen tres funcionamientos para títulos con tags <h2> , esto otorga la flexibilidad de emplear títulos con diferentes colores. Para utilizar la funcionalidad los tags son llamados con el parámetro class :

<h2 class="azul"> Titulo en Azul </h2> (Desplegaría el titulo en azul)



<h2 class="verde"> Titulo centrado Verde </h2> (Desplegaría el titulo centrado en verde)



La clase genérica .cursiva puede ser utilizada para cualquier tipo de tag , esto es :

<p class="cursiva"> despues del salto letra cursiva ... o <b class="cursiva"> estas son negritas cursivas ...



El uso de clases ( class ) no esta limitado a colores y alineación , esta metodología puede ser empleada para cualquier tipo de funcionalidad que sea apoyada por CSS.

Definir en Linea

Aunque muy similar a la metodología utilizada en clases ( class ) esta se especifica dentro del tag de la siguiente manera:

<h1 style="color:blue ; font-style: italic"> Titulo definido con parametros en Linea </h1>



Esta última metodología también garantiza que solo tags individuales sean afectados.

Etiquetas: css, popup
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:14.