graphical button in form

[Christophe Thi�baud <ct...@trazom.stylo.it>]

Is there a prefered way to implement graphical buttons within a struts form ?

By graphical buttons I mean 4-state buttons
(enabled/disabled/mouseover/down) that display a different image for each state.

Christophe

Re[2]: graphical button in form

[Oleg V Alexeev <go...@penza.net>]

Hello Christophe,

Friday, February 02, 2001, 2:07:25 AM, you wrote:

>>> Is there a prefered way to implement graphical buttons within a struts form ?

>> You can use html:image tag and specify appropriate client-side scripts
>> for image switching.
>>  Oleg                            mailto:gonza@penza.net
..............
CT> how do you manage several <input type=submit> fields within one form ?
CT> <input> does not have a body, so you cannot nest an <img> inside an <input>

You can use <html:image> tag for it. This tag is rendered as

<input type="image" src="any.gif">

This html tag is part of 'official' HTML spec. and can be used as
replace for submit button.

....................
CT> mouseover/out still does not work with Nescape, so I will need to test the
CT> browser to produce a different response, one with a button for netscape, the
CT> other without for IE... ?

I test this scheme in IE only - we don't need Netscape.

-- 
Best regards,
 Oleg                            mailto:gonza@penza.net

Re: graphical button in form

[Christophe Thi�baud <ct...@trazom.stylo.it>]

On Thu, 01 Feb 2001, you wrote:

>> Is there a prefered way to implement graphical buttons within a struts form ?

> You can use html:image tag and specify appropriate client-side scripts
> for image switching.
>  Oleg                            mailto:gonza@penza.net

thanks Oleg for your example
but it did only address a part of the problem I described

how do you manage several <input type=submit> fields within one form ?

<input> does not have a body, so you cannot nest an <img> inside an <input>

<button> address this limitation, you can nest a <img> field into the body, 
but IE (here is 5.5) draws an ugly gray square around, and Netscape (4) does
not support mouseover/out within the <img>, only inside <button>...

Eventually I managed it with <img> fields alone (not nested) within a form:
- mouse up and down are working fine IE + Netscape
- on doclick, a javascript sets the value of an hidden input field
named "action" which I can then test in the request parameters

but  ...

mouseover/out still does not work with Nescape, so I will need to test the
browser to produce a different response, one with a button for netscape, the
other without for IE... ?

It is a lot of work for buttons ... Am I missing something ? there must be
something smarter...

Christophe

Re: graphical button in form

[Oleg V Alexeev <go...@penza.net>]

Hello Christophe,

Thursday, February 01, 2001, 2:31:28 PM, you wrote:

CT> Is there a prefered way to implement graphical buttons within a struts form ?

CT> By graphical buttons I mean 4-state buttons
CT> (enabled/disabled/mouseover/down) that display a different image for each state.

You can use html:image tag and specify appropriate client-side scripts
for image switching.
For example -

>> client-script code

<script LANGUAGE="JavaScript">
<!--

bName = navigator.appName;
bVer = parseInt(navigator.appVersion);
    if ((bName == "Netscape" && bVer >= 3) || 
        (bName == "Microsoft Internet Explorer" && bVer >= 4)) br = "n3"; 
    else br = "n2";

    if (br== "n3") { 
    img1on = new Image();
    img1on.src = "images/<bean:message key="abt.searchover"/>";

    img1off = new Image();
    img1off.src = "images/<bean:message key="abt.searchoff"/>";
    
    img1mdn = new Image();
    img1mdn.src = "images/<bean:message key="abt.searchclick"/>";

    }


function imgAct(sourceObj, imgName) {
    if (br == "n3") {
    sourceObj.src = eval(imgName + "on.src");
    }
}

function imgInact(sourceObj,imgName) {
    if (br == "n3") {
    sourceObj.src = eval(imgName + "off.src");
    }
}

function imgMDown(sourceObj,imgName) {
    if (br == "n3") {
    sourceObj.src = eval(imgName + "mdn.src");
    }
}

// -->
</script>

>> html:image tah

<html:image
   path="images/"
   src="abt.searchoff"
   isKey="true"
   onmouseover="imgAct(this,'img1')"
   onmouseout="imgInact(this,'img1')"
   onmousedown="imgMDown(this,'img1')">
 <bean:message key="srch.do"/>
</html:image>

-- 
Best regards,
 Oleg                            mailto:gonza@penza.net