menu mouseover using php and javascript
| From: | web_singer | Date: | Wed, 22 Sep 2004 20:06:22 +0000 |
| Subject: | menu mouseover using php and javascript | ||
| Groups: | php.general | ||
| Request: | Send a blank email to php-general+get-197610@lists.php.net to get a copy of this message | ||
I am using an array to create a menu and the code to change an image on
mouseover.
I would also like to change some text on mouseover. While i can do it using
a swtich in javascript it requires that I hard code all the different
options in. My whole reason for using the php in the first place was to
avoid having to hard code anything at all.
Does anyone have an idea how I can get the text portion to also use my
variable?
This is what i have so far...
<?
$site_pages = array("pageone", "pagetwo", "pagethree" );
$site_text = array("this is text one", "this is text two", "this is text
three" );
$page=getenv(SCRIPT_NAME) ;
$page = split( "/", $page);
$page = "." . $page[1];
$page = split( "\.", $page, 3);
$page = $page[1];
?>
<script language="JavaScript">
<!-- This script controls the rollovers in the menu area
if (document.images) {
<?
$counter = sizeof($site_pages);
$i = 0;
do {
$item = $i + 1;
echo " image" . $item . "off = new Image();\n";
echo " image" . $item . "off.src =
\"$site_pages[$i]-off.gif\";\n";
echo " image" . $item . "on = new Image();\n";
echo " image" . $item . "on.src = \"$site_pages[$i]-on.gif\";\n";
echo " otherImage" . $item . " = new Image();\n";
echo " otherImage" . $item . ".src =
\"$site_pages[$i]-b.jpg\";\n";
echo "\n";
$i++;
} while ($i < $counter);
$counterT = sizeof($site_text);
$t = 0;
do {
$item = $t + 1;
echo " text" . $item . " = \"$site_text[$t]\";\n";
$t++;
} while ($t < $counterT);
?>
otherImageDefault = new Image();
otherImageDefault.src = "index-b.jpg";
}
function changeImages() {
if (document.images) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src =
eval(changeImages.arguments[i+1] + ".src");
var getNum = changeImages.arguments[i+1];
var getNum = getNum.substring(10);
switch (getNum) {
case "1" :
var displayMe = text1;
break;
case "2" :
var displayMe = text2;
break;
case "3" :
var displayMe = text3;
break;
default :
var displayMe = "Default text before mouseover";
}
change(document.getElementById('theSPAN'),displayMe);
}
}
}
function change(el, nval) {
var oval = el.innerHTML;
el.innerHTML = nval;
el.onclick = function () { change(el, oval) };
};
// -->
</script>
then i have this in the body to create the actual menu
</tr>
<?
$i = 0;
do {
$item = $i + 1;
if ($site_pages[$i] == $page) {
echo "<tr>
<td><img name=\"image" . $item . "\"
src=\"$site_pages[$i]-in.gif\"
alt=\"" . $site_pages[$i] . ".php\" width=160 height=19
border=0></a></td></tr><tr><td><img
src=\"images/menu_split.gif\" border=0
width=160 height=2 ></td></tr>\n";
}
else {
echo " <tr>
<td><a href=\"$site_pages[$i].php\"
onMouseOver=\"changeImages('image"
. $item . "', 'image" . $item . "on', 'otherImage',
'otherImage" . $item .
"')\" ";
echo " onMouseOut=\"changeImages('image" . $item . "',
'image" . $item .
"off', 'otherImage', 'otherImageDefault')\">";
echo " <img name=\"image" . $item . "\"
src=\"$site_pages[$i]-off.gif\"
alt=\"" . $site_pages[$i] . ".php\" width=160 height=19
border=0></a></td></tr><tr><td><img
src=\"images/menu_split.gif\" border=0
width=160 height=2 ></td></tr>\n";
}
$i++;
} while ($i < $counter);
?>
So while this works it requires that I add a new case to the switch for
every additional menu item which makes the point of generating it in the
first place mute.
Any help would be appreciated.
WebSinger
---
Outgoing mail is certified Virus Free.
Checked by AVG anti-virus system (http://www.grisoft.com).
Version: 6.0.767 / Virus Database: 514 - Release Date: 09/21/2004