Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: CSS Smart Image Enlarger "on click"

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

    Default CSS Smart Image Enlarger "on click"

    Right now, you hover over the thumbnail of "Photo A" and "Photo A" appears enlarged.

    What code can I ad and where so that when you left click on the thumbnail of Photo A, the enlarged Photo A becomes a mouseover showing "Photo B"?

    http://www.dynamicdrive.com/style/cs...enlarger/#nogo

    Thank you!
    Last edited by momonline; 02-09-2012 at 11:38 PM. Reason: make it more understandable, hopefully :)

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

    Default

    EDIT TO ABOVE:

    If "on click" is not an option on "Photo A" thumbnail...

    Is mouseover possible on enlarged Photo A?

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

    Talking

    EDIT MORE TO ABOVE:

    For what it's worth, I've researched onclick/swap image but cannot figure out where to place the code in the above link. I've searched these forums as well but still need help.

    Please, someone

  4. #4
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    231
    Thanks
    32
    Thanked 24 Times in 24 Posts

    Default Change large image?

    At a demo site http://artdemo.tripod.com/illustration/indexCSS.html, I used that sort of "hover/span" technique -- which keeps <span> image linked to the reference point.

    But it would seem you want a onMouseOver or onClick effect that would change a positioned image "holder" -- as demostrated at http://webdocdo.tripod.com/genericRo.../multiple.html and used at http://www.auntnini.com/new/index.htm and http://www.josephdenaro.com/color/index.html

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

    momonline (02-13-2012)

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

    Default

    Thank you auntnini... I appreciate your help.

    I'll take a look at those links and be back here if I'm unable to figure something out.

  7. #6
    Join Date
    Mar 2006
    Posts
    75
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Exclamation

    Right now I'm using http://www.dynamicdrive.com/style/cs...enlarger/#nogo
    and I love the it looks.

    What I want now is for onclick on the thumbnail to swap the enlarged image with a different version of the enlarged image.

    So, for example, on the first image:

    <a class="thumbnail" href="#thumb"><img alt="" src="/jenna.jpg" width="120px" height="180px" style="border-width: 0px;border-style: solid;" /><span><img alt="" src="jenna.jpg" /><br /></span></a>

    where/how I insert the "onclick" to "swap" the enlarged image?

    The "swap" photo is named: "jennab4.jpg"
    Last edited by momonline; 02-14-2012 at 11:36 AM.

  8. #7
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    231
    Thanks
    32
    Thanked 24 Times in 24 Posts

    Default How about htis?

    See http://artdemo.tripod.com/sketch/tableTestCSS.html and http://artdemo.tripod.com/illustration/indexCSS.html demos and Eric Meyer's http://meyerweb.com/eric/css/edge/popups/demo.html explanation of how the HOVER/SPAN works.

    In every case, the "caption" text is a span element inside the actual hyperlinks. Here's one example from the source of this document:

    <a href="http://www.meyerweb.com/eric/css/">Links<span>A collection of things which interest me, and might interest you</span></a>
    To prevent the text from showing up when the page loads, I have the following style:

    div#links a span {display: none;}
    So they're gone, removed entirely from the document flow. Bringing them back, then, is a simple matter of switching the display to block and positioning the element whenever the associated link is hovered over with the mouse pointer. Thus we get the first two lines of this rule:

    div#links a:hover span {display: block;
    position: absolute; top: 200px; left: 0; width: 125px;
    padding: 5px; margin: 10px; z-index: 100;
    color: #AAA; background: black;
    font: 10px Verdana, sans-serif; text-align: center;}

    The last three lines relate to how the element will be styled when it appears, but the first two cause it to be made visible (display: block and position it appropriately.
    I've recently used this technique to annotate a renowned illustrator/painter's bio with images. (There were 71 images referenced, which takes a lot of bandwidth, so I'm not going to give you a link.)

    Basically you use relationship of CSS POSITION: RELATIVE reference point of link and POSITION:ABSOLUTE hover/span images and change <span> from display: none to display: block when reference point link is hovered over.

    I think what you want is more like http://www.dynamicdrive.com/dynamici...thumbnail2.htm or my simpler version used at http://www.gerigeans.com/spsu09/index.html or http://www.auntnini.com -- wherein the onMouseOver and/or onclick changes the large image [name-"holder" id="holder"] "<img src="____.jpg"> source. The auntnini version is old and needs to be cleaned up, but onMouseOver the text changes .JPG and onClick initiates the animated .GIF. You can also add onMouseOut to change the large image "holder" to an entirely different image.

    Code:
    <script language="JavaScript" type="text/javascript">
    <!-- Adapted from www.morgangaynin.co 
    //LARGE IMAGES 
    pic01 = new Image()
    pic02 = new Image()
    pic03 = new Image()
    pic04 = new Image()
    pic05 = new Image()
    pic06 = new Image()
    
    pic01.src = "images/img-01.jpg"
    pic02.src = "images/img-02.jpg"
    pic03.src = "images/img-03.jpg"
    pic04.src = "images/img-04.jpg"
    pic05.src = "images/img-05.jpg"
    pic06.src = "images/img-06.jpg"
    
    //THUMBNAILS
    pic01a = new Image()
    pic02a = new Image()
    pic03a = new Image()
    pic04a = new Image()
    pic05a = new Image()
    pic06a = new Image()
    
    pic01a.src = "images/img-01a.jpg"
    pic02a.src = "images/img-02a.jpg"
    pic03a.src = "images/img-03a.jpg"
    pic04a.src = "images/img-04a.jpg"
    pic05a.src = "images/img-05a.jpg"
    pic06a.src = "images/img-06a.jpg"
    </script>
    
    In <BODY> <!--LARGE HOLDER IMAGE do not include width or height-->
    <img src="images/holder.jpg" name="holder" id="holder" alt="Holder">
    <p id="text">inner.html</p>
    
    Code on thumbnails:
    
    <a href="#nogo" target="space" onMouseOver="document.holder.src=pic01.src; document.getElementById('text').innerHTML ='Photographer name 01'" title="Photographer name 01" 
    onClick="document.holder.src=pic02.src" 
    onMouseOut="document.holder.src=pic03.src">
    <img class="thumb" src="images/img-01a.jpg" alt="pic01"></a>
    
    <a href="#nogo" onMouseOver="document.holder.src=pic02.src">
    <img class="thumb" src="images/img-02a.jpg" alt="pic02"></a>
    
    <a href="#nogo" onMouseOver="document.holder.src=pic03.src"> 
    <img class="thumb" src="images/img-03a.jpg" alt="pic03"></a>
    
    <a href="#nogo" onMouseOver="document.holder.src=pic04.src">
    <img class="thumb" src="images/img-04a.jpg" alt="pic04"></a>
    Last edited by auntnini; 02-18-2012 at 08:24 PM.

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

    momonline (02-14-2012)

  10. #8
    Join Date
    Mar 2006
    Posts
    75
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Default

    auntnini,

    Thanks again.

    Not being a coder, you've made this hopefully understandable for me.

    I'm going to attempt to apply and will post my results.
    Last edited by momonline; 02-20-2012 at 05:17 AM.

  11. #9
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    231
    Thanks
    32
    Thanked 24 Times in 24 Posts

    Default How is it going?

    To add more options on large image, could do someting like MorganGaynin http://www.morgangaynin.com/colon/ did

    Code:
    <td rowspan="2" width="446" height="465" onKeyPress="javascript:protect()" > 		
    <img onMouseDown="javascript:protect()" src="../colon/pic_01.jpg" border="0" name="holder"> 			
    <!--LARGE ILLUSTRATION HERE--></td> 		
    <td width="240" height="381"><table width="220" height="360" border="0" cellpadding="0" cellspacing="0">
    <tr><td width="73.3" height="75" valign="middle" align="center">
    <a href=""  target="content" onMouseOver="document.holder.src=pic1.src">
    <img src="../colon/pic_01a.jpg" border="0"></a></td>
    
    Or add even more:
        <td id="space"><!--LARGE HOLDER IMAGE -->
        <img src="images/holder.gif" name="holder" id="holder"  alt="Holder"
         onMouseDown="javascript:protect()"  onMouseUp="this.src='images/pic-16.gif'"
         onMouseOver="this.src='images/pic-14.gif'" onMouseOut="this.src='images/pic-10.gif'">
        </td>
        <td><!--THUMBNAILS-->
        <a href="#"  target="space" onMouseOver="document.holder.src=pic01.src" 
        onClick="document.holder.src=pic06.src">
            <img class="thumb" src="images/pic-01.gif" alt="pic01"></a></td>
    Last edited by auntnini; 02-18-2012 at 08:29 PM. Reason: spacing

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

    momonline (02-17-2012)

  13. #10
    Join Date
    Mar 2006
    Posts
    75
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Default

    auntnini (or whoever can help me),

    This is what my site looks like now. Right now when you mouseover on the thumbnail, the same photo enlarges.

    ...

    What I want is an "onClick" function so that when click on the thumbnail, the enlarged photo swaps to a different photo. Kind of what a mouseover would do with swapping an image but because mouseover is already being used, I want the onclick/swap function to replace it.

    I've searched all over but am unable to figure it out and for all I know, may not be possible.
    Last edited by momonline; 02-20-2012 at 05:16 AM.

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
  •