Expanding image

JavaScript
1

I have a question and I think javascript is the way to go…
So here’s what im thinking.
I have an image of half a quys face. When the mouse goes over it, the image should expand to reveal the whole face, when the image is clicked, it will act jst like a link.

2

Make the image a background image of a div. Set the div width to half the width of the image. On mouseover expand the div to the full width of the image. Use an onclick handler for your link to the other url. The background image should be positioned to (0,0) with no-repeat.

3

I have put together a basic script that demonstrates this technique. At the moment it expands on mouseover and contracts on mouseout. If you want it to stay open you will need to adjust it accordingly. I have atttached the image so that you can build it and play around with the code. Clicking on the image fires an alert(), but this can be a location.href call to another page if you need it.

[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Background Image Click</title>
<script type=“text/javascript”>
<!–
function init()
{ var theDiv=document.getElementById(“wrap”);
theDiv.onmouseover=function(){ this.style.width=“300px”; }
theDiv.onmouseout= function(){ this.style.width=“150px”; }
}
// -------
window.onload=init;
//–>
</script>
<style type=“text/css”>
<!–
#wrap {
width:150px;
height:278px;
margin:100px 0px 0px 100px;
background-image:url(‘numbers.jpg’);
background-position:0 0;
overflow:hidden;
clip:auto;
cursor:pointer;
border:1px solid #000;
}
–>
</style>
</head>

<body>

<div id=“wrap” onclick=“alert(‘Clicked’)”>
</div>
<!-- end wrap –>

</body>

</html>

4

thanks, it works great.
http://www.ontheocean.us/urturt.html
the only thing is how do I make it so when the image/div expands, it does at a slower pace so you can see the expanding?
Thanks.

5

in that above link, how do I make the other (bottom) image start at (background-position: 300px 0) and expand toward the left?
Thanks again…

6

Actually know that I’ve read up a bit, setInterval() and setTimeout() are not needed.
??Thanks anyway

7

I modified the page a bit to include 2 images,
http://www.ontheocean.us/urturt.html
How do I make the 2nd image (girl) expand to the left, so it overlaps the other image (lion) and how do I make the image (lion) overlap the image to the right (girl)