position: absolute / relative

[MSoulas]

Hola a Todos!
Quisiera saber si saben como solucionar esto.
Al hacer clic sobre una imagen, quiero que aparezca mas grande, y así con 4 fotos mas (pero sin usar flash y sin abrir otra ventana).
Acá pude lograrlo con css, pero lo veo bien solo en mi monitor...

#foto { position: absolute; border-style: none; margin: 43px 0px 500px 242px; visibility: hidden; }
a { text-decoration: none; }
img { border-style: none;[

Entonces cuando pongo position: relative se desarma toda la página.
Alguien sabe cual es el error?

Muchas gracias!

<script language="javascript" type="text/javascript">
// VISOR DE FOTOS EN DIAPOSITIVAS CENTRADAS
//
// Este script y otros muchos pueden
// descarse on-line de forma gratuita
// en El Código: www.elcodigo.com


//CONFIGURACION NOMBRES DE FOTOS
// Incluir ruta y nombre del archivo
// Ejemplos:
// 1. http://mi.pagina.com/imagenes/mi_imagen.gif
// 2. mi_imagen.gif >> si esta en misma carpeta que pagina HTML
// 3. /mi_imagen.gif >> si esta en el raiz de documentos del servidor
var imagenes = new Array (
"foto1.jpg",
"foto2.jpg",
"foto3.jpg",
"foto4.jpg"
)
//FIN CONFIGURACION


//ancho / alto doc
var docAncho = 0
var docAlto = 0

//repeticion calculo posicion capa
var idMovimiento = 0

function muestra_foto( indice ) {

var miFoto

//compruebo si se puede ejecutar el script en el navegador del usuario
if (!document.all && !document.getElementById)
return

//oculta capa foto (por si foto anerior que no se haya ocultado)
ocultar("foto")

//muestra icono reloj para indicar cargando
mostrar("reloj")
idMovimiento = setInterval('mover("reloj", x+5,y-28)', 30)

//codigo HTML para la imagen
codigo_img = "<a href=\"javascript:ocultar( 'foto' )\" title=\"Pulse para cerrar\"><img id=\"imagen\" src=\"" + imagenes[indice - 1] + "\" onLoad=\"ver_foto()\" /></a>"

//cambia contenido capa
miFoto = obtiene_objeto( 'foto' )
miFoto.innerHTML = codigo_img

}

//obtiene objeto por nombre
function obtiene_objeto( idobj ) {
//obtiene objeto capa
if (document.getElementById) {
return document.getElementById( idobj )
} else if (document.all) {
return document.all[ idobj ]
} else {
return null
}
}

//muestra capa
function mostrar( que ) {

var miCapa = obtiene_objeto( que )
if ( miCapa )
miCapa.style.visibility = "visible"

}

//oculta capa
function ocultar( que ) {

var miCapa = obtiene_objeto( que )
if ( miCapa )
miCapa.style.visibility = "hidden"

}

//obtiene posicion puntero (para poner el reloj)
function MovimientoRaton(e){

if (!e) var e = window.event

if (e.clientX) {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop
window.status = x + ' : ' + y
}

}

//la imagen del reloj sigue al puntero
function mover( que, posx, posy ) {

var miCapa = obtiene_objeto( que )

if ( miCapa ) {

//para navegadores compatibles DOM
if ( document.getElementById ) {
miCapa.style.top = posy + 'px'
miCapa.style.left = posx + 'px'
}
//para el IE 4.x
else if ( document.all ) {
miCapa.style.pixelTop = posy + 'px'
miCapa.style.pixelLeft = posx + 'px'
}
}
}

//la imagen del reloj se para
function para_capa() {
if ( idMovimiento ) {
clearTimeout( idMovimiento )
idMovimiento = 0
}
}

//muestra foto, centra y oculta reloj
function ver_foto() {

var miImagen = obtiene_objeto('imagen')

//posicion imagen
doc_ancho_alto()
var centro_x = (docAncho - miImagen.width)/2
var centro_y = (docAlto - miImagen.height)/2

mover('foto', centro_x, centro_y)
mostrar('foto')
ocultar('reloj')

}

//original de http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
//determina el ancho / alto del documento
function doc_ancho_alto() {

if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
docAncho = window.innerWidth
docAlto = window.innerHeight
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
docAncho = document.documentElement.clientWidth
docAlto = document.documentElement.clientHeight
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
docAncho = document.body.clientWidth
docAlto = document.body.clientHeight
}

}

if (document.layers) { document.captureEvents(Event.MOUSEMOVE) }
document.onmousemove = MovimientoRaton


</script>

[libso]

hola puedes probar con un css

Código HTML:

.foto{
   position  : relative;
   height     : 100px;
    weidth   : 100px;
}
.foto:hover {
    position   : absolute;
    height     : 200px;
    weidth    : 200px;
}

o con JS

Código HTML:

.foto{
   position  : relative;
   height     : 100px;
    weidth   : 100px;
}
.foto2 {
    position   : absolute;
    height     : 200px;
    weidth    : 200px;
}

function agranda (my){
   my.className= "foto2"
}

<img src="img.png" onclick="agranda(this)"> 

haber si este cachito de codigo te sirve de algo