CSS Smart Image Enlarger "on click"

[auntnini]

You are still using CSS HOVER/SPAN to show position: absolute images -- changing display: none; to display:block;

<a class="thumbnail" href="photo1">
<img alt="" src="http://i1225.photobucket.com/albums/ee389/emmesf/jenna0403mm-fb.jpg" width="120px" height="180px" style="border-width: 0px;border-style: solid;" /> 
<span><img alt="" src="http://i1225.photobucket.com/albums/ee389/emmesf/jenna0403mm-fb.jpg" /><br />
Photographer: Luis Aragon</span></a>

Use the MorganGaynin or DynamicDrive http://www.dynamicdrive.com/dynamici...thumbnail2.htm model to add JavaScript to thumbnails, as shown above.

[momonline]

Honestly, this is all Greek to me. Can you tell me where/what I need to add because I am totally lost.

My host is GoDaddy using WebSite Tonight and they have three different areas where I had to add coding: a CSS/style section, a script section and then the HTLM section. I have no idea where/what to add. It's extremely confusing to me as I have no actual coding experience.

[auntnini]

Thought I had explained "how to" with examples. Maybe someone else can do better. Notice that -- because you are using CSS HOVER/SPAN technique -- when you move off thumbnail, the large image disappears. But that might be a good thing because nobody can click large image and copy it, The GoDaddy generated stuff is gooky. There is excessive code and much of it is wrong -- e.g., <FONT> tag has been long dead and look at those extra non-functional <span></span> tags.

But "WHO CARES?" Your site and the work displayed LOOKS GREAT! I think you could just leave it AS IS until you do some CATCH UP with HTML, CSS and JavaScript.

<font face="Arial, Helvetica, sans-serif" style="font-size: 11px;"><br />
<font face="Arial, Helvetica, sans-serif" style="font-size: 11px;" color="#463636">SCROLL DOWN FOR CONTACT INFORMATION.</font></font>
	<div class="sf_extra1"><span></span></div>
	<div class="sf_wrapper"><div style='display:block;overflow:visible;margin:0;padding:0;'><div class='sf_undocked' style='display:block;height:0;position:absolute;margin:0;padding:0;overflow:visible;width:0;top:0;z-index:999998;left:auto;'>
</div></div>
		<div class="sf_region2"></div>
		<div class="sf_extra10"><span></span></div>
                <div class="sf_header_wrapper">
		<div class="sf_extra2"><span></span></div>
		<div class="sf_region3">
		<div class="sf_navigation" ><div class="widget main_nav"><h3 class="   ...

[momonline]

Thank you auntnini for the kind words about the content of my site!!

The problem with a retouching site is that it's important to show the "before" photo and that's what I'm attempting to accomplsih.

I want to have "onClick" on the thumbnail to "swap" with the enlarged photo so that the enlarged photo has a toggle showing the before/after images.

May not be possible, I don't know

[auntnini]

It is possible with JAVASCRIPT onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUP event handlers. -- as demonstrated above. But (to the best of my knowledge) NOT with the CSS HOVER/SPAN technique you are using.

Someone correct me if I am wrong.

If I am right, it would seem that you have to scrape that GoDaddy code gook and use some JavaScript model.

Offering someone (herein or elsewhere) $100 bucks to fix it for you might pay off in the long run.

[auntnini]

This does not answer your CSS HOVER/SPAN problem, but it is interesting and somewhat related to the rollOver JavaScript model I suggested.

See as discussed at http://www.dynamicdrive.com/forums/s...ad.php?t=67534 regardi9ng "... onMouseover text descriptions"

The code therein looks like it was generated by Dreamweaver, but postee says it was based on JavaScriot Kit http://www.javascriptkit.com/javatut...ossmenu2.shtml