V
VB Programmer
I used Photoshop/Image Ready to create rollover buttons (for a nav menu).
They work great.
But, when I take the html, including the javascript and put it in a
MasterPage, when I view the page (based on the Master) the rollovers don't
occur. Any ideas why? Is the Javascript supposed to work even when in a
Master Page?
Here's the partial HTML for the master... The javascript was created
automatically in Image Ready, so not to much of a need to debug that.
<%@ Master Language="VB" CodeFile="MasterPage.master.vb"
Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>New Website</title>
<script type="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
Home_over = newImage("images_nav/Home-over.gif");
About_over = newImage("images_nav/About-over.gif");
Services_over = newImage("images_nav/Services-over.gif");
Retail_over = newImage("images_nav/Retail-over.gif");
Managed_over = newImage("images_nav/Managed-over.gif");
Faq_over = newImage("images_nav/Faq-over.gif");
Contact_over = newImage("images_nav/Contact-over.gif");
Login_over = newImage("images_nav/Login-over.gif");
preloadFlag = true;
}
}
// -->
</script>
</head>
<body bgcolor="black" leftmargin="0" topmargin="0">
<form id="form1" runat="server">
<div>
<table bgcolor="black" border="0" style="width: 750px"
bordercolor="black" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 100px">
<img src="images/Header.jpg" /></td>
</tr>
<tr>
<td bgcolor="white"><table cellpadding="0" cellspacing="0"
style="width: 100%; height: 100%">
<tr>
<td style="width: 174px;">
<table id="Table_01" width="195"
height="403" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">
<img src="images_nav/Nav_01.gif" width="195" height="6" alt=""></td>
</tr>
<tr>
<td rowspan="11">
<img src="images_nav/Nav_02.gif" width="21" height="397" alt=""></td>
<td>
<a href="Default.aspx"
onmouseover="changeImages('Home', 'images_nav/Home-over.gif'); return
true;"
onmouseout="changeImages('Home', 'images_nav/Home.gif'); return true;"
onmousedown="changeImages('Home', 'images_nav/Home-over.gif'); return
true;"
onmouseup="changeImages('Home', 'images_nav/Home-over.gif'); return
true;">
<img name="Home" src="images_nav/Home.gif" width="174" height="23"
border="0" alt=""></a></td>
</tr>
:
:
Thanks!
They work great.
But, when I take the html, including the javascript and put it in a
MasterPage, when I view the page (based on the Master) the rollovers don't
occur. Any ideas why? Is the Javascript supposed to work even when in a
Master Page?
Here's the partial HTML for the master... The javascript was created
automatically in Image Ready, so not to much of a need to debug that.
<%@ Master Language="VB" CodeFile="MasterPage.master.vb"
Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>New Website</title>
<script type="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
Home_over = newImage("images_nav/Home-over.gif");
About_over = newImage("images_nav/About-over.gif");
Services_over = newImage("images_nav/Services-over.gif");
Retail_over = newImage("images_nav/Retail-over.gif");
Managed_over = newImage("images_nav/Managed-over.gif");
Faq_over = newImage("images_nav/Faq-over.gif");
Contact_over = newImage("images_nav/Contact-over.gif");
Login_over = newImage("images_nav/Login-over.gif");
preloadFlag = true;
}
}
// -->
</script>
</head>
<body bgcolor="black" leftmargin="0" topmargin="0">
<form id="form1" runat="server">
<div>
<table bgcolor="black" border="0" style="width: 750px"
bordercolor="black" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 100px">
<img src="images/Header.jpg" /></td>
</tr>
<tr>
<td bgcolor="white"><table cellpadding="0" cellspacing="0"
style="width: 100%; height: 100%">
<tr>
<td style="width: 174px;">
<table id="Table_01" width="195"
height="403" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">
<img src="images_nav/Nav_01.gif" width="195" height="6" alt=""></td>
</tr>
<tr>
<td rowspan="11">
<img src="images_nav/Nav_02.gif" width="21" height="397" alt=""></td>
<td>
<a href="Default.aspx"
onmouseover="changeImages('Home', 'images_nav/Home-over.gif'); return
true;"
onmouseout="changeImages('Home', 'images_nav/Home.gif'); return true;"
onmousedown="changeImages('Home', 'images_nav/Home-over.gif'); return
true;"
onmouseup="changeImages('Home', 'images_nav/Home-over.gif'); return
true;">
<img name="Home" src="images_nav/Home.gif" width="174" height="23"
border="0" alt=""></a></td>
</tr>
:
:
Thanks!