All,
I have a situation on a page im designing where i want to click an image of a down arrow, have that change to an up arrow and also change another image at the same time, then change both back when i click it again. I spent most of yesterday hunting the net for a simple code i could use to do this and finally found one on this forum. When i adapted the code on a new page for my use it worked perfectly, but when i put it into the actual page i need it to work in it doesnt work at all.
I am using Dreamweaver to build the websites, and i am doing the design mostly graphically, with very little interaction with the code, mostly for time reasons (i havent got time to learn how to build it in code). Below is the script i included in the header of the page, and the html for the image....im not including all the stuff in between, just a little above and below. I would greatly appreciate it if you could have a look and see where it is failing. Im pretty sure its to do with the fact ive just dropped the code in at the top of the header because none of my rollovers are working now, but i cant figure out why. Its probably something really dumb, but like i said, this is the first time ive ever looked at a bit of code.
The images that should change are the ones named "arrownames" and "textnames", ie i click on the arrow and that and the text changes.
I have also included the entire code as a txt file.
Sorry for being so long winded,
Regards Moiz
SCRIPT:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Valtech</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
up=new Image() // Preloading the images.
up.src="../../Buttons/up_noroll.gif" // Location of the image.
down=new Image()
down.src="../../Buttons/down_noroll.gif"
firsttext=new Image()
firsttext.src="images/more_valtech.gif"
sectext=new Image()
sectext.src="images/more_valtech2.gif"
whichdirection="down"
whichtext="firsttext"
// Whatever current picture is (So far, up)
// They must be in quotes.
// They don't have to be .gifs, just names, lol.
function change() // Whatever function name you
{ // want.
if(whichdirection=="down"){whichdirection="up", whichtext="sectext"}
else if(whichdirection=="up"){whichdirection="down", whichtext="firsttext"}
// These switches pictures
document.arrownames.src = whichdirection + ".src"
document.textnames.src = whichtext + ".src"
// arrownames doesn't have to be named arrownames, but
// they have to have the name of the image.
/*
The Method eval() makes anything inside of it a variable, meaning that the direction that it is set on will be activated, with the added word of '.src'. They combine to down.src, which brings the picture to the down arrow.
*/
}
//-->
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
etc.....
................
<td height="310" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<!--DWLayoutTable-->
<tr>
<td height="215" colspan="2" valign="top" bgcolor="#FFFFFF"><img src=http://www.webdeveloper.com/forum/archive/index.php/images/more_valtech.gif name=textnames border=0 onClick="change()"></td>
<td width="295" rowspan="3" valign="top"><img src="images/valtech_det.gif" width="295" height="165"><img src="../../Buttons/qs.gif" width="125" height="25"><img src="../../Buttons/consultants/jacksoncoles.gif" name="Image36" width="170" height="25" id="Image36" onMouseOver="MM_swapImage('Image36','','../../Buttons/consultants/jacksoncoles-over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src=http://www.webdeveloper.com/forum/archive/index.php/"../../Buttons/contractor.gif" width="125" height="25"><img src="../../Buttons/consultants/john_brady.gif" name="Image37" width="170" height="25" id="Image37" onMouseOver="MM_swapImage('Image37','','../../Buttons/consultants/morganlovell-over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src=http://www.webdeveloper.com/forum/archive/index.php/"../../Buttons/MEEng.gif" width="125" height="25"><img src="../../Buttons/consultants/ibex.gif" name="Image38" width="170" height="25" id="Image38" onMouseOver="MM_swapImage('Image38','','../../Buttons/consultants/rybkabattle-over.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td width="413" height="25"> </td>
<td width="35" valign="top"><img src=http://www.webdeveloper.com/forum/archive/index.php/../../Buttons/down_noroll.gif name=arrownames border=0 onClick="change()"></td>
</tr>
<tr>
<td height="50"> </td>
<td> </td>
</tr>
<tr>
<td height="20"> </td>
<td> </td>
<td valign="top"><img src="../../Buttons/selectlinks.gif" width="295" height="20"></td>
...........
I have a situation on a page im designing where i want to click an image of a down arrow, have that change to an up arrow and also change another image at the same time, then change both back when i click it again. I spent most of yesterday hunting the net for a simple code i could use to do this and finally found one on this forum. When i adapted the code on a new page for my use it worked perfectly, but when i put it into the actual page i need it to work in it doesnt work at all.
I am using Dreamweaver to build the websites, and i am doing the design mostly graphically, with very little interaction with the code, mostly for time reasons (i havent got time to learn how to build it in code). Below is the script i included in the header of the page, and the html for the image....im not including all the stuff in between, just a little above and below. I would greatly appreciate it if you could have a look and see where it is failing. Im pretty sure its to do with the fact ive just dropped the code in at the top of the header because none of my rollovers are working now, but i cant figure out why. Its probably something really dumb, but like i said, this is the first time ive ever looked at a bit of code.
The images that should change are the ones named "arrownames" and "textnames", ie i click on the arrow and that and the text changes.
I have also included the entire code as a txt file.
Sorry for being so long winded,
Regards Moiz
SCRIPT:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Valtech</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
up=new Image() // Preloading the images.
up.src="../../Buttons/up_noroll.gif" // Location of the image.
down=new Image()
down.src="../../Buttons/down_noroll.gif"
firsttext=new Image()
firsttext.src="images/more_valtech.gif"
sectext=new Image()
sectext.src="images/more_valtech2.gif"
whichdirection="down"
whichtext="firsttext"
// Whatever current picture is (So far, up)
// They must be in quotes.
// They don't have to be .gifs, just names, lol.
function change() // Whatever function name you
{ // want.
if(whichdirection=="down"){whichdirection="up", whichtext="sectext"}
else if(whichdirection=="up"){whichdirection="down", whichtext="firsttext"}
// These switches pictures
document.arrownames.src = whichdirection + ".src"
document.textnames.src = whichtext + ".src"
// arrownames doesn't have to be named arrownames, but
// they have to have the name of the image.
/*
The Method eval() makes anything inside of it a variable, meaning that the direction that it is set on will be activated, with the added word of '.src'. They combine to down.src, which brings the picture to the down arrow.
*/
}
//-->
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
etc.....
................
<td height="310" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<!--DWLayoutTable-->
<tr>
<td height="215" colspan="2" valign="top" bgcolor="#FFFFFF"><img src=http://www.webdeveloper.com/forum/archive/index.php/images/more_valtech.gif name=textnames border=0 onClick="change()"></td>
<td width="295" rowspan="3" valign="top"><img src="images/valtech_det.gif" width="295" height="165"><img src="../../Buttons/qs.gif" width="125" height="25"><img src="../../Buttons/consultants/jacksoncoles.gif" name="Image36" width="170" height="25" id="Image36" onMouseOver="MM_swapImage('Image36','','../../Buttons/consultants/jacksoncoles-over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src=http://www.webdeveloper.com/forum/archive/index.php/"../../Buttons/contractor.gif" width="125" height="25"><img src="../../Buttons/consultants/john_brady.gif" name="Image37" width="170" height="25" id="Image37" onMouseOver="MM_swapImage('Image37','','../../Buttons/consultants/morganlovell-over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src=http://www.webdeveloper.com/forum/archive/index.php/"../../Buttons/MEEng.gif" width="125" height="25"><img src="../../Buttons/consultants/ibex.gif" name="Image38" width="170" height="25" id="Image38" onMouseOver="MM_swapImage('Image38','','../../Buttons/consultants/rybkabattle-over.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td width="413" height="25"> </td>
<td width="35" valign="top"><img src=http://www.webdeveloper.com/forum/archive/index.php/../../Buttons/down_noroll.gif name=arrownames border=0 onClick="change()"></td>
</tr>
<tr>
<td height="50"> </td>
<td> </td>
</tr>
<tr>
<td height="20"> </td>
<td> </td>
<td valign="top"><img src="../../Buttons/selectlinks.gif" width="295" height="20"></td>
...........