Miért töltődik be az oldal újra, illetve mit lehet ellene tenni ?

Amolyan koca-programozóként készítem a weboldalamat, de egy rutin, ami asztali gépen jól működik, az a mobilon használhatatlan.

A képmegjelenítő / nagyító résszel van problémám.

Itt a link.

http://metix.hu/0111.html#

Asztali gépen, görgesd lejjebb az oldalt és egérrel csak simán állj rá a fényképezőgép ikonra, ekkor megjelenik egy kép. Eddig jó, de ha ráklikkelek az ikonra, akkor újratölti az oldalt.

A mobilon történő érintés meg olyan, mintha asztali gépen ráklikkelnék. És ez használhatatlan.

Valahogy meg kellene akadályozni az oldal újra betöltését, vagy nem is tudom mi lenne a jó megoldás.

Az egész html kódot próbáltam a legegyszerűbben megírni, csak amennyi a mostani ismeretanyagom engedi. Egy profi programozó jót nevetne rajta.

A kód részlet ez lenne.

<style type="text/css">

#zoom { position: relative; top: 0px; left: 0px; width: 27px; transparent; }

#zoom a.p1, #zoom a.p1:visited { border: 0pt none ; transparent none repeat scroll 0%;

display: block; width: 27px; height: 17px; text-decoration: none; top: 0pt; left: 0pt; }

#zoom a img { border: 0pt none ; }

#zoom a.p1:hover { text-decoration: none;background-color: rgb(150,150,150) ;

color: rgb(0, 0, 0); }

#zoom a .large { border: 0px none ; display: block; position: absolute;

width: 0px; height: 0px; top: 0px; left: 0px; }

#zoom a.p1:hover .large { border: 2px solid black; display: block;

position: fixed; top: +20px; left: +100px; width: 400px; height: 300px; }

</style>

<div id="zoom">

<a class="p1" href="#"> <img src="foto_ikon.gif">

<img class="large" src="nagyított.jpg"