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

Originally Posted by tanuki

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

Let me know if you have any questions

HTML Code:

<!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>

Thread: image rollover help... please!!

Thread Tools

Search Thread

image rollover help... please!!

Bookmarks

Bookmarks

Posting Permissions