7  27501 
fredo wrote:
I've studied Eric Meyer's pure css popups, version two:
http://meyerweb.com/eric/css/edge/popups/demo2.html
which pops up an image when I roll over a text link.
Now I want to pop up a large image when I roll over a thumbnail. I've
tried some things, but can't make it work. See here (Warning: adult
matter):
http://www.simple-nude.com/demo.html
Can some kind soul clue me in how to do this with css only, no js?
Thanks!
-- fredo
Fredo,
I've no objection to adult content, especially if it's accompanied like
a polite warning such as the one you include. It does, however, make it
difficult to look at your page when I'm at work.
It might be worthwhile making an office-friendly version of your
problem? Have you read http://www.tanfa.co.uk/css/articles/...popups-bug.asp ?
Nik
PS - those wanting to look at css-popups not featuring beautiful (or
indeed, any) nudes, could see the problem I'm about to post ;-)
Nik
Nik wrote:
Fredo,
I've no objection to adult content, especially if it's accompanied like
a polite warning such as the one you include. It does, however, make it
difficult to look at your page when I'm at work.
Doh! Thanks. I've put a benign version at: http://www.simple-nude.com/demo.html
Have you read
http://www.tanfa.co.uk/css/articles/...popups-bug.asp ?
I have now, and there are some good insights in the article and its
comments.
Thanks, Nik.
-- fredo
fredo wrote:
>
Now I want to pop up a large image when I roll over a thumbnail. I've
tried some things, but can't make it work. See here (Warning: adult
matter):
http://www.simple-nude.com/demo.html
Can some kind soul clue me in how to do this with css only, no js?
Fredo,
I think you need to set a class for both the thumbnail and the larger
image, and to control each of them with a{...} and a:hover{...} rules.
Note that the images to pop up should first be set to height:0 by a{...}
to hide them.
At the moment the
div#links a:hover img {
position: absolute;
left: 55%;
height: 100px; }
rule is moving both the image, which is the sole content of the <a>
element, to a different part of the screen when you hover one it. This
takes the image out from under the mouse, so the hover goes off. Hence
the image returns to its original position, under the mouse, and the
hover is back on.
I'm not clear what you wish to happen to the thumbnail image when the
hover is active - should it continue to remain exactly where it was?
HTH
Nik
The following code, copied from the link above @ Mr. Meyers' site
is slightly adapted to provide what you need. It works in msie and
ffox; however, the absence of an image src (for image2) will cause
firefox to display the alt placeholder. otherwise, when you input an
actual source, you only see image1 as you intend, and img2 will appear
on hover. I thought too (as the previous poster) that a different
class would be needed for each and every link with its own set of 2
images. It appears you can use the same css rule for them all and just
change your image sources (assuming you want your popup image to appear
in the same spot for all mouseovers;)
------------CODE----------------
<!-- MOST OF THIS CODE IS COPIED FROM: http://meyerweb.com/eric/css/edge/popups/demo2.html
BUT AMENDED SLIGHTLY TO RESPOND TO THE PROBLEM REFERENCED HEREIN
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Pure CSS Popups 2</title>
<style type="text/css">
<!--
div#links {
position: absolute;
top: 81px; left: 10px;
}
div#links a {
margin:0px;
display:block;
}
div#links a:hover {
border:0px black dashed;
}
div#links a .im1{width:175p x; height:65px; border:5px red double;}
div#links a .im2 {height: 0; width: 0; border-width: 0;}
div#links a:hover .im2 {position: absolute; top:0px; left: 355px;
height:110px; width: 276px;}
-->
</style>
</head>
<body>
<div id="links">
<a href="#">
<img class="im1" src="http://www.google.com/logos/thanksgiving03. gif"
/>
<img class="im2" src="blah.gif" alt="first link gif"/>
</a>
<a href="#">
<img class="im1" src="http://www.google.com/logos/thanksgiving04. gif"
/>
<img class="im2" src="blah.gif" alt="second link gif"/>
</a>
<a href="#">
<img class="im1" src="http://www.google.com/logos/thanksgiving05. gif"
/>
<img class="im2" src="blah.gif" alt="third link gif"/>
</a>
<a href="#">
<img class="im1" src="http://www.google.com/logos/thanksgiving06. gif"
/>
<img class="im2" src="blah.gif" alt="fourth link gif"/>
</a>
</div>
</body>
</html>
jim wrote:
The following code, copied from the link above @ Mr. Meyers' site
is slightly adapted to provide what you need. It works in msie and
ffox; however, the absence of an image src (for image2) will cause
firefox to display the alt placeholder. otherwise, when you input an
actual source, you only see image1 as you intend, and img2 will appear
on hover. I thought too (as the previous poster) that a different
class would be needed for each and every link with its own set of 2
images. It appears you can use the same css rule for them all and just
change your image sources (assuming you want your popup image to appear
in the same spot for all mouseovers;)
------------CODE----------------
<!-- MOST OF THIS CODE IS COPIED FROM:
http://meyerweb.com/eric/css/edge/popups/demo2.html
BUT AMENDED SLIGHTLY TO RESPOND TO THE PROBLEM REFERENCED HEREIN
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Pure CSS Popups 2</title>
<style type="text/css">
<!--
div#links {
position: absolute;
top: 81px; left: 10px;
}
div#links a {
margin:0px;
display:block;
}
div#links a:hover {
border:0px black dashed;
}
div#links a .im1{width:175p x; height:65px; border:5px red double;}
div#links a .im2 {height: 0; width: 0; border-width: 0;}
div#links a:hover .im2 {position: absolute; top:0px; left: 355px;
height:110px; width: 276px;}
-->
</style>
</head>
<body>
<div id="links">
<a href="#">
<img class="im1" src="http://www.google.com/logos/thanksgiving03. gif"
/>
<img class="im2" src="blah.gif" alt="first link gif"/>
</a>
<a href="#">
<img class="im1" src="http://www.google.com/logos/thanksgiving04. gif"
/>
<img class="im2" src="blah.gif" alt="second link gif"/>
</a>
<a href="#">
<img class="im1" src="http://www.google.com/logos/thanksgiving05. gif"
/>
<img class="im2" src="blah.gif" alt="third link gif"/>
</a>
<a href="#">
<img class="im1" src="http://www.google.com/logos/thanksgiving06. gif"
/>
<img class="im2" src="blah.gif" alt="fourth link gif"/>
</a>
</div>
</body>
</html>
THANK YOU, Jim. Your suggestion worked perfectly in FF, but there's a
slight problem in IE when I change display:block to display:inlline .
For a quick example, see: http://www.simple-nude.com/demo.html
I am posting another question about this IE glitch on ciwas.
Thank you again, guys.
-- fredo
fredo wrote:
jim wrote:
The following code, copied from the link above @ Mr. Meyers' site
is slightly adapted to provide what you need. It works in msie and
ffox; however, the absence of an image src (for image2) will cause
firefox to display the alt placeholder. otherwise, when you input an
actual source, you only see image1 as you intend, and img2 will appear
on hover. I thought too (as the previous poster) that a different
class would be needed for each and every link with its own set of 2
images. It appears you can use the same css rule for them all and just
change your image sources (assuming you want your popup image to appear
in the same spot for all mouseovers;)
------------CODE----------------
<!-- MOST OF THIS CODE IS COPIED FROM:
http://meyerweb.com/eric/css/edge/popups/demo2.html
BUT AMENDED SLIGHTLY TO RESPOND TO THE PROBLEM REFERENCED HEREIN
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Pure CSS Popups 2</title>
<style type="text/css">
<!--
div#links {
position: absolute;
top: 81px; left: 10px;
}
div#links a {
margin:0px;
display:block;
}
div#links a:hover {
border:0px black dashed;
}
div#links a .im1{width:175p x; height:65px; border:5px red double;}
div#links a .im2 {height: 0; width: 0; border-width: 0;}
div#links a:hover .im2 {position: absolute; top:0px; left: 355px;
height:110px; width: 276px;}
-->
</style>
</head>
<body>
<div id="links">
<a href="#">
<img class="im1" src="http://www.google.com/logos/thanksgiving03. gif"
/>
<img class="im2" src="blah.gif" alt="first link gif"/>
</a>
<a href="#">
<img class="im1" src="http://www.google.com/logos/thanksgiving04. gif"
/>
<img class="im2" src="blah.gif" alt="second link gif"/>
</a>
<a href="#">
<img class="im1" src="http://www.google.com/logos/thanksgiving05. gif"
/>
<img class="im2" src="blah.gif" alt="third link gif"/>
</a>
<a href="#">
<img class="im1" src="http://www.google.com/logos/thanksgiving06. gif"
/>
<img class="im2" src="blah.gif" alt="fourth link gif"/>
</a>
</div>
</body>
</html>
THANK YOU, Jim. Your suggestion worked perfectly in FF, but there's a
slight problem in IE when I change display:block to display:inlline .
For a quick example, see:
http://www.simple-nude.com/demo.html
I am posting another question about this IE glitch on ciwas.
Thank you again, guys.
-- fredo
I've been messing with the thumbnail-to-full css for a client's site
and came across a bug in Safari browsers (v2.0.4). In this case, the
full sized image needs to appear at right {position: absolute; right:
1%;}. When that code was in the "a:hover .im2" class, Safari displayed
only half the image, and at left of screen! Very peculiar.
So, just for kicks, I moved that into the non-hover portion (what does
it matter where the hidden full image is if it is hidden by being
width:0 and height:0?): "a .im2".
Now Safari is happy.
Hope this helps someone.
The only remaining kink is Firefox and z-index troubles. IE is happy.
But Firefox puts the full sized image under other images on the page
that come later in the document. Fortunately, due to the layout, it
only happens in a couple of instances (as long as the browser window is
reasonably large), but it is annoying that I can't fix it. They're all
in the same div, and are coded as list items, so setting a high z-index
for the full-sized images (and thumbs at z-index:1) should take care of
things...
'Tis a mystery.
Anybody who cares to take a look, feel free to visit: http://tashaphotography.com/set_butterflies.php
L5hopes wrote:
fredo wrote:
jim wrote:
The following code, copied from the link above @ Mr. Meyers' site
is slightly adapted to provide what you need. It works in msie and
ffox; however, the absence of an image src (for image2) will cause
firefox to display the alt placeholder. otherwise, when you input an
actual source, you only see image1 as you intend, and img2 will appear
on hover. I thought too (as the previous poster) that a different
class would be needed for each and every link with its own set of 2
images. It appears you can use the same css rule for them all and just
change your image sources (assuming you want your popup image to appear
in the same spot for all mouseovers;)
>
------------CODE----------------
<!-- MOST OF THIS CODE IS COPIED FROM:
http://meyerweb.com/eric/css/edge/popups/demo2.html
BUT AMENDED SLIGHTLY TO RESPOND TO THE PROBLEM REFERENCED HEREIN
-->
>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Pure CSS Popups 2</title>
<style type="text/css">
<!--
div#links {
position: absolute;
top: 81px; left: 10px;
}
div#links a {
margin:0px;
display:block;
}
div#links a:hover {
border:0px black dashed;
}
div#links a .im1{width:175p x; height:65px; border:5px red double;}
div#links a .im2 {height: 0; width: 0; border-width: 0;}
div#links a:hover .im2 {position: absolute; top:0px; left: 355px;
height:110px; width: 276px;}
-->
</style>
</head>
<body>
<div id="links">
<a href="#">
<img class="im1" src="http://www.google.com/logos/thanksgiving03. gif"
/>
<img class="im2" src="blah.gif" alt="first link gif"/>
</a>
<a href="#">
<img class="im1" src="http://www.google.com/logos/thanksgiving04. gif"
/>
<img class="im2" src="blah.gif" alt="second link gif"/>
</a>
<a href="#">
<img class="im1" src="http://www.google.com/logos/thanksgiving05. gif"
/>
<img class="im2" src="blah.gif" alt="third link gif"/>
</a>
<a href="#">
<img class="im1" src="http://www.google.com/logos/thanksgiving06. gif"
/>
<img class="im2" src="blah.gif" alt="fourth link gif"/>
</a>
>
</div>
</body>
</html>
THANK YOU, Jim. Your suggestion worked perfectly in FF, but there's a
slight problem in IE when I change display:block to display:inlline .
For a quick example, see:
http://www.simple-nude.com/demo.html
I am posting another question about this IE glitch on ciwas.
Thank you again, guys.
-- fredo
I've been messing with the thumbnail-to-full css for a client's site
and came across a bug in Safari browsers (v2.0.4). In this case, the
full sized image needs to appear at right {position: absolute; right:
1%;}. When that code was in the "a:hover .im2" class, Safari displayed
only half the image, and at left of screen! Very peculiar.
So, just for kicks, I moved that into the non-hover portion (what does
it matter where the hidden full image is if it is hidden by being
width:0 and height:0?): "a .im2".
Now Safari is happy.
Hope this helps someone.
The only remaining kink is Firefox and z-index troubles. IE is happy.
But Firefox puts the full sized image under other images on the page
that come later in the document. Fortunately, due to the layout, it
only happens in a couple of instances (as long as the browser window is
reasonably large), but it is annoying that I can't fix it. They're all
in the same div, and are coded as list items, so setting a high z-index
for the full-sized images (and thumbs at z-index:1) should take care of
things...
'Tis a mystery.
Anybody who cares to take a look, feel free to visit:
http://tashaphotography.com/set_butterflies.php
Try http://tashaphotography.com/set_butterflygarden.php instead. It has a
vertical image in the first row, which is what most clearly displays
the Firefox z-index problem. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: Samir |
last post by:
Is the only way to get make changes on all pages with just one time is using
cascading style sheets? Is there any other option other than CSS??
|
by: Eje |
last post by:
I am developing a webapplication for a company holding
stocks for a number of customer companies. The customers
can order parts via this new appliction. My application
is linked to each of the customers' home pages. I want
each user to 'believe' he still is in his company's pages
by changing logo and i.e. backcolor depending on company.
A person from company A will see his company's logo and
colors and a person from company B will...
|
by: FC |
last post by:
Hello folks,
I was wondering if there any other method of achieving the following:
I have a XSL transformation outputting a SVG document.
For reasons too long to explain here, I must embed a CSS style sheet inside
a <style> element in the SVG output document using a CDATA block.
The CSS stylesheet is not an xml document, therefore I cannot open it using
the document function (I suppose, I didn't even try frankly).
In order to work...
|
by: Hsun-Cheng Hu ?J?V?? |
last post by:
Dear all,
I had written a Web CSS Editor (Javascript based). It is easy and
free. You may download a copy and build it with your programs. Here is
its descriptiong:
Web CSS Editor is a javascript module and a web-based module. It
provides an interactive forms to create CSS descriptions. The UI of
Web CSS Editor is similar to Microsoft Frontpage. So, it is very easy
for web designers to build CSS. Web CSS Editor is also a freeware. You
|
by: hholidayy |
last post by:
Hi,
I'm very new to web designing
I'm designing my first web site for a friend of mind that has a small
business
I recently finished a book on HTML and started playing in Dreamweaver MX
Then realize there was a faster and more efficient way to do things with CSS
So I started self-learning CSS, about a week ago
Today, while I was studying my CSS book at work...a programmer from my firm
said to me...
| | |
by: timmy_dale12 |
last post by:
hi
im am trying to make a soccer stadium with a table and some buttons :
<html>
<head>
<link rel="stylesheet" type="text/css"
href="h:diverse/stadion.css" />
</head>
|
by: DU |
last post by:
Hello fellow stylers,
I don't understand the error report given by the W3C CSS validator:
"Line: -1
unrecognized media screen, tv "
I checked carefully and can't figure this one out. I created a reduced
demo page. It seems that I can not mention more than 1 media as media
|
by: Kris |
last post by:
Hello,
By accident I noticed that a hack to hide CSS from IE4.x/Mac also hides
it from WebTV Viewer. Since I noticed a little while ago a post here
that mentioned the 'incompatibility' of WebTV Viewer with CSS and the
hardship of hiding CSS from it, I thought this might be of relevance.
@import 'styles.css'; // hides from IE4/Mac and IE5/Mac
@i\mport "styles.css"; // hides from some browsers, but not from IE5/Mac
I noticed the effect...
|
by: Peter Foti |
last post by:
Hi all,
I have a form that contains a 2 column table. In the left column is the
description for a particular input (ie - "First Name", "Last Name", "Phone
Number", etc.). In the right column is the input element. The left column
is right aligned and the right column is left aligned. I would like to
replace this table with code that does not use a table for layout, and was
hoping someone might be able to help me with the HTML and...
|
by: Mark Johnson |
last post by:
Oddly enough, I found it difficult, using Google, to find a list of
best-of sites based on the quality of their css packages.
So I'd ask. Does anyone know of particularly good sites which are in
good measure because of their creative and useful css designs? I'm
aware of Zen Garden and a few others. So don't bother with those. And
I hope I don't get replies from people with a 'tin ear' and no design
sense. Good sites. Good pages. That's...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
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 presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
| | |
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| |
