Yahoo Answers is shutting down on May 4th, 2021 (Eastern Time) and beginning April 20th, 2021 (Eastern Time) the Yahoo Answers website will be in read-only mode. There will be no changes to other Yahoo properties or services, or your Yahoo account. You can find more information about the Yahoo Answers shutdown and how to download your data on this help page.
Trending News
How to make image expand using java and html?
How can I make an image expand like the one in : http://www.colourlovers.com/pattern/1741%E2%80%A6 Lila 146 (scroll down and hover over pink color)
I need the html and the code that makes it expand. Any Ideas?
1 Answer
- Anonymous10 years agoFavorite Answer
Here is your code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd%...
<html xmlns="http://www.w3.org/1999/xhtml%22 xml:lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="date" content="2003-12-02T09:54:03+08:00" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Dynamically enlarge image on mouseover and mouseout</title>
<style type="text/css">
body {margin:64px;}
#apDiv1 {
position:absolute;
left:361px;
top:161px;
width:186px;
height:144px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:306px;
top:127px;
width:300px;
height:164px;
z-index:1;
}
#apDiv3 {
position:absolute;
left:188px;
top:116px;
width:100px;
height:75px;
z-index:1;
}
#apDiv4 {
position:absolute;
left:387px;
top:113px;
width:100px;
height:75px;
z-index:2;
}
</style>
<script type="text/javascript">
// <![CDATA[
var glbInc, glbDec;
function decreaseSizeImage(image) // will get back to its normal default size
{
var id = image;
if(glbInc != null) {clearTimeout(glbInc); glbInc = null;};
if (document.getElementById(id).height > 100)
{
document.getElementById(id).height -= 30;
document.getElementById(id).width -= 40;
glbDec = setTimeout("decreaseSizeImage('"+id+"')", 32);
};
}
function increaseSizeImage(image)
{
var id = image;
if(glbDec != null) {clearTimeout(glbDec); glbDec = null;};
if (document.getElementById(id).height < 216)
{
document.getElementById(id).height += 30;
document.getElementById(id).width += 40;
glbInc = setTimeout("increaseSizeImage('"+id+"')", 32);
};
}
// ]]>
</script>
</head>
<body>
<div id="apDiv3"><a href="#" onmouseover="increaseSizeImage('image2');"
onmouseout="decreaseSizeImage('image2');"><img id="image2"
src="avatar196367_1.gif" width="100" height="75" alt="color" id="image2" /></a></div>
<p> </p>
<div id="apDiv4"><a href="#" onmouseover="increaseSizeImage('image1');"
onmouseout="decreaseSizeImage('image1');"><img id="image1"
src="avatar196367_1.gif"
width="100" height="75" alt="Krusty is helpless" /></a></div>
<p> </p>
<p id="validation"> </p>
</body></html>