PDA

View Full Version : Dual Image flip, in a form button... still not working.


lavi557
11-05-2002, 02:41 AM
Ok, I asked this question and have recieved several replies. All good and helpful in some way. However, I still haven't been able to complete the whole project. My goal is to simply put a dual image flip, with the image that activates the dual flip (at another part of the page) being with in a form. Here is the script I'm using which works perfectly before I try to intergrate into a form.

<script language='javascript'>
if (document.images){
img1off= new Image();
img1off.src="images/interface/sba.gif";
img1on= new Image();
img1on.src="images/interface/sbb.gif";
dualimg1= new Image();
dualimg1.src="images/interface/search.gif";

dualimg= new Image();
dualimg.src="images/interface/blank.gif";

}
function dualrollover()
{
if(document.images){
for (var i=0; i<dualrollover.arguments.length; i+=2){
document[dualrollover.arguments[i]].src= eval(dualrollover.arguments[i+1] +".src");
}
}

}
//-->
</script>
</head>
<body>

Here is the actual form with the image that is used for the form button.

<form method="POST" action="http://www.site.com">
<input type="hidden" name="id" value="4" />
<input type="hidden" name="verify" value="<?php echo "$verify"; ?>" />
<input type="hidden" name="user" value="<?php echo "$user_id"; ?>" />
<input type="hidden" name="school" value="<?php echo "$school_id"; ?>" />
<input type="image" type="submit" value="Search" onMouseOver="dualrollover('image1', 'img1on', 'dualimga', 'dualimg1')" onMouseOut="dualrollover('image1', 'img1off', 'dualimga', 'dualimg')" src="images/interface/sba.gif" name="image1" border=0></p></form>
.

What confuses me is the fact that all parts work individually yet not together. Please any suggestion I'm sure will be helpful. WIll I need another script that works inside of forms. Or is this whole concept just not possible?

The dual image is simply text and I supposse the same effect could be achieved using text. If there is a way to make this work with out images that too would be useful. Thanks.

Roy Sinclair
11-05-2002, 02:12 PM
The problem you have is that when you put that image into the form you changed it's type. It's no longer declared using an IMG tag, you changed the tag to a INPUT TYPE="IMAGE" tag instead. That change means the image is no longer in the document.images array and is now in the document.forms[fournumber].elements array instead. You should have used the old trick of wrapping the IMG tag with an A tag instead.


<a href="javascript:document.forms[0].submit;">
<img onMouseOver="dualrollover('image1', 'img1on', 'dualimga', 'dualimg1')" onMouseOut="dualrollover('image1', 'img1off', 'dualimga', 'dualimg')" src="images/interface/sba.gif" id="image1" border="0">
</a>