473,406 Members | 2,633 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,406 software developers and data experts.

CSS hover technique to display pictures

I came up with this idea to show the larger picture of a thumbnail by
hiding it with css and "unhide" it when one hovers over the thumbnail.
I think it looks pretty nifty, but the problem with this technique is
that you force the visitor to download all the large pictures too when
they open the thumbnails page. Is there any way to avoid this without
using javascript?

This is the page:
http://deimos.curious.be/~dusk/media...c#picturestart

Sep 10 '06 #1
5 14671
TomB wrote:
I came up with this idea to show the larger picture of a thumbnail by
hiding it with css and "unhide" it when one hovers over the thumbnail.
I think it looks pretty nifty, but the problem with this technique is
that you force the visitor to download all the large pictures too when
they open the thumbnails page. Is there any way to avoid this without
using javascript?

This is the page:
http://deimos.curious.be/~dusk/media...c#picturestart
Have a look at http://www.cssplay.co.uk/menu/index.html and see some of
his gallery examples - they rock!
Sep 10 '06 #2
On Sun, 10 Sep 2006 19:28:31 +0100, Brendan Gillatt
<br*****@brendanREMOVETHISgillatt.co.ukwrote:
>TomB wrote:
>I came up with this idea to show the larger picture of a thumbnail by
hiding it with css and "unhide" it when one hovers over the thumbnail.
I think it looks pretty nifty, but the problem with this technique is
that you force the visitor to download all the large pictures too when
they open the thumbnails page. Is there any way to avoid this without
using javascript?

This is the page:
http://deimos.curious.be/~dusk/media...c#picturestart

Have a look at http://www.cssplay.co.uk/menu/index.html and see some of
his gallery examples - they rock!
Well, they're entertaining enough, but unless I am mistaken they don't
address the problem that TomB gave. And I think the answer to TomB's
question is that you do indeed need script to handle this well (though
it should be fairly straightforward to provide graceful degradation for
visitors without script).

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Sep 10 '06 #3
TomB wrote:
I came up with this idea to show the larger picture of a thumbnail by
hiding it with css and "unhide" it when one hovers over the thumbnail.
I think it looks pretty nifty, but the problem with this technique is
that you force the visitor to download all the large pictures too when
they open the thumbnails page. Is there any way to avoid this without
using javascript?
Specify the _same_ image with a different width (or height) as from its
inherent dimensions (in your case).

--
Gus
Sep 10 '06 #4
Stephen Poley wrote:
Well, they're entertaining enough, but unless I am mistaken they don't
address the problem that TomB gave. And I think the answer to TomB's
question is that you do indeed need script to handle this well (though
it should be fairly straightforward to provide graceful degradation for
visitors without script).
You're right - I misunderstood.

You could try something like this:

<html>
<head>
<style>
div.picture {
background: none;
border-width: 1px;
border-style: solid;
width: 100px;
height: 80px;
}

div.picture:hover {
background: url('picture.jpg');
}
</style>
</head>
<body>
<div class="picture"></div>
</body>
</html>

I know that Firefox will not load the picture until it is hovered over
(not sure about IE though - I haven't tested yet).

| Brendan Gillatt |
| brendan {at} brendan \removethis/ gillatt {dot} co {dot} uk |
| http://www.brendangillatt.co.uk |
| PGP Key: pgp.mit.edu:11371/pks/lookup?op=get&search=0x6E265E61|
Sep 11 '06 #5
Stephen Poley <sb******************@xs4all.nlwrote in
news:p9********************************@4ax.com:
On Sun, 10 Sep 2006 19:28:31 +0100, Brendan Gillatt
<br*****@brendanREMOVETHISgillatt.co.ukwrote:
>>TomB wrote:
>>I came up with this idea to show the larger picture of a thumbnail
by hiding it with css and "unhide" it when one hovers over the
thumbnail. I think it looks pretty nifty, but the problem with
this technique is that you force the visitor to download all the
large pictures too when they open the thumbnails page. Is there
any way to avoid this without using javascript?

This is the page:
http://deimos.curious.be/~dusk/media...c#picturestart

Have a look at http://www.cssplay.co.uk/menu/index.html and see some
of his gallery examples - they rock!

Well, they're entertaining enough, but unless I am mistaken they
don't address the problem that TomB gave. And I think the answer to
TomB's question is that you do indeed need script to handle this
well (though it should be fairly straightforward to provide graceful
degradation for visitors without script).
I just browsed the site mentioned above and find "entertaining enough"
quite an understatement. They don't address the OP's problem, I agree,
but there are some mighty fine looking (although, I admit I looked at
no code) solutions to many difficult to achieve effects. Thank you,
Brendan, for the link. I agree with you, those pages rock.

As far as TomB's problem, I'd like to know that too, but I also agree
that it will probably require some scripting.

--
Stan McCann, RETIRED!!, "Uncle Pirate" http://stanmccann.us/
Implementing negative score for googlegroup postings, see
http://blinkynet.net/comp/uip5.html
A zest for living must include a willingness to die. - R.A. Heinlein
Sep 11 '06 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

8
by: PhilM | last post by:
Having googled myself silly, I now ask, if only to confirm my conclusions Is it possible to emulate the <javascript>mouseover in css, to replace link images with an alternate? Having asked, I...
6
by: Michael Rozdoba | last post by:
I've had some trouble getting IE to behave in respect of applying absolute positioning to a span on an a:hover. I can get it to work, but I don't understand why certain code causes it to fail to...
1
by: Jon W | last post by:
This is a small table with hover on the table cells. The first cell is setup to switch from div element to input element by use of display:block/none. In IE, onclick the input element is displayed...
3
by: Gnolen | last post by:
Hi, I am wondering if someone could guide me in the right direction about this. How can I make div 'one' hover? Does not need to be clickable/link...It would be easy if the images was not...
0
by: Jon W | last post by:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html> <head> <title>rolly</title> <!-- The desired performance for this gem would be to: 1. click on table cells 2. edit in INPUT 3....
51
by: madsgormlarsen | last post by:
I can not get hover effect on a TD to work in IE, it seams you can not have a hover on a td in IE? I have treid this body.section-2 td.current, body.section-2 td.submenu, body.section-2...
7
by: Matt | last post by:
Is there a way to increase the amount of time a hyperlink title displays or show the desired text using javascript? <a title="This is the title text displayed on hover.">Displayed Text</a> ...
8
by: Haines Brown | last post by:
I want a hot text string to display an image only when hovered. In the body: .... <a id="link-a" href="#nogo"> <img id="photo" src="..." />hot text </a> ....
4
by: Sigilaea | last post by:
My previous post got squashed because m post is too long. Sorry for that: I have an AJAX page with a CSS menu at the top. My problem is the hover functionality stops working after someone clicks...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.