| View previous topic :: View next topic |
| Author |
Message |
Cheese
Joined: 24 Oct 2009
Posts: 11
Location: Sydney, Australia
|
 Posted: Sat Oct 24, 2009 12:48 am magnify image on hover problems |
 |
|
|
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???
Last edited by Cheese on Sat Oct 24, 2009 11:38 pm; edited 1 time in total |
|
PayneLess Designs
Joined: 28 Feb 2007
Posts: 4289
Location: MS
|
| Posted: Sat Oct 24, 2009 3:55 am |
|
|
|
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
|
| Posted: Sat Oct 24, 2009 5:57 pm |
|
|
|
| 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: 4289
Location: MS
|
| Posted: Sat Oct 24, 2009 6:50 pm |
|
|
|
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.
Last edited by PayneLess Designs on Sun Oct 25, 2009 12:18 am; edited 1 time in total |
|
Cheese
Joined: 24 Oct 2009
Posts: 11
Location: Sydney, Australia
|
| Posted: Sat Oct 24, 2009 11:37 pm |
|
|
|
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: 4289
Location: MS
|
|
Cheese
Joined: 24 Oct 2009
Posts: 11
Location: Sydney, Australia
|
| Posted: Sun Oct 25, 2009 12:40 am |
|
|
|
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: 4289
Location: MS
|
| Posted: Sun Oct 25, 2009 9:31 am |
|
|
|
| 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
|
| Posted: Sun Oct 25, 2009 2:09 pm |
|
|
|
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  |
|
PayneLess Designs
Joined: 28 Feb 2007
Posts: 4289
Location: MS
|
| Posted: Mon Oct 26, 2009 12:12 am |
|
|
|
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. |
|
|
HTML Help Forum
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
You are very welcome. Did you tweak the position for your larger images so they position as you wanted? Hope following helps...
