Enlarge image on same page with css only

Problem with base href when image is accidentally clicked by user

[zerotre]

I am trying to enlarge images from thumbnails without opening pop-up windows and without javascript, with simple css. By the way, I have so far used many different systems, creating html files for each large image, using popup javascript, using frames, opening in the same window. If css works well, I will just have to make small and large images, just taking care not to put too many images in one file, since the large ones are loaded though made visible only on user's action.

The example below does the job beautifully. On mouse over the large image appears in the large form without disassembling the page, just covering the text, and removing the mouse everything is back as before. The image code is as follows:

<div id="imgmenu">
<a class="p1" href="#nogo" title="thumbnail image"><img src="/path-to-the-small-image.jpg" title="Thumbnail image" alt="Thumbnail image" / ><img class="large" src="/path-to-the-large-image.jpg" title="Enlarged view of image" alt="Enlarged view of image" /></a>
</div>

However, the problem rises with the
href="#nogo"
function inside each image code. Since I have at top of the file
<BASE href="http://www.name-of-site/">
If the user clicks on the image - which he is not supposed to do since instructions will say "pass the mouse over the small image to enlarge" but this may happen and often - the click leads to the homepage of the site -- if I insert at top
<BASE href="http://www.name-of-site/path-to-the-file">
the file itself is reloaded.
Are there any suggestios as to how change the css so that the
href="#nogo"
does not perform any function?

--------
<style type="text/css">
#imgmenu {position:relative; top:10px; left:10px; width:75px; background-color:#fff; z-index:100;}
#imgmenu a.p1, #menu a.p1:visited {display:block; width:75px; height:75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#imgmenu a img {border:0;}
#imgmenu a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#imgmenu a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#imgmenu a.p1:hover .large {display:block; position:absolute; top:-65px; left:150px; width:400px; height:300px; border:5px solid #ccc;}

#info {z-index:100; height:22em;}
</style>

[Receptional Andy]

Why have the link at all? If it's just so users get feedback (i.e. the hand icon) then just change the icon with CSS when the user hovers with 'cursor:pointer'

[zerotre]

Thanks, your suggestion really was the solution!

As a reference for others, I changed the image tag and the css as shown at bottom (the code is for a landscape image 400 x 300 pixel). I welcome suggestions to make the code simpler. As it is, it opens the large image somewhat to the left and a little above the thumbnail, which was what my design needed. The position can be altered varying the pixel numbers for the top and left in the line starting with
#imgmenu .p1:hover .large {display:block; position:absolute;

-------------------------
<div id="imgmenu">
<div class="p1" title="thumbnail image"><img src="/path-to-the-small-image.jpg" title="Thumbnail image" alt="Thumbnail image" / ><img class="large" src="/path-to-the-large-image.jpg" title="Enlarged view of image" alt="Enlarged view of image" /></div></div>

-------------------------
<style type="text/css">
#imgmenu {position:relative; top:10px; left:10px; width:75px; background-color:#fff; z-index:100;}
#imgmenu .p1 {display:block; width:75px; height:75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#imgmenu .p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#imgmenu .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#imgmenu .p1:hover .large {display:block; position:absolute; top:-65px; left:150px; width:400px; height:300px; border:5px solid #ccc;}
#info {z-index:100; height:22em;}
</style>

[zerotre]

As an update on my previous post, I found a css image zoom code extensively described, tested it with different (recent) browsers and works fine. Make a research for CSS Photo-Caption Zoom (PZ3) if anybody wants to find it.

The method suggested is brilliant, starting from the assumption that if the large image has to be loaded already in the page, there is really no need for a thumbnail. The css forces the image to the desired smaller size, then on mouseover (with a return false so that it will not produce any action) shows the actual large image in a nice fluid manner.