PDA

View Full Version : how to get a picture to expand on rollover?



blwow
03-20-2007, 11:15 AM
Hi everyone!

I saw this website today http://www.skaffers.com and when you roll over an image a speech bubble opens and the picture expands!

I saved the skaffers webpage to my desktop and I tried to customize it but I dont know how to adjust it to my cause. I can't get the picture to load on rollover either.

I made a blog using codegrrl blog tutorials (http://codegrrl.com/!/tutorials/category/Build%20A%20Blog/P10/). What id like to do is post a picture that expands on rollover using my blog entry form.

Please can someone let me know if this is possible and how to go about doing this!
Thanks and all the best!

blwow
03-20-2007, 10:20 PM
Ok these are my attempts at taking the code out of skaffers source
http://www.jamesgardner.lincoln.ac.uk/imagexpand/ier3.html
http://www.jamesgardner.lincoln.ac.uk/imagexpand/ier.html
http://www.jamesgardner.lincoln.ac.uk/imagexpand/imageexpand.html

Surprise.. Surprise It doesnt work ???

When I saved the skaffers webpage to my desktop and edited it in dreamweaver some of the code I couldnt edit because its in templates which are locked.. I've never used templates before so I have no idea why the code is in grey and locked.

Please help

pcbrainbuster
03-20-2007, 11:16 PM
To get an picture to expand just do this -

<img src="image directory" onmouseover="expand(this)" onmouseout="normal(this)" style="width: 100px; height: 100px">
<script>
function expand(itemA) {
itemA.style.width=200+"px"
itemA.style.height=200+"px"
}

function normal(itemB) {
itemB.style.width=100+"px"
itemB.style.height=100+"px"
}
</script>

And that is pretty much it :) - (though it was not tested, sorry about that (there are most likely typos))

mburt
03-20-2007, 11:32 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Caption Hover</title>
<script type="text/javascript">
function display(x,y,text,src) {
var c = document.getElementById("capt");
c.style.left = x + "px";
c.style.top = y + "px";
while (c.firstChild) c.removeChild(c.firstChild);
c.appendChild(document.createTextNode(text));
var img = document.createElement("img"),br = document.createElement("br");
img.src = src;
img.style.clear = "left";
img.style.marginTop = "25px"
img.border = "1"
c.appendChild(img);
}
function getimg() {
var img = document.getElementsByTagName("img");
for (var i = 0;i < img.length;i++) {
img[i].onmouseover = function() {
document.getElementById("capt").style.display = "block";
}
img[i].onmousemove = function(e) {
var ev = e || event,ox=20,oy=20;
display(ev.clientX+ox,ev.clientY+oy,this.getAttribute("alt"),this.getAttribute("src"));
return false;
}
img[i].onmouseout = function() {
document.getElementById("capt").style.display = "none";
}
}
}
window.onload = getimg;
</script>
<style type="text/css">
#capt {
width:118px;
height:58px;
position:absolute;
background:url('hv.png') no-repeat;
padding-top:17px;
padding-left:5px;
font:11pt verdana ref;
font-weight:bold;
display:none;
filter:alpha(Opacity=80);
opacity:0.8;
-moz-opacity:0.8;
-khtml-opacity:0.8;
}
</style>
</head>
<body>
<div id="capt"></div>
<img src="images/dirtbike.png" alt="My Dirtbike" width="100" height="100">
<img src="images/planet.jpg" alt="A planet" width="100" height="100">
</body>
</html>

And you'll need hv.png (attached).

See it here: http://mburt.no-ip.biz/testing/caption_hover.htm

blwow
03-21-2007, 01:10 AM
ok but neither of these do what I want..

pcbrainbuster - this is what I did with your code:
http://www.jamesgardner.lincoln.ac.uk/imagexpand/imagexpand01.htm
I need this to load on top of the image so it doesn't move content around the screen

mburt- This is my attempt with the captain hover method. The main image doesnt load on rollover only the bg does:
http://www.jamesgardner.lincoln.ac.uk/imagexpand/imagexpand02.html
Id like the speechbubble image (hv.png) to be in the background but the bike to load inside it. Just like skaffers.com. I need to change the text with the image and the image doesn't reset back to small after mouse rollout.

blwow
03-21-2007, 04:00 PM
mburt - how can I replace the text with a bigger image?

blwow
03-21-2007, 07:36 PM
I added this after and before the first appenchild but it doesnt work

var myImage = document.createElement('img');
myImage.setAttribute('src','dirtbike_big.png');
myImage.setAttribute('alt','');

c.appendChild(myImage);