homepage Welcome to WebmasterWorld Guest from 54.226.18.74
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderator: open

Site Graphics and Multimedia Design Forum

    
Enlarge image on same page with css only
Problem with base href when image is accidentally clicked by user
zerotre




msg:3553463
 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>

 

Receptional Andy




msg:3553525
 2:14 pm on Jan 21, 2008 (gmt 0)

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




msg:3553673
 5:11 pm on Jan 21, 2008 (gmt 0)

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




msg:3554239
 4:31 am on Jan 22, 2008 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved