Log in

View Full Version : image rollover help... please!!


tanuki
01-03-2008, 09:19 PM
Ok i'm not sure if this is java script or not, but i saw it somewhere. its kinda hard to describe but yeah i hope someone understands..
sorry if this is confusing but there's a thing so that when you hover over an image, it turns it into the background of the page... sorta like a preview thingie....

if you could help me it would be great =]
pman
01-04-2008, 02:20 AM
Ok i'm not sure if this is java script or not, but i saw it somewhere. its kinda hard to describe but yeah i hope someone understands..
sorry if this is confusing but there's a thing so that when you hover over an image, it turns it into the background of the page... sorta like a preview thingie....

if you could help me it would be great =]

tanuki, have you tried it out yet? let us know how far you got or what you have so far. sounds simple. It's just a matter of grabbing the source of the image and setting it as the background of the body.

I haven't seen it anywhere, but be careful how you use it. some users might be annoyed if they see something happening that they don't expect. It all depends on how you use it.
pman
01-04-2008, 03:21 AM
Hi tanuki,

Here's a quick demo that you can look at. Save this as an html file and then run it. It was just a quick demo, but I'm sure it can be improved.

I can see why you liked it. I was having fun too :D

Let me know if you have any questions


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Setting Image as page background</title>
<script type="text/javascript">
function setAsBackground(img)
{
document.getElementById("workspace").style.background = "url(" + img.src + ") no-repeat center center" ;
}
</script>
</head>

<body id="workspace" style="width:80% ; height: 600px;" >
<div id="thumbnails">
<img alt="NightFall" src="http://my.playfuls.com/gamebabes/content/thumb2/thumb_6495.jpg" width="100" height="100" onMouseOver="setAsBackground(this)">
<img alt="Nature" src="http://www.netpakistani.com/wallpapers/wallpapers/Nature/Nature-12.jpg" width=" 100" height="100" onMouseOver="setAsBackground(this)">
<img alt="Google Wallpaper" src="http://www.wallpaperbase.com/wallpapers/computer/google/google_2.jpg" width="100" height="100" onMouseOver="setAsBackground(this)">
</div>
</body>


</html>