HTML Help

Cheese · Joined: 24 Oct 2009 Posts: 11 Location: Sydney, Australia

I was able to get an image to enlarge on hover, using the information in the topic below:

http://www.htmlcodetutorial.com/help/ftopic10282.html&highlight=magnify+image

However, I have approx. 20 to 30 images on the page (side by side, in rows).

When I apply the code changes the image is enlarged when you hover on the thumbnail, but it puts all of the images below each other.

Unfortunately I didn't take a screen shot before I put it back to how it was before.

Here is a screenshot of how it looks now:

How do I make all of the images enlarge on hover, while keeping the thumbnails in their current position???

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3593 Location: Biloxi, MS

And just where are you wanting them to be when you hover over an image? If you used the code from CSSPlay, then this is probably the CSS to position images:
Code: #menu {position:relative; top:10px; left:100px; width:75px; background-color:#fff; z-index:100;}

#menu a.p1:hover .large {display:block; position:absolute; top:-65px; left:150px; width:300px; height:300px; border:10px solid #ccc;}

You should be able to adjust these to position the images.

Cheese · Joined: 24 Oct 2009 Posts: 11 Location: Sydney, Australia

PayneLess Designs wrote: And just where are you wanting them to be when you hover over an image? If you used the code from CSSPlay, then this is probably the CSS to position images:
Code: #menu {position:relative; top:10px; left:100px; width:75px; background-color:#fff; z-index:100;}

#menu a.p1:hover .large {display:block; position:absolute; top:-65px; left:150px; width:300px; height:300px; border:10px solid #ccc;}

You should be able to adjust these to position the images.

First of all, thankyou very much for your post. I am at work at the moment, but I'll play around with that part of the code when I get home and see if I can get it to work.

With relation to where I want the images to be on hover, I would like the thumbnails to remain in the position that they are now; ie. side by side in rows, and the larger image exactly how it appears in the CSSPlay example (to the right of the thumbnail image).

The position of the larger image was perfect, it appears 300 x 300 and to the right of the thumbnail, but it puts all of the thumbnails below each other.

One part of the problem may be that the original images are different sizes and I was using inline html to resize them to 100 x 100, as seen below:

Code:

<div id="content">
<img src="http://....com/gallery1.jpg" width="100" height="100" border="2px" />
<img src="http://....com/gallery2.jpg" width="100" height="100" border="2px" />

I did this to avoid having to manually resize each image when I uploaded them originally. I then removed that inline code when I applied the hover CSS...

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3593 Location: Biloxi, MS

The "#menu a.p1:hover .large " part is where you adjust large image position. Play with the "top" and "left" properties until you get one set to where you want it. No need to change the thumbnails.

If you are using a common CSS file, and I recommend that you do, then code like this: Code: <div id="content">
<img src="http://....com/gallery1.jpg" width="100" height="100" border="2px" />
<img src="http://....com/gallery2.jpg" width="100" height="100" border="2px" /> can be style:

Code: #content img.thumbs {
width: 100px;
height: 100px;
border: 2px inset #f0f;
}

Then your HTML could all be for thumbs: Code:
<div id="content">
<img class="thumbs" src="http://....com/gallery1.jpg" />
<img class="thumbs" src="http://....com/gallery2.jpg" />

Lot less coding with a class added. Could just use a copy/replace operation to do all thumbs.

Cheese · Joined: 24 Oct 2009 Posts: 11 Location: Sydney, Australia

Payneless, you truly made this painless! Thankyou so much!

I added the class as you suggested and resized the thumbs in the CSS file.

I didn't actually create separate larger files as suggested in the CSSPlay example, I just used the same image as you can see below:

Code: <a class="p1" href="#nogo"><img class="thumbs" src="http://....com/gallery1.jpg" /><img class="large" src="http://....com/gallery1.jpg" /></a>

As you may have guessed, I skipped over some parts of the tutorials I used to teach myself as some of it didn't apply to what I was doing at the time.

However, I think I'll be reading up on classes to cut down on a lot of the clutter in my code.

Thanks again, you were a MASSIVE help.

Cheese

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3593 Location: Biloxi, MS

:lol: You are very welcome. Did you tweak the position for your larger images so they position as you wanted? Hope following helps...

CSS Tutorials:

http://www.w3schools.com/Css/default.asp
http://www.csstutorial.net/
http://www.echoecho.com/css.htm
http://www.html.net/tutorials/css/
http://www.w3.org/Style/Examples/011/firstcss

http://htmldog.com/guides/cssbeginner/
http://www.davesite.com/webstation/css/
http://www.htmlcodetutorial.com/character_famsupp_193.html

Tableless Web Design: http://en.wikipedia.org/wiki/Tableless_web_design
Images, Tables, and Mysterious Gaps: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

Cheese · Joined: 24 Oct 2009 Posts: 11 Location: Sydney, Australia

Yeah, I was going to make each larger image pop up on the right of the thumb, but I think I'd have to do that inline somehow? At the moment I have them all set to appear in the middle of the page.

Like this:

Code: <head>
<title>Gallery</title>
<style type="text/css">
#content a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#content a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#content a.p1:hover .large {display:block; position:absolute; top:200px; left:450px; width:400px; height:400px; border:5px solid #ccc;}
</style>
</head>

Check your PM's mate

P.S.

Thanks for the links!

What I know so far, I taught myself with the htmldog HTML/CSS Beginner & Intermediate tutorials...

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3593 Location: Biloxi, MS

You're welcome for the links. The CSS tutorials here plus those have a lot of good info. CSS 3.0 is slowly being supported, so hope to find some good tutorials on it.

Cheese · Joined: 24 Oct 2009 Posts: 11 Location: Sydney, Australia

Hey Payneless, re your suggestions:

Yeah, I noticed that some of the images are distorted. So I'm assuming that downloading batch thumbnail software would be the better way to fix this problem, rather than inline html (that would probably be overidden by the CSS anyway)?

Also, were you only referring to images on the Gallery page being distorted, or others too?

I like your idea about thumbs down the side with a clear area for the larger image, I'll play with this when I get home tonight...

Thanks again :D

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3593 Location: Biloxi, MS

Well. The images may just need be made all to the same size for thumbnails and large images as the image dimensions as used in the mouseover code is incorrect and sets all images to same sizes. This only works if all images have correct aspect ratio for those sizes.

Once you have ALL thumnails and large images sized correctly using just the one size for the thumbs and the one size for the large, your images should look just fine. The only way to be sure is to look at each in a graphics editor and crop, resize, etc. as you see fit. Long and tedious, but it works.

I think your home page image was distorted, too. Just looked at gallery and that one page.