Page 2 of 2 FirstFirst 12
Results 11 to 16 of 16

Thread: CSS Smart Image Enlarger "on click"

  1. #11
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    245
    Thanks
    39
    Thanked 24 Times in 24 Posts

    Default You do NOT have JavaScript onClick or onMoueOver actions

    You are still using CSS HOVER/SPAN to show position: absolute images -- changing display: none; to display:block;
    Code:
    <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.
    Last edited by auntnini; 02-18-2012 at 12:48 AM. Reason: add DD link

  2. The Following User Says Thank You to auntnini For This Useful Post:

    momonline (02-18-2012)

  3. #12
    Join Date
    Mar 2006
    Posts
    75
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #13
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    245
    Thanks
    39
    Thanked 24 Times in 24 Posts

    Default Google code is a mess

    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.

    Code:
    <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="   ...

  5. #14
    Join Date
    Mar 2006
    Posts
    75
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #15
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    245
    Thanks
    39
    Thanked 24 Times in 24 Posts

    Default You need JavaScript

    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.
    Last edited by auntnini; 02-18-2012 at 08:46 PM. Reason: GoDaddy not Google

  7. #16
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    245
    Thanks
    39
    Thanked 24 Times in 24 Posts

    Default See this new post

    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
    Last edited by jscheuer1; 06-25-2012 at 04:22 PM. Reason: a site owner's request

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •