PDA

Click to See Complete Forum and Search --> : Magnify an images with CSS

Taurus
03-15-2007, 06:58 PM
I need help to create CSS image popup, to show big image, without
javascript, based on 'Magnify an image' sample:http://www.cssplay.co.uk/menu/magnify.html

Main difference is that all my images (i need 3 image - one row) have different size, so I need specify width/heigh for each image, include thumbnails.
Second thing is that i want convert this css into inline style, since I can no use external css file, nor css inside head section, because my html code will be added inside online listing builder, which have no head and body sections accessible, and accept just raw html code snippets, so I can no control head and body sections.


<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>


any help will be appreciated.

Thanks,
KDLA
03-16-2007, 08:47 AM
Would not "width: auto" suffice, since these are layers, rather than elements needing nested positioning? The image's width would determine the width of the div/span.

KDLA
Taurus
03-16-2007, 10:06 AM
Does it possible implement all code as inline css at all? There is pseudo elements like :hover, that can't be put in inline styles. I can no place css inside head section, just in listing builder(inside body).
KDLA
03-16-2007, 10:51 AM
You might try a bit of javascript, something like this:

<a href="#" class="little" onmouseover="this.className='big';" onmouseout="this.className='little';">link Text</a>
Taurus
03-16-2007, 11:54 AM
No, I need thumbnails. Well, i will use a stylesheet inside the <body>. Though this not valid, usually works, no worse than many other hacks.

I need 3 images (one row). Also 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 I need modify in code?
LeeU
03-16-2007, 04:56 PM
Are you looking for something like this (http://www.cssplay.co.uk/menu/magnify.html)? There's other stuff there also.
Taurus
03-16-2007, 07:02 PM
Yes. And I taken the aboved code therefrom. But I am confused with these #menus and a.p1:hovers.. I do not need menu, I need few images in row.
Paul Jr
03-17-2007, 03:08 AM
Simply repeat the code inside the DIV...

CSS

#menu {
position: relative;
top: 10px;
left: 100px;
width: 375px;
background-color: #fff;
z-index: 100;
}
#menu a.p1, #menu a.p1:visited {
margin: 5px;
display: block;
width: 75px;
height: 75px;
text-decoration: none;
background: #fff;
float: left;
}
#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;
}
#menu a.p1:hover .large {
display: block;
position: absolute;
top: 100px;
left: 150px;
width: 300px;
height: 300px;
border: 10px solid #ccc;
}


HTML

<div id="menu">
<a class="p1" href="#nogo" title="thumbnail image">
<img src="tdrips.jpg" title="Thumbnail image" alt="Thumbnail image" />
<img class="large" src="drips.jpg" title="Enlarged view of image" alt="Enlarged view of image" />
</a>
<a class="p1" href="#nogo" title="thumbnail image">
<img src="tdrips.jpg" title="Thumbnail image" alt="Thumbnail image" />
<img class="large" src="drips.jpg" title="Enlarged view of image" alt="Enlarged view of image" />
</a>
<a class="p1" href="#nogo" title="thumbnail image">
<img src="tdrips.jpg" title="Thumbnail image" alt="Thumbnail image" />
<img class="large" src="drips.jpg" title="Enlarged view of image" alt="Enlarged view of image" />
</a>
</div>
Taurus
03-17-2007, 05:58 PM
can I use standard width/height image attributes there?

<a class="p1" href="#nogo" title="thumbnail image">
<img src="tdrips.jpg" width="100px" height="150px" border="0" alt="Magnify" />
<img class="large" src="drips.jpg" width="450px" height="500px" border="0" alt="" />
</a>