By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,492 Members | 1,955 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,492 IT Pros & Developers. It's quick & easy.

CSS image popup help

P: n/a
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
Share this Question
Share on Google+
6 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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.