Haaaalp! HTML Question

LeChatNoir · Post by **LeChatNoir** » Thu Nov 25, 2010 8:58 am

I have a html question that hopefully someone much more versed in code than I could help with.

I am working on a website and want to add a feature to the gallery pages similar to this page:

Example Page

Since Iâ€™ve not got the spare cash to pay a real pro to develop this site for me, I do what Iâ€™ve always doneâ€¦ try and figure it out and create it myself. Using Site builder, I can do the mouse over image thing, but it only allows for switching between the two images in the same location. What I want is to move the mouse over a thumbnail, and have its respective larger image show in center screen. I used the Google "inspect element" function to review the code for the above page, as well a sample page with the typical mouse over image commands, but I canâ€™t figure out in either one where/how to define the area for the mouse over image to be displayed in a spot other than the thumbnail. However I am NOT well versed in html and have likely missed something.

Can anyone help me with this?

Tiahaar · Post by **Tiahaar** » Thu Nov 25, 2010 5:37 pm

well, on using the 'view source' right click, it looks like the cool mouse-over image changey thing is all crammed into line 537 of your sample page...maybe reverse engineer from there? I'm not very good at HTML either.

Post by **Eric** » Thu Nov 25, 2010 6:38 pm

Well, it's not done with HTML. It's XHTML, which is a little (lot) harder to work with. With basic HTML you're just going to get a roll over in the same location, you'd have to have a "clickable" image open in another frame to create a similar look.

Probably your easiest solution is to use a pre-made flash gallery. There are some you can get for free if you don't mind there logo in the corner, if you like it you can buy it & get rid of the logo.

Personally I like the SimpleViewer line of products, all of which work seamlessly with Picasa. I've used both SimpleViewer & AutoViewer, and bought the pro version of AutoViewer.

They're not quite what you want- no rollover image- but they look sharp & create a gallery in a minute or so.

You can check my website if you want to see what they look like. Just click one of the images on the front page.

You can also hunt the web for pre-made XHTML image gallery, but I've only ever seen them in flash. Granted, I've only ever looked for them in flash.....

Post by **Eric** » Thu Nov 25, 2010 9:40 pm

Okay, I couldn't leave this alone.

I was wrong- it's java, not xhtml.

THIS should help you out with basics.

And if you google "rollover image gallery" you get a ton of hits for source codes and programs and stuff.

However, this stuff is still more of a pain than a good old flash gallery, IMHO.

Trick to remember- always google "image gallery", not "photo", "photo's", "pictures" etc. The key work you want is "image".

LeChatNoir · Post by **LeChatNoir** » Thu Nov 25, 2010 9:56 pm

Eric!!!

I think that's it! That's what I as looking for. I'll go through that tutorial and learn about it. Will post back and let you know how it goes.

It's all about having the correct keywords.

Thank you, thank you both for the responses.

karine · Post by **karine** » Sat Nov 27, 2010 11:57 pm

Oooh.. this has led us on a whole new field of exploration! ((((thanks, guys)))

I'm calling it " h-t-MEOW " !

Post by **Eric** » Sun Nov 28, 2010 3:00 pm

karine wrote:Oooh.. this has led us on a whole new field of exploration! ((((thanks, guys)))

I'm calling it " h-t-MEOW " !

Don't you love it?

I've always done the basic coding for my website myself- lots more control over how it looks & a sense of pride when you get things right. When it comes to the image galleries I couldn't find coding that I liked, so I switched to a flash program that has parameters I can modify. The hard part is done, I get to make it look like I want.

Geektime!