Results 1 to 8 of 8

Thread: New to JS. Help me convert CSS Image Hover to JS onClick show and hide Image

  1. #1
    Join Date
    Sep 2013
    Location
    San Francisco Bay Area
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default New to JS. Help me convert CSS Image Hover to JS onClick show and hide Image

    I'm a beginner to JavaScript.

    My goal is to take this CSS Image Hover script and convert it into a JavaScript onClick script.

    Normally I can find solutions on my own but in this particular case I need the communities help.

    So again the goal is to convert the code below into an identical Java Script code. I would like the
    thumbnail images to Show Larger Image onClick and to close Larger Image onClick. (No resize on
    Larger Image). Thank you in advanced to anyone who can help out.


    Code:
    <style type="text/css">
    .verdana {
    font-family: Verdana, Geneva, sans-serif;
    }
    body,td,th {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    }
    .thumbnail{
    position: relative;
    z-index: 0;
    }
    .thumbnail:hover{
    background-color: transparent;
    z-index: 50;
    }
    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: ;
    padding: 0px;
    left: -1000px;
    border: solid;
    visibility: hidden;
    color: black;
    text-decoration: none;
    }
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 0px;
    }
    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: -150px;
    left: 170px; /*position where enlarged image should offset horizontally */
    }
    </style>
    
    <p><a class="thumbnail" href="#thumb"><img src="http://imageshack.com/scaled/large/845/iv8h.jpg" width="178" border="1" /><span><img src="http://imageshack.com/scaled/large/20/u8c9.jpg" /><br />Actual Photo</span></a></p>
    <p><a class="thumbnail" href="#thumb"><img src="http://imageshack.com/scaled/large/35/6wid.jpg" width="178" border="1" /><span><img src="http://imageshack.com/scaled/large/41/eis9.jpg" /><br />Actual Photo</span></a></p>
    Last edited by afgflyguy; 09-14-2013 at 07:57 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You shouldn't need javascript. Just change all

    :hover

    in the css style to

    :focus

    If you want a javascript gallery similar to this that activates on click, see the demo page:

    http://www.dynamicdrive.com/dynamici...thumbnail2.htm

    Use it with its trigger:click option as described in its documentation on its demo page.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2013
    Location
    San Francisco Bay Area
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I changed the :hover tags to :focus but it does not enlarge the photos when I click them.

    I have 2 photos. A thumbnail and a larger photo. If I can do this with CSS would be great but I was under the impression it was a JS function.

    The reason why I want to change it from hover to onClick is because when you view the code on mobile it keeps the hover image open. I'd like
    a function where I can click the image a second time to close the larger image and return it back to the thumbnail.

    Am I doing something wrong?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I see. It should work on a regular computer, if not, this one does (if you change all of its :hover to :focus)

    http://www.dynamicdrive.com/style/cs...-image-viewer/

    But for mobiles you might have to use:

    http://www.dynamicdrive.com/dynamici...agemagnify.htm

    or the one I mentioned before:

    http://www.dynamicdrive.com/dynamici...thumbnail2.htm

    Neither of those will close on a second click, but the first will close on click of the larger image. The second could be made to do so. Probably either could be made to close on a second click of the thumbnail, The second closes (replaces) the larger image with the next when another trigger is clicked. There's also:

    http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

    which might be better for you. Take a look at all three and see which you prefer.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Sep 2013
    Location
    San Francisco Bay Area
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you, however neither of those worked for me. I did some more research and found what I need but I still need some assistance.

    The code below is the concept I'm looking for. And it works but I need help with the CSS part of the code. It currently loads the onClick larger
    image in the same spot of a webpage. I want the onClick larger image to be loaded next to the correct thumbnail. The issue with this is if you
    scroll down to low and click a thumbnail you can't see the larger image unless you scroll back up to the area where it loads.

    What do you think?

    Code:
    <script type="text/javascript">
                function showImage(imgName) {
                    document.getElementById('largeImg').src = imgName;
                    showLargeImagePanel();
                    unselectAll();
                }
                function showLargeImagePanel() {
                    document.getElementById('largeImgPanel').style.visibility = 'visible';
                }
                function unselectAll() {
                    if(document.selection) document.selection.empty();
                    if(window.getSelection) window.getSelection().removeAllRanges();
                }
                function hideMe(obj) {
                    obj.style.visibility = 'hidden';
                }
            </script>
     
            <style type="text/css">
    .verdana {
    font-family: Verdana, Geneva, sans-serif;
    }
    body,td,th {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    }
                #largeImgPanel {
                    text-align: ;
                    visibility: hidden;
                    position: absolute;
                    z-index: 100;
                    top: -200; left: 200; width: 100%; height: 100%;
                    background-color: transparent;
                }
            </style>
        </head>
     
        <body>
            <p>Click on any image thumbnail to enlarge... then click again to hide it</p>
     
        
     <p>Click for full size<br>
    <img border="1" src="http://imageshack.com/scaled/large/600/n0pt.jpg" style="cursor:pointer" onclick="showImage('http://imageshack.com/scaled/large/607/mpfj.jpg');" />
            <p><img src="http://imageshack.com/scaled/large/839/6zpk.jpg" style="cursor:pointer" onclick="showImage('http://imageshack.com/scaled/large/706/b6r6.jpg');" />
    
    <div id="largeImgPanel" onclick="hideMe(this);">
                <img id="largeImg" border="2"><br><b><font color="blue">Click Image to Close</font></b>
            
            </div>
        </body>
    </html>

  6. #6
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    512
    Thanks
    9
    Thanked 61 Times in 59 Posts

    Default

    Once I get off of work i can fix this. The problem you have is its loading in a certain place. You ahve to make the position relative to the absolute position of the images. Then when you on click it will close the other and open that one next to the image.

    That is what you are looking for, correct?

  7. #7
    Join Date
    Sep 2013
    Location
    San Francisco Bay Area
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks crazy!

    Here is my dilemma (going back to my original code).. I use the CSS code below for my eBay listings. It works perfectly fine on a computer/laptop.
    The problem is when a smartphone or tablet (iPad) loads the code the photo has to be "touched" and it just stays there without closing. I want a
    simple code to close the hover image when someone is viewing the code on a tablet or phone. Input my code into http://htmledit.squarefree.com/

    In a nutshell.. Is there a CSS or JavaScript code I can use to close a hover image by both mouse Click and mouse Out options?


    Code:
    <style type="text/css">
    .verdana {
    font-family: Verdana, Geneva, sans-serif;
    }
    body,td,th {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    }
    .thumbnail{
    position: relative;
    z-index: 0;
    }
    .thumbnail:hover{
    background-color: transparent;
    z-index: 50;
    }
    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: ;
    padding: 0px;
    left: -1000px;
    border: solid;
    visibility: hidden;
    color: black;
    text-decoration: none;
    }
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 0px;
    }
    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: -150px;
    left: 170px; /*position where enlarged image should offset horizontally */
    }
    </style>
    
    <p><a class="thumbnail" href="#thumb"><img src="http://imageshack.com/scaled/large/845/iv8h.jpg" width="178" border="1" /><span><img src="http://imageshack.com/scaled/large/20/u8c9.jpg" /><br />Actual Photo</span></a></p>
    <p><a class="thumbnail" href="#thumb"><img src="http://imageshack.com/scaled/large/35/6wid.jpg" width="178" border="1" /><span><img src="http://imageshack.com/scaled/large/41/eis9.jpg" /><br />Actual Photo</span></a></p>

  8. #8
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    512
    Thanks
    9
    Thanked 61 Times in 59 Posts

    Default

    I do not think there is a code that allows the user to hover over the image because the pointer is the persons finger with a smartphone or tablet.
    You are only looking for something for only a tablet and smart phone correct?

Similar Threads

  1. Show / Hide div for image links
    By acctman in forum Looking for such a script or service
    Replies: 2
    Last Post: 08-04-2008, 03:52 AM
  2. Replies: 1
    Last Post: 07-04-2008, 01:50 PM
  3. Show/Hide text with CSS over an image?
    By magic5227 in forum CSS
    Replies: 3
    Last Post: 10-04-2006, 12:56 AM
  4. Show Hide DIV using Image
    By jpaulraj in forum JavaScript
    Replies: 4
    Last Post: 07-15-2006, 02:46 PM
  5. Show Hide Image !?
    By jpaulraj in forum JavaScript
    Replies: 0
    Last Post: 09-19-2005, 01:54 PM

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
  •