Thread: Menu over background image
Results 1 to 3 of 3
Related
-
Having trouble adding top image over background image Forum: Myspace Forum
Replies: 3 -
background image Forum: HTML Forum
Replies: 9 -
td background image Forum: CSS Forum
Replies: 3 -
Can't get image to set as background Forum: HTML Forum
Replies: 4
-
03-30-2008, 11:27 AM #1
New User
Status- Offline
Join Date- Mar 2008
Posts- 2
Menu over background image
I can't get a menu to show up over a background image. I like use the code :
<div>
<img id="background" src="NewLrider.jpg" alt="" title="" />
</div>
to display the image, because it covers the whole page, grows, shrinks, etc.
But everything I've tried ends up under the background. I have a sample javascript menu I want to use, but even simple href items get overwritten?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"">
<html xmlns="" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Low Riders MC, LTD </title>
<meta name="Author" content="Angelo White" />
<meta name="Keywords" content="motorcycles, bikes" />
<meta name="Description" content="Low Riders Nashville" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<link rel="icon" href="../favicon.ico" type="image/ico" />
<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
#content {padding:5px 300px 20px 200px;}
p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
#fixed {position:absolute; top:25px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000;
padding:10px;}
</style>
<SCRIPT language=javascript>
// Courtesy of SimplytheBest.net -
<!--
function on(img)
{
if (!document.images) return;
document.images[img].src = "images/dynamic1.gif";
setTimeout ('document.images["'+img+'"].src = "images/dynamic2.gif";', 50);
setTimeout ('document.images["'+img+'"].src = "images/dynamic3.gif";', 100);
setTimeout ('document.images["'+img+'"].src = "images/dynamic4.gif";', 150);
setTimeout ('document.images["'+img+'"].src = "images/dynamic5.gif";', 200);
setTimeout ('document.images["'+img+'"].src = "images/'+img+'_over.gif";', 250);
}
function off(img)
{
if (!document.images) return;
document.images[img].src = "images/dynamic5.gif";
setTimeout ('document.images["'+img+'"].src = "images/dynamic4.gif";', 50);
setTimeout ('document.images["'+img+'"].src = "images/dynamic3.gif";', 100);
setTimeout ('document.images["'+img+'"].src = "images/dynamic2.gif";', 150);
setTimeout ('document.images["'+img+'"].src = "images/dynamic1.gif";', 200);
setTimeout ('document.images["'+img+'"].src = "images/'+img+'_default.gif";', 250);
}
//-->
</SCRIPT>
<script language="javascript">
// Courtesy of SimplytheBest.net -
<!--
var imgslist = new Array(
"images/dynamic1.gif",
"images/dynamic2.gif",
"images/dynamic3.gif",
"images/dynamic4.gif",
"images/dynamic5.gif",
"images/image1_over.gif",
"images/image2_over.gif",
"images/image3_over.gif",
"images/image4_over.gif",
"images/image5_over.gif",
"images/image6_over.gif"
);
var imgs=new Array();
if (document.images)
for (x=0; x<imgslist.length; x++)
{imgs[x]=new Image(); imgs[x].src = imgslist[x];}
//-->
</script>
<div>
<img id="background" src="NewLrider.jpg" alt="" title="" />
</div>
</head>
<body>
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
<tbody>
<tr>
<td bgcolor="#FFFFFF"><a onmouseout="off('image1');" onmouseover="on('image1');" href="<A href="http://planmagic.com/business_planning.html"><img">http://planmagic.com/business_planning.html"><img border="0" name="image1" src="images/image1_default.gif"></a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><a onmouseout="off('image2');" onmouseover="on('image2');" href="<A href="http://planmagic.com/marketing_planning.html"><img">http://planmagic.com/marketing_planning.html"><img border="0" name="image2" src="images/image2_default.gif"></a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><a onmouseout="off('image3');" onmouseover="on('image3');" href="<A href="http://planmagic.com/webquest.html"><img">http://planmagic.com/webquest.html"><img border="0" name="image3" src="images/image3_default.gif"></a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><a onmouseout="off('image4');" onmouseover="on('image4');" href="<A href="http://planmagic.com/financial_planning.html"><img">http://planmagic.com/financial_planning.html"><img border="0" name="image4" src="images/image4_default.gif"></a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><a onmouseout="off('image5');" onmouseover="on('image5');" href="<A href="http://planmagic.com/download.html"><img">http://planmagic.com/download.html"><img border="0" name="image5" src="images/image5_default.gif"></a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><a onmouseout="off('image6');" onmouseover="on('image6');" href="<A href="http://planmagic.com/register.html"><img">http://planmagic.com/register.html"><img border="0" name="image6" src="images/image6_default.gif"></a></td>
</tr>
</tbody>
</table>
</body>
</html>
-
04-01-2008, 12:33 PM #2
New User
Status- Offline
Join Date- Mar 2008
Posts- 2
Re: Menu over background image
I figured this problem out. I just had to add a line to the css style section in the header:
#content {padding:1px 50px 10px 10px; position:relative; z-index:1;}
Thanks for the responses, even though I couldn't figure out how to view them.
-
04-01-2008, 12:49 PM #3
Administrator
Status- Offline
Join Date- Aug 2000
Posts- 3,445
Re: Menu over background image
Happy to hear you got this resolved
.
Sadly, the only response was spam that had nothing to do with your issue.
Dave
Reply With Quote
