PDA

Click to See Complete Forum and Search --> : CSS Zoom Effect? Help.

tizbo1423
08-25-2008, 09:29 AM
i need a little help in figuring out how to create this effect i'm going for.

i have a gallery of thumbnails on a page that have been cropped down just show the top left corner. what i would like to happen is when the viewer mouses over the thumbnail, it expands from the top left corner into the full image.

is there any way of doing this in dreamweaver cs3 or CSS?

i'm not very familiar with CSS, yet. i'd appreciate any help! thanks
dtm32236
08-25-2008, 01:10 PM
sounds like you need flash for this.... DW, nor CSS will do this.

AJAX, maybe...
But if you don't know Flash or AJAX, this may be nearly impossible.
Fang
08-25-2008, 01:30 PM
Can be done with css, but IE6 and lower will not support the :hover<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>clip</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
img {position:absolute; clip:rect(0 45px 45px 0);}
img:hover {position:relative;}
</style>

</head>
<body>
<img alt="image" src=".image.jpg" height="450" width="450">
</body>
</html>
tizbo1423
08-25-2008, 02:11 PM
Can be done with css, but IE6 and lower will not support the :hover<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>clip</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
img {position:absolute; clip:rect(0 45px 45px 0);}
img:hover {position:relative;}
</style>

</head>
<body>
<img alt="image" src=".image.jpg" height="450" width="450">
</body>
</html>


thanks a lot. is there any way to get around the IE issue? also, if it isn't toooo much trouble, could maybe go through that code and explain what i need to change in it. i can understand some, but not all. like i obviously know the img tag, but am not familiar with the position and content information.

thanks again!
Fang
08-26-2008, 03:06 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>clip</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if lt IE 7]>
<style type="text/css">
img {behavior:url(ie-hover.htc);}
</style>
<![endif]-->

<style type="text/css">
img {position:absolute; clip:rect(0 45px 45px 0);}
img:hover {position:relative;}
</style>

</head>
<body>
<img alt="image" src="image.jpg" height="450" width="450">
</body>
</html>
<public:component>
<attach event="onmouseover" onevent="hover()" />
<attach event="onmouseout" onevent="out()" />
<script type="text/javascript">
function hover() {
element.style.position='relative';
}
function out() {
element.style.position='absolute';
}
</script>
</public:component>

http://www.w3schools.com/Css/default.asp
http://msdn.microsoft.com/en-us/library/ms537512.aspx
http://msdn.microsoft.com/en-us/library/ms531018(VS.85).aspx