PDA

View Full Version : Generate image in data cell

Nestea
04-15-2007, 03:54 PM
hi, if I have this cell distribution, how, if clicking on any image (replaced by the white spaces), can it be displayed bigger in the xxxxx cell.


http://mitglied.lycos.de/nanasoka/images/table.png
ASMBlah
04-16-2007, 11:35 AM
Nestea,

The following should do what you need


<html>
<head>
<script type="text/javascript">

function funcExpand(objImageThumb)
{
var objExpandedImage = document.getElementById("imgExpandedView");
objExpandedImage.src = objImageThumb.src;
objExpandedImage.alt = objImageThumb.alt;
}
</script>
</head>
<body>
<table border="1">
<tr>
<td colspan="2" rowspan="2">
<img id="imgExpandedView" alt="xxxxx" src="root.jpg">
</td>
<td>
<img alt="pic1" src="pic1.jpg" onclick="funcExpand(this);">
</td>
</tr>
<tr>
<td>
<img alt="pic2" src="pic2.jpg" onclick="funcExpand(this);">
</td>
</tr>
<tr>
<td>
<img alt="pic3" src="pic3.jpg" onclick="funcExpand(this);">
</td>
<td>
<img alt="pic4" src="pic4.jpg" onclick="funcExpand(this);">
</td>
<td>
<img alt="pic5" src="pic5.jpg" onclick="funcExpand(this);">
</td>
</tr>
</table>
</body>
</html>

Hope this helps :)

Dan
Nestea
04-16-2007, 01:36 PM
What about a non-scripting solution?
Just out of curiosity, would a frameset in this cell work or do they just work when the whole page is build with frames.
Nestea
04-20-2007, 03:24 AM
what if the images in the cells were thumbnails?
Where do i include the mouseout action if I replace onclick by over?
johnz
04-20-2007, 12:58 PM
Try this out

http://cssplay.co.uk/menu/gallery4.html
Nestea
04-21-2007, 11:37 AM
awww. I've been sitting for hours trying to get this to work with css, based on that (http://randsco.com/_miscPgs/cssZoom03.html). What a pain. Well I've used tables but nothing was dispayed correctly by Gecko.

Actually I thought this would be finished in some hours/minutes, but...


I would have never considered to use the <li> tags to get this done or :focus.

thanks johnz
preciate it. AND no script ^_^:



I'm amazed. If you click the centered image or thumbnail, the respective image is send to the background. *flash*

nice, css and Stu.

thanks
johnz
04-21-2007, 12:59 PM
You are welcome Nestea. :cool:

You should bookmark that site. Stu has tons of great stuff on there.
Nestea
04-21-2007, 05:23 PM
here I am again.
can't make it work, of course.

for now I am just adjusting the width.
the right "column" flickers whenever I hover over it.


ul#gallery {
padding:0;
margin:0;
width:546px;
height:336px;
position:relative;
background:#888 url(images/01.jpg);
}
#gallery li {
list-style-type:none;
width:78px;
height:48px;
float:left;
z-index:100;
}
#gallery li.lft {
float:left;
clear:left;
}
#gallery li.rgt {
float:right;
clear:right;
}
#gallery a {
position:relative;
width:78px;
height:48px;
display:block;
float:left;
z-index:100;
cursor:default;
}
#gallery a img {
position:relative;
width:76px;
height:46px;
border:1px solid #888;
z-index:100;
}
#gallery a:hover {
width:160px;
height:120px;
padding:108px 144px;
position:absolute;
left:0;
top:0;
z-index:20;
}
#gallery a:hover img {
background:#eee;
position:relative;
width:160px;
height:120px;
border:0;
z-index:20;
}
#gallery a:active, #gallery a:focus {
background:transparent;
width:420px;
height:240px;
padding:48px 63px;
position:absolute;
left:0;
top:0;
z-index:10;
}
#gallery a:active img, #gallery a:focus img {
background:#eee;
position:relative;
[color="blue"] width:390px;
height:239px;
border:0;
z-index:10;
}
/* hack for Internet Explorer */
#gallery li.pad {
height:0;
display:block;
margin-top:-2px;
width:528px;
font-size:0;
}

/* hack for Opera 7+ */
@media all and (min-width:0px){
#gallery a:hover {
background:#888;
width:320px;
height:240px;
padding:48px 64px;
position:absolute;
left:0;
top:0;
z-index:10;
}
#gallery a:hover img {
background:#aaa;
position:relative;
width:320px;
height:240px;
border:0;
z-index:10;
}


is there any reason, apart from having made a mistake, he included another
#gallery a:hover img
at the end?

FYI, I "need" it bigger.
johnz
04-21-2007, 05:25 PM
Nestea, can you post a link to the actual page?
Nestea
04-21-2007, 05:29 PM
it is not online.
I can send you the raw stuff. but it is exactly the same stuff. the css and xhtml.

it is just for learning purposes.