'disabled' image (greyed-out)?

crmpicco · October 4th, 2005, 04:31 AM

Is there a property to the <img> tag that will allow it to be disabled until a condition is met in the JavaScript? i.e. after a textbox has been filled in the script?

TIA.
Picco

www.crmpicco.co.uk

vinod_yadav1919 · October 4th, 2005, 05:22 AM

HI Crmpicco!!

<script>
function check()
{
if(document.myform.mytxt!="")
{
document.myform.img1.disabled=false;
}
}
</script>
<form name=myform method=get action="abc.html">
<img src="go_login1.gif" name=img1 height=100 width=100 disabled onclick="alert('hi')">
<input type=text name=mytxt onchange="check()">
<br>
<br>
<img src="go_login1.gif" height=100 width=100 onclick="alert('hi')">
</form>

Hope this will help you

Cheers :)

vinod

crmpicco · October 4th, 2005, 08:15 AM

thank vinod, that look great

www.crmpicco.co.uk

crmpicco · October 4th, 2005, 10:58 AM

hi again vinod, i added the disabled attribute to the <img> tag but it doesnt turn it grey (however it doesn disable it). I suppose i would be able to create a 'grey' image and put some opacity setting on it.

Although, is there a way to make it APPEAR disabled (i.e. grey it out?) like a disabled select drop down?

Thanks

www.crmpicco.co.uk

richard.york · October 4th, 2005, 11:03 AM

You want to use <input type='image' src='' />

I don't know what an image input does when disabled, but it wouldn't be too difficult to swap the image for the disabled state, just add a different image when disabled.

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

crmpicco · October 5th, 2005, 03:07 AM

thanks, how easy is it to make a image the same size and structure but grey?

www.crmpicco.co.uk

crmpicco · October 5th, 2005, 05:17 AM

is it possible to place an image over the top of another without using absolute positioning?

www.crmpicco.co.uk

crmpicco · October 5th, 2005, 11:39 AM

Code:

<style>
.opaque { filter: alpha(opacity=25); -moz-opacity:0.23; opacity=0.25 } 
</style>

<img src="images/info_white.gif" id="adt_info1" class="opaque" />

This code works for those that are interested.

Code:

function enableImg()
{
    var noa = window.opener.document.form.noa.value;
    var noc = window.opener.document.form.noc.value;

    for(a=1; a<=noa; a++)
    {
        var img = window.opener.document.getElementById("adt_info"+a);
        img.className = "deopaque";
        img.title = "";

        img.enablement = "disabled";
        img.disabled = false;        
    }

    for(c=1; c<=noc; c++)
    {
        var ch_img = window.opener.document.getElementById("chd_info"+c);
        ch_img.className = "deopaque";
        ch_img.title = "";

        ch_img.enablement = "disabled";
        ch_img.disabled = false;        
    }
}

i called the above function to make it enabled again.

www.crmpicco.co.uk

richard.york · October 5th, 2005, 11:43 AM

Err, an <img /> element does not have a disabled property. If you want to use the disabled property on an image, use an image input.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

crmpicco · October 6th, 2005, 03:51 AM

the disabled property seems to work ok, it removes all events from the button

www.crmpicco.co.uk