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

[afgflyguy]

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.

<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>

[jscheuer1]

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.

[afgflyguy]

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?

[jscheuer1]

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.

[afgflyguy]

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?

<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>

[Deadweight]

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?

[afgflyguy]

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?

<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>

[Deadweight]

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?