Todas las entradas recientemente escritas, así como las antigüas-tanto de "AyudaKaos, como las de este blog (Aire(bis)- están reunidas en Epílogo. porque... resulta más fácil encontrarlo todo en el mismo lugar...


Sin comentarios

Imagen pop-up con ventana


ppdéis ver cómo funciona en la sidebar izquierda-al final-, picando donde dice "con pala y todo": saldrá una ventana con un muñeco dentro.



Y se hace así:

1º.- Insertar ésto dentro de la tag head de la plantilla (yo lo he puesto en un Elemento de página HTML-jAVA):




<script type="text/javascript">



// JK Pop up image viewer script- By JavaScriptKit.com

// Visit JavaScript Kit (http://javascriptkit.com)

// for free JavaScript tutorials and scripts

// This notice must stay intact for use



var popbackground="lightskyblue" //specify backcolor or background image for pop window

var windowtitle="Image Window" //pop window title



function detectexist(obj){

return (typeof obj !="undefined")

}



function jkpopimage(imgpath, popwidth, popheight, textdescription){



function getpos(){

leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0

toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0

if (window.opera){

leftpos-=screenLeft

toppos-=screenTop

}

}



getpos()

var winattributes='width='+popwidth+',height='+popheight+',resizable=yes,left='+leftpos+',top='+toppos

var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'

if (typeof jkpopwin=="undefined" || jkpopwin.closed)

jkpopwin=window.open("","",winattributes)

else{

//getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too

//jkpopwin.moveTo(leftpos, toppos)

jkpopwin.resizeTo(popwidth, popheight+30)

}

jkpopwin.document.open()

jkpopwin.document.write('<html><title>'+windowtitle+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br>'+textdescription+'</body></html>')

jkpopwin.document.close()

jkpopwin.focus()

}



</script>





2º.- Y ésto dentro de la tag Body, donde queráis que aparezca la imagen en su ventana (que yo he puesto, a continuacíon del código anterior, en el Elemento de página):




<a href="#" onClick="jkpopimage('food1.jpg', 325, 445, 'Breakfast is served.'); return false">

Breakfast pancakes</a>





Insertad aquí la URL de la imagen y cambiad el texto de la imagen y el del link a vuestro gusto.

Vía: JavascriptKit

Nota: los números que van detrás de la URL (en el ej. "food1.jpg"), son el ancho y el alto, respectivamente, de la ventana pop-up: cambiadlos a vuestra conveniencia.