Advanced mouseover effects

**redrum78** · 10-20-2005, 08:18 AM

Hello,

This is my first post (after i had learnt the rule

). I am hoping someone can help me with my website http://www.createtodestroy.com/main.htm

I want to create an effect so that when the mouse rolls over the links in the bottom right of the page (Bio, News, 3D etc.) then the image of the TV screen above will change from the fuzz there now to a picture preview of whats on the page related to the link. I know it can be done becuase i have done it before with Fireworks using slice, layers etc. However, this website is so overloaded with HTML that fireworks won't accept it.

The person i am designing the site for had very specific requirements and it has meant that the website is a nightmare to construct. I have had to stretch the background which creates havoc with hotspots etc. grrrr

Also, I am sorry but the website will only look completly right in 1152x864 resolution. I have two versions of the website at the moment the 1152 version and a 1024 version (because of the need for each page to appear inside the stretched background of the TV screen).

I hope someone can help me and the easier the solution the better

**CobraHosts** · 10-20-2005, 11:12 PM

I can't see what you're talking about. All I see from your link is a static web page...

**redrum78** · 10-21-2005, 07:48 AM

That is strange. You should see a bordered web page with some writing inside on the left. On the right should be a gif of tv set with some block letters below (Bio, news, 2D, 3D and ceramics etc.)

Can anyone see the website?

**funkdaddu** · 10-21-2005, 10:30 AM

That background/border isn't going to cut it... you can't assume that everyone who visits your site will have that exact screen size. Just make a table that has 9 cells, 3x3, make a graphic for each corner, make each corner a fixed size in pixels, for the top/bot/left/right make a repeating image for each side and make it a background image, and place the content in the center cell of this table. This is the old, table way but it still works:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
	</head>

	<body bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
		<table width="100%" border="0" cellspacing="2" cellpadding="0" height="100%">
			<tr height="25">
				<td width="25" height="25"><img src="upperleft.gif" alt="" height="25" width="25" border="0"></td>
				<td height="25" background="top.gif"></td>
				<td width="25" height="25"><img src="upperright.gif" alt="" height="25" width="25" border="0"></td>
			</tr>
			<tr>
				<td width="25" background="left.gif"></td>
				<td>Your Content Goes Here</td>
				<td width="25" background="right.gif"></td>
			</tr>
			<tr height="25">
				<td width="25" height="25"><img src="bottomleft.gif" alt="" height="25" width="25" border="0"></td>
				<td height="25" background="bottom.gif"></td>
				<td width="25" height="25"><img src="bottomright.gif" alt="" height="25" width="25" border="0"></td>
			</tr>
		</table>
	</body>

</html>

for the tv thing, google for javascript image rollover and you should find lots of tutorials on how to do it:
http://www.google.com/search?hl=en&l...pt&btnG=Search

**redrum78** · 10-21-2005, 10:44 AM

Thanks funkdaddu,

But am i right in thinking that if i create a repeat image in each corner it won't look like the current background because the current "tv frame" is too complicated?

Each page of the website has to be contained inside this "tv frame" is this possible with using repeat images?

By the way, the opening page of the website automatically detects your resolution and takes you to the correct page for your resolution (1152 and 1024 at the moment).

**extermin8tor** · 10-27-2005, 11:35 PM

i see it fine in mozilla on 1024x768

**funkdaddu** · 10-31-2005, 01:00 PM

Yeah, repeating won't work, the image is too varied. But if you stretch the top/bot/left/right images to 100% width or height instead of using a repeating BG image it would work sorta. This type of design is problematic, as you can see, when people go for this type of design they usually just make i a fixed size, usually for a 800x600 display.

**funkdaddu** · 10-31-2005, 01:19 PM

There are ways around, check out the files attached:

**funkdaddu** · 01:26 PM

No way to delete posts? Well here are the files I was trying to attach: http://homepage.mac.com/jbhopper/CreateDestroy.zip