Code:
<style type="text/css">
img.expando{ /*sample CSS for expando images. Not required but recommended*/
border: none;
vertical-align: top; /*top aligns image, so mouse has less of a change of moving out of image while image is expanding*/
}
</style>
<script >
var ns=(document.layers);
var ie=(document.all);
var Ver4=(document.getElementById && !ie);
var VER=(px=(ns||Ver4||+"px"))?true:false;
if (document.images){
(function()
{
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim)
{
return dim[0] * cos + dim[1]
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width=widthHeight (e.ims[i].w);
im.style.height =widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump)
{
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
else
if (!e.ims[i].d && e.ims[i].jump > 0)
{
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}
//,
d = document.images,
i = d.length - 1;
for (i; i > -1; --i)
i = i + im.src;
if (!e.ims[i])
{
im.title = '';
e.ims[i]={im : new Image(), jump:-550};
//e.ims[i] = {im : new Image(), jump :-810};
e.ims[i].im.onload = function()
{
e.ims[i].w =[e.ims[i].im.width= 511,11];
e.ims[i].h =[e.ims[i].im.height=511,11];
};
e.ims[i].im.src = im.src;
return;
}
clearTimeout(e.ims[i].timer);
e.ims[i].d =111;
resize ();
return;};
expConIm.ims = {};
expConIm.r = new RegExp('\\bexpando\\b');
if (document.addEventListener)
{
//document.addEventListener('onClick', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else
//if (document.attachEvent)
{
//document.attachEvent('onClick', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}
</script><style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
left: -10px;
top: -10px;
width:800px;
height:840px;
border-width: 30;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
</style>
<a class="thumbnail" href="#thumb">Zoka Coffeecccccccc<span>Zoka CoffeeZoka Coffeexxxxxxxxxxxxxxxxxxxxxxxxxxxxx<img id=ty src="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall1.jpg" onmouseover=ty.src="usa.gif" ;style="position:absolute;left:2;top:-24;width:480;height:420;"/><br />Zoka Coffee</span></a>
<a class="thumbnail" href="#thumb"><img id=tr1 src="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall1.jpg" width="100px" height="66px" border="0" /><span><img src="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall1.jpg" /><br />Simply beautiful.</span></a>
<a class="thumbnail" href="#thumb"><img src="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall2.jpg" width="100px" height="66px" border="0" /><span><img src="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall2.jpg" /><br />So real, it's unreal. Or is it?</span></a>
<br />
<br />
<a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall2.jpg" style="position:absolute;left:24;top:-84;width:680;height:620;"/></span><br /><span><IMG SRC="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall1.jpg" WIDTH="20" HEIGHT="25" style="position:absolute;left:124;top:-64;width:80;height:60;"class="expando"><IMG SRC="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall3.jpg" WIDTH="100" HEIGHT="75" class="expando" onmouseover=img_roll(555,555)>
zpp,ong Dynamic Drive</span><spain><IMG SRC="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall3.jpg" WIDTH="100" HEIGHT="75" class="expando" onmouseover=img_roll(555,555)>
</spain></a><br />
<a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall3.jpg" /><br />Zoka Coffee</span></a>
<a class="thumbnail" href="#thumb">Zoka Coffee<span>Zoka CoffeeZoka Coffeexxxxxxxxxxxxxxxxxxxxxxxxxxxxx<img src="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall1.jpg" onmouseover='img_rolla(555,555);' ;style="position:absolute;left:2;top:-24;width:480;height:420;"/><br />Zoka Coffee</span></a>
<IMG SRC="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall1.jpg" WIDTH="100" HEIGHT="75" class="expando">
<IMG SRC="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall2.jpg" WIDTH="100" HEIGHT="75" class="expando">
<IMG SRC="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall3.jpg" WIDTH="100" HEIGHT="75" class="expando" onmouseover=img_roll(555,555)>
</center><title>Kerli Wallpapers : Powered By KerliTv</title>
<center>
<style type='text/css'>
a.img_roll:link, .img_roll{
width:200px;
height:40px;
display:block;
background-image:url(http://kerliwallpapers.webs.com/wall...itvsite0.png);
}
a.img_roll:hover{
width:200px;
height:40px;
display:block;
background-image:url(http://kerliwallpapers.webs.com/wall...itvsite1.png);
}
a.img_rolla:hover{
width:200px;
height:40px;
display:block;
background-image:url(usa.gif);
}
</style>
<a class="img_roll"></a>
</center>
<Style type="text/css" source="http://www.strikefile.com/" author="Thomas Zwaagstra">
table, tr, td{
background-color:transparent;
}
body, body.bodycontent{
background-image:url(http://kerliwallpapers.webs.com/wall...ChildrenBG.jpg );
background-position:center center;
background-repeat:repeat;
background-attachment:scroll;
}
body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{
color:rgb(102,102,102);
font-size:8pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Georgia,sans-serif;
}
a, a font, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, a.man, a.man:link, a.man:visited, a.man font, a.redlink, a.redlink:visited{
color:rgb(153,153,153);
font-size:8pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Georgia,sans-serif;
}
a:hover, a:hover font, a:active, a.navbar:hover, a.navbar:active, a.man:hover, a.man:active, a.man:hover font, a.searchlinkSmall:hover, a.searchlinkSmall:active, a.redlink:hover, a.redlink:hover{
color:rgb(102,102,102);
font-size:8pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Georgia,sans-serif;
}
a </Style>
<noscript></noscript><!-- -->
<script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript" src="http://kerliwallpapers.webs.com/wallpapers/javascript/TypingText.js">
</script>
<center>Please Wait! The Images Will Load, They May Take A Minute</center>
<center>
<div id="example1"> <a href="http://www.natalieshau.carbonmade.com">Natalie Shau</a> | <a href="http://www.youtube.com/kerlimusic">Official YouTube</a> |
<a href="http://www.kerlimusic.com">Official Site</a> | <a href="http://www.myspace.com/kerlimusic">Official Myspace</a> | <a href="http://www.myspace.com/kerlistreetteam">Join MoonChildren</a> | <a href="http://www.kerliwallpapers.webs.com/howto">?</a> </div>
</center>
<noscript></noscript><!-- -->
script type="text/javascript" src="http://www.freewebs.com/p.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://kerliwallpapers.webs.com/wallpapers/javascript/jquery.magnifier.js">
</script>
<center>
<a href="http://www.mearii.deviantart.com/" target="_blank"><img src="http://kerliwallpapers.webs.com/wallpapers/eximage/deviantart.png" border="0" class="gradualfader"></a></center>
<P>
<p>
<center>
<IMG SRC="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall1.jpg" WIDTH="320" HEIGHT="180" class="magnify">
<IMG SRC="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall2.jpg" WIDTH="320" HEIGHT="180" class="magnify">
<IMG SRC="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall3.jpg" WIDTH="320" HEIGHT="180" class="magnify">
Expando Image
Reply With Quote
Bookmarks