This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > March 2007 > CSS image popup help
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
CSS image popup help
|
|
| mistral 2007-03-15, 11:16 pm |
| I need help adjust CSS image popup, to show big image without
javascript.
http://moneytreesystems.com/css/picpopup.html
I just need move all relevant css to internal style, since I canno use
nor external css file, nor css inside head section, since this code
will be added inside online listing builder, which have no head and
body section accessible, and accept just html code snippets, and I can
no control head and body sections.
Regards,
mistral
| |
| Bergamot 2007-03-15, 11:16 pm |
| mistral wrote:
>
> http://moneytreesystems.com/css/picpopup.html
> I just need move all relevant css to internal style, since I canno use
> nor external css file, nor css inside head section
Sorry, but pseudo elements like :hover can't be put in inline styles.
--
Berg
| |
| mistral 2007-03-16, 11:16 pm |
| On 16 อมา, 05:46, Bergamot <berga...@visi.com> wrote:
> mistral wrote:
>
>
> Sorry, but pseudo elements like :hover can't be put in inline styles.
>
> --
> Berg
--------
Is there some workaround?
mistral
| |
| Richard Formby 2007-03-16, 11:16 pm |
| mistra wrote:
> On 16 อมา, 05:46, Bergamot <berga...@visi.com> wrote:
[color=darkred]
> Is there some workaround?
A workaround for ":hover can't be put in inline styles"?
No.
--
Richard
| |
| Andy Dingley 2007-03-16, 11:16 pm |
| On 16 Mar, 13:00, "Richard Formby" <r...@invalid.com> wrote:
> A workaround for ":hover can't be put in inline styles"?
>
> No.
Yes, use a stylesheet inside the <body>
Not valid, usually works, no worse than many other hacks.
| |
| mistral 2007-03-16, 11:16 pm |
| On 16 อมา, 15:14, "Andy Dingley" <ding...@codesmiths.com> wrote:
> On 16 Mar, 13:00, "Richard Formby" <r...@invalid.com> wrote:
>
>
>
> Yes, use a stylesheet inside the <body>
>
> Not valid, usually works, no worse than many other hacks.
-----------
could you show how need be this code?
I have troubles to adjust this code for my task: i need 3 image(one
row), all images is different size, so I need specify width/heigh for
each image pair(big and thumb.).
Here is code from aboved sample:
<style type="text/css">
#menu {position:relative; top:10px; left:100px; width:75px; background-
color:#fff; z-index:100;}
#menu a.p1, #menu a.p1:visited {display:block; width:75px; height:
75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#menu a img {border:0;}
#menu a.p1:hover {text-decoration:none; background-color:#8c97a3;
color:#000;}
#menu a .large {display:block; position:absolute; width:0; height:0;
border:0; top:0; left:0;}
#menu a.p1:hover .large {display:block; position:absolute; top:-65px;
left:150px; width:300px; height:300px; border:10px solid #ccc;}
#info {z-index:100; height:22em;}
</style>
<div id="menu">
<a class="p1" href="#nogo" title="thumbnail image"><img src="../img/
tdrips.jpg" title="Thumbnail image" alt="Thumbnail image" /><img
class="large" src="../img/drips.jpg" title="Enlarged view of image"
alt="Enlarged view of image" /></a>
</div>
Mistral
| |
| mistral 2007-03-16, 11:16 pm |
| On 16 อมา, 15:14, "Andy Dingley" <ding...@codesmiths.com> wrote:
> On 16 Mar, 13:00, "Richard Formby" <r...@invalid.com> wrote:
>
>
>
> Yes, use a stylesheet inside the <body>
>
> Not valid, usually works, no worse than many other hacks.
---------------
OK, I need help customize the code below a little: i need 3 images (in
one row). I need that my thumbnails have not been absolutely
positioned(fixed) in some place, since I need put it in any place of
html layout where I just need. Big image may popup approximately in
center, but this not so important. What need be modified in code?
<style type="text/css">
#menu {position:relative; top:10px; left:100px; width:75px; background-
color:#fff; z-index:100;}
#menu a.p1, #menu a.p1:visited {display:block; width:75px; height:
75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#menu a img {border:0;}
#menu a.p1:hover {text-decoration:none; background-color:#8c97a3;
color:#000;}
#menu a .large {display:block; position:absolute; width:0; height:0;
border:0; top:0; left:0;}
#menu a.p1:hover .large {display:block; position:absolute; top:-65px;
left:150px; width:300px; height:300px; border:10px solid #ccc;}
#info {z-index:100; height:22em;}
</style>
<div id="menu">
<a class="p1" href="#nogo" title="thumbnail image"><img src="../img/
tdrips.jpg" title="Thumbnail image" alt="Thumbnail image" /><img
class="large" src="../img/drips.jpg" title="Enlarged view of image"
alt="Enlarged view of image" /></a>
</div>
Mistral
| |
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|