mouseover thumbnail, view image (without click) (Full Version)

All Forums >> [Web Development] >> Microsoft FrontPage Help



Message

mineralking222 -> mouseover thumbnail, view image (without click) (2/2/2006 11:42:52)

Hi everyone,

I have a table.
In the table are some thumbnails in individual cells.
What I would like to have happen when you mouseover a thumbnail, a larger preview of the image to show in a separate cell within the same table.
DHML built into FP doesn't seem to allow me to do that, plus if the images are different sizes (and they are) they all try and fit into the same size and pixelize.
I'm sure it's do-able, I've seen it around plenty.
Just not sure how it's done.
Thanks for your help.

MK



reformed hater -> RE: mouseover thumbnail, view image (without click) (2/2/2006 11:50:10)

i was just looking at a helpful tip in the hints and tips section here. not sure if this is what you're asking for but here's a link

http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm#
try it i haven't had a chane to



Tailslide -> RE: mouseover thumbnail, view image (without click) (2/2/2006 11:52:07)

I've used that script plenty - it works very nicely and if you look on the forum of DD you can find an extra bit to add a caption. Let me know if you can't find it and I'll post it if you need it.



mineralking222 -> RE: mouseover thumbnail, view image (without click) (2/2/2006 12:06:07)

that looks very helpful.
does it work in reverse too?
i have an image that when moused over will display a set of thumbnails?



Tailslide -> RE: mouseover thumbnail, view image (without click) (2/2/2006 12:08:27)

Errmmm...? Off the top of my head I'd say probably not (at least not this script). Are you planning multiple lots of thumbnails paired with multiple big images?



Tailslide -> RE: mouseover thumbnail, view image (without click) (2/2/2006 12:22:19)

BTW you'll want to ensure it works if people aren't using a mouse - so on focus too!



mineralking222 -> RE: mouseover thumbnail, view image (without click) (2/2/2006 13:20:48)

Thanks Tailslide.

I'm going to try and draw you a picture here.
Nothing is up to look at yet because well it's still being developed. I don't see a way to show you a screenshot either.

The artists wants the numbers 1, 2 3, and 4 listed down the side of the page.
I have a table with 2 columns and 4 rows.
the numbers are in the left cell of each row,
i've merged the right cell columns together to make a big area, a display area.
when you mouseover number 1 let's say, he wants the thumbnails to appear in the display area. then he wants the thumbnail effect which will be in a separate table within the first table.

so something like this"


mouseover the #1 ---- thumbnails appear/mouseover thumbnail --- large image appears

3 across.

i think it's too complicated. i'm gonna talk him out of it all occuring on the same page and have them click one to get to the page of thumbnails. then i'll be able to use the script you sent over.

what is a DIV tag by the way?

thanks for your help,
MK



Rocket Boy -> RE: mouseover thumbnail, view image (without click) (2/2/2006 13:32:12)

To do a screen shot, press CTRL+Print Screen to copy what is on the screen. Then you will need to paste it into a paint prog of some description. That can then be saved as a JPG.

[:)]



Tailslide -> RE: mouseover thumbnail, view image (without click) (2/2/2006 13:36:26)

Blimey that is complicated! Short of using Frames which isn't a good idea I'd try to convince them to have the left hand list of names link to a page for each artist (with the same list on the left hand side if you see what I mean).

A div is a section of markup that is used to separate one area from another - usually used with CSS layouts so a div will often take the place of a table cell - i.e. a little box that you can put bits of your site in! There's nothing to stop you using divs within table cells if you want. Just think of a div as another word for a section.



mineralking222 -> RE: mouseover thumbnail, view image (without click) (2/2/2006 14:17:37)

thanks rocket boy, i just didn't see how to post it here.
can get a screenshot into a jpeg ok.



mineralking222 -> RE: mouseover thumbnail, view image (without click) (2/2/2006 14:23:12)

OK, comprende on the DIV.
I've got him rethinking the whole thing now.
picture this.

_ _ _ _
_ _

_ _

_ _

_ _

_ _ _ _



each dash is a thumbnail, in a cell.
the middle is one giant cell, which will be the display area.

reading the script you suggested, i can't decipher how to place each thumbnail in its appropriate "dash", nor the larger image to dsiplay in the middle.

what i got was text randomly placed in the page, not inside the table, and when moused over, it gave a picture but also randomly placed in the page and not the table area.

how do i designate the exact cell where each thumbnail is to go?

thanks again for your help.

i may be able to post something for you to look at on a blank page in a different site just to take a look see.

MK

edit - it didn;t display how i though it would.
you cant see the dashes properly.
just picture a sqaure with 4 thumbs on top, side, bottom, side and the middle is the display area.
MK



mineralking222 -> RE: mouseover thumbnail, view image (without click) (2/2/2006 14:45:52)

ok i got it figured out, the placement part.i'm just inserting "web component", then "html" in theach cell an dpsting the code.

no problemo there.

it looks like i have to make the thumbnails first too because i'm jusy getting blank boxes, but the mouseover effect is working how i want it to.



mineralking222 -> RE: mouseover thumbnail, view image (without click) (2/2/2006 15:52:35)

a new twist.
by the way tailslide it works great.
got everything exactly like i wanted it.
i do notice though that of the 16 images, a couple of them kind of slide the cells over a little when you mouse around. no picture is larger than the allotted size in the display area, so i'm not sure why it's happening. any ideas?

now the other thing i wanted to be able to do is instead of having an image appear when moused over, how about text? can simple typed text appear instead of an image or image of text?
thanks once again,
MK



Tailslide -> RE: mouseover thumbnail, view image (without click) (2/2/2006 16:18:42)

It's difficult to tell without looking at it - could you post a URL or the code?

That particular script is set up to show images but you can have an image and a caption - is that any good?



mineralking222 -> RE: mouseover thumbnail, view image (without click) (2/9/2006 0:48:16)

Hey Tailslide,
I got the site up and the script isn't fully working. There are 2 thumbnails and 2 images on one page that don't show here and 2 images that don't show when moused over but the thumbs are there
It is working on my local drive fine. If it helps, there was an earlier thumbnail and photo missing on page 4, and after several times of deleting all files on the server and re-publishing it came on.
I wanted to ask if you thought it had anything to do with web propagation since the DNS was just changed this morning. I've been through the code several times but can't see any errors (other than I didn't put the images in the images folder before linking them up so the file list is pretty long) but maybe I'm just goofy. All images are downloaded to the server as per FP's file list.
An open invitation for help to any and all.
Thanks so much once again,
MK



Tailslide -> RE: mouseover thumbnail, view image (without click) (2/9/2006 2:57:00)

The problem seems to be that echo_pics_A5.jpg and echo_pics_A9.jpg aren't on the server (at least not where they should be). Can you try to re-upload those two images?

It's possible that you might have a delay seeing the result due to ISP caching - but I should be able to see it as I've not been to your site before.



reformed hater -> RE: mouseover thumbnail, view image (without click) (2/9/2006 9:51:29)

the site looks great, but on work 1 image 11 sends up a blank box when moused. Not nit picking just informing. But i dig the site and the art/pictures post when its completly done.



mineralking222 -> RE: mouseover thumbnail, view image (without click) (2/9/2006 11:23:03)

Tailslide, your reply helped me figure it out.
The pics in question had .JPG in caps as the file extension, not .jpg in lower case.
The script must be very precise, because as soon as I renamed the images with the lower case .jpg, it worked.
So thank you very much, everyone, for the suggestions and help. My client is very happy. Thanks for the kind words reformedhater.

MK



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625