467,910 Members | 1,775 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,910 developers. It's quick & easy.

CSS image popup help

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

Mar 15 '07 #1
  • viewed: 5415
Share:
6 Replies
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
Mar 16 '07 #2
On 16 , 05:46, Bergamot <berga...@visi.comwrote:
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
--------

Is there some workaround?

mistral

Mar 16 '07 #3
mistra wrote:
On 16 , 05:46, Bergamot <berga...@visi.comwrote:
>Sorry, but pseudo elements like .:hover can't be put in inline styles
Is there some workaround?
A workaround for ":hover can't be put in inline styles"?

No.

--
Richard
Mar 16 '07 #4
On 16 Mar, 13:00, "Richard Formby" <r...@invalid.comwrote:
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.

Mar 16 '07 #5
On 16 , 15:14, "Andy Dingley" <ding...@codesmiths.comwrote:
On 16 Mar, 13:00, "Richard Formby" <r...@invalid.comwrote:
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.
-----------

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

Mar 16 '07 #6
On 16 , 15:14, "Andy Dingley" <ding...@codesmiths.comwrote:
On 16 Mar, 13:00, "Richard Formby" <r...@invalid.comwrote:
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.
---------------
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

Mar 16 '07 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by riki | last post: by
1 post views Thread by jonathandowns | last post: by
14 posts views Thread by D. Alvarado | last post: by
reply views Thread by Tim::.. | last post: by
3 posts views Thread by Andreig | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.