|
|
Posted by Leoa on 09/04/07 20:54
Any help is much appreciated!
My goal is to swap the background image on the tabs in the main menu
of a website.
Becasue this site has a few menus in it, i'd like to use an array to
store the swaped images.
I've been working on it and I made a working example that is close to
what i want.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>innerHTML</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml;
charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body {
background:#aaaaaa;
}
#foo {
position:absolute;
top:60px;
left:400px;
}
#links {
width:70px;
border:solid 1px #000000;
}
/*//]]>*/
</style>
<script type="text/javascript">
var aAuthor = new Array("Tab2.jpg", "Tab2.jpg", "Tab2.jpg");
var bAuthor = new Array("Tab3.jpg", "Tab3.jpg", "Tab3.jpg");
var urls="image_files/images/";
function writeScroll(num)
{
document.getElementById("foo").style.backgroundImage =
"url('"+urls+aAuthor[num]+"')";
}
function writeScroll2(num)
{
document.getElementById("foo").style.backgroundImage =
"url('"+urls+bAuthor[num]+"')";
}
</script>
</head>
<body>
<div id="foo"></div>
<div id="links">
<a href="#"onmouseover="writeScroll(0)"
onmouseout="writeScroll2(0)">golf</a><br />
<a href="#"onmouseover="writeScroll(1)"
onmouseout="writeScroll2(1)">MTV</a><br />
<a href="#"onmouseover="writeScroll(2)"
onmouseout="writeScroll2(2)">Dating</a>
</div>
</body>
</html>
However when I put this code in a php module it does not work:
///tabs_3.php ///php module:////////////////////////////////////////////////////////////////////////
<script type="text/javascript">
alert("script is running");
var aTab = new Array("Tab2.gif", "Tab2.gif", "Tab2.gif" "Tab2.gif",
"Tab2.gif", "Tab2.gif");
var bTab = new Array("Tab3.gif", "Tab3.gif", "Tab3.gif" "Tab3.gif",
"Tab3.gif", "Tab3.gif");
var urls="image_files/images/";
function writeScroll(num)
{
document.getElementById("bg_image").style.backgroundImage =
"url('"+urls+aTab[num]+"')";
}
function writeScroll2(num)
{
document.getElementById("bg_image").style.backgroundImage =
"url('"+urls+bTab[num]+"')";
}
function myTabs()
{
alert("function myTabs is running");
document.getElementById("bg_image").style.backgroundImage="url
('image_files/images/Tab2.gif')";
}
self.onload = function() {myTabs();}
</script>
/// tabs_3.php ///end of tabs_2.php module://////////////////////////////////////////////////
// header.php
file////////////////////////////////////////////////////////
//this file stores the layout off the tabs
<div class="backg" onmouseover="writeScroll(0)"
onmouseout="writeScroll2(0)" id="bg_image"><a
Home</a>
</div>
<div class="backg" onmouseover="writeScroll(1)"
onmouseout="writeScroll(1)" id="bg_image"><a>
Advertisers Agencies</a>
</div>
// end of header
file//////////////////////////////////////////////////////////////////
//
index.php//////////////////////////////////////////////////////////////////////////////
this file displays the tab menu
<body>
<?php include_once("include_files/config.php"); ?>
<div align="center">
<?php include_once("include_files/modules/tabs_3.php"); ?>
</body>
/// end of
index.php//////////////////////////////////////////////////////////////////////
Am i missing something? when I put an alert(); in the tabs_3.php file
I get the alert but no images are displayed.
help plz...
Navigation:
[Reply to this message]
|