[RESOLVED] setTimeOut on CSS zoomed image

[anna_2010]

Hi,

I have images that zoom upon hover. The problem is that some people without an external mouse can't scroll the page in order to view the entire image. So, I will need a way to hold the image open for a set amount of time so that they can scroll.

I don't want to interupt the code too much, but I would also like to know how I can get this to work via clicking the image to enlarge.

I was able to do that successfully in CSS using a:visited and a:active but was not sure how to "re-minimize" the image. (I think I would have needed a javascript If statement or something that would state if the <a> is active or visited, then onClick put it back at the original thumbnail).

I don't know if that it too farfectched or if I am going in the right direction.
But I'll post the CSS and the html snippes here and the URL so the current Hover effect can be seen.


(EXTERNAL CSS)

#zoom a:link img { 
        float:left; 
        height:94px; 
        width:125px; 
        border:1px solid #000; 
        margin:0 0 5px 5px; 
} 


#zoom a:hover img { 
        width:800px; 
        height:500px;

}

Here is the HTML:

<p style="valign:top; float:right; padding: 0px 0 20px 20px;" id="zoom">&nbsp;&nbsp;Audience Reaction<sup>®</sup><br /> 
<a href="#"><img src="images/Z_Mscore1.jpg" width="800px" height="600px" alt="Audience Reaction" /></a></p>

URL:
http://www.mediamonitors.com/QualitativeResearch.asp#


Thanks for taking the time to help.

[anna_2010]

I just found the cure I was looking for:

I've commented out the #zoom a:hover img CSS segment so that hover will no longer work, because I no longer need it.

Instead I opted to replace the image tag tag with this sample:

<img src="yourimage.jpg" width="150" height="200" onclick="this.src='yourimage.jpg';this.height=400; this.width=300" ondblclick="this.src='yourimage.jpg';this.height=2 00;this.width=150">

put my proper image link and name, then adjusted the sizes to what I wanted.

Now it allows you to click once to enlarge, then double-click to minimize.

Allowing the client to open and minimize at will.

Hope this saves someone time...

[rdoyle720]

That's great that you found a solution, but I wonder how anyone will know to double click to minimize?

[anna_2010]

That's great that you found a solution, but I wonder how anyone will know to double click to minimize?

I've got ways...

Seriously though, either Title attributes, instructions on the enlarged image or the combination of both would work.

It doesn't matter anymore, now that I've implemented a better JS solution that only needs 1 click to open or minimize.