Enlarged image onmouseover either by css or javascript

reffered above link to create image gallery , the images are displayed from database

i need to have a enlarged image onmouseover either by css or javascript
the enlarged image shld be displayed as popup on mouseover of the thumb image

how do i go abt

Hi there,

A pure CSS solution (with demo): http://cssdemos.tupence.co.uk/image-popup.htm

A JavaScript solution: http://archive.plugins.jquery.com/project/thumbnail_hover_popup
A demo of the JavaScript solution: http://home.comcast.net/~littlemoe85/thumbhover/index.html

More reading: http://cssglobe.com/easiest-tooltip-and-image-preview-using-jquery/

Hope that helps.

Like this http://www.websitecodetutorials.com/code/photo-galleries/the-jamieruth1-demo.php

Hi Eric,

When I click on that link I get:


You don't have permission to access /code/photo-galleries/the-jamieruth1-demo.php on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

Apache Server at www.websitecodetutorials.com Port 80

Ok thanks. Ya the move was not as smooth as I hoped.

Beware: I have just tried all examples using Chrome on my Nexus 7 and not one hover appeared :slight_smile:

How many of your readers will not have a mouse and is there a solution?

Ya :focus

Often when :focus or :active states don’t work, you can add (to the HTML) a ontouchstart='“” attribute to the page.

I’ve also seen pure Javascript hacks that listen for a ontouchstart event (first touch of the element) but then hijack the ontouchend event to “undo” whatever touching did (in your case, hiding the larger image again) and then cancelling the “click” event that usually follows. Thing is, iOS5 started doing this differently and then I dunno who has caught up to where.

Thats weird. Some kind of cache issue. I was confused why that link didnt work as I copied strait from my working page. When I first clicked it it didnt work. Then I went to the actual page and cmae back here and clicked it again and then it work - what? Anyway here is the link. Clear your cache (or something?) if it doesnt work. http://www.websitecodetutorials.com/code/photo-galleries/the-jamieruth1-demo.php

Yeah, clearing the cache worked.
Sorry for any confusion :slight_smile:

No problem at all. Strange though. There should not of been a cache issue with a new link.