zerotre - 12:21 pm on Jan 21, 2008 (gmt 0)

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>