SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru
    Join Date
    Feb 2002
    Posts
    625
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Swap Image with <input type="image"..> How?

    Hello!

    First off, im not good with Javascript.

    Since god knows how long i use the same script to swap images.
    PHP Code:
    xoff = new Image();    xoff.src "images/speichern_off.gif";
    xon = new Image();    xon.src "images/speichern_on.gif";

    function 
    imgOn(imgName)
    {
    document.images.[imgName].src = eval(imgName +  "on.src");
    }
    function 
    imgOff(imgName)
    {
    document.images.[imgName].src = eval(imgName +  "off.src");

    Now for the first time i need to do this with an image that serves as a button in a form.

    Like this
    <td><input type="image" name="submit" src="./images/speichern_off.gif" OnMouseOver="imgOn('xon')" OnMouseOut="imgOff('xoff')"></td>

    But i keep on getting the message: Object expected..

    I tried everything i know but failed, i searched the web like crazy, but either i had bad luck, or this aint even possible.

    Any help would be greatly appreciated!

    Thanks a lot in advance,
    datune

  2. #2
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:
    <td><img name="submit" src="./images/speichern_off.gif" OnMouseOver="imgOn('xon')" OnMouseOut="imgOff('xoff')" onclick="window.location.href='http://www.google.com'" /></td
    there is no input tag called image.

    also another method
    PHP Code:
    <td><a href="http://www.google.com"><img name="submit" src="./images/speichern_off.gif" OnMouseOver="imgOn('xon')" OnMouseOut="imgOff('xoff')" /></a></td>
    Last edited by Andrew-J2000; May 29, 2002 at 20:54.

  3. #3
    SitePoint Guru
    Join Date
    Feb 2002
    Posts
    625
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No offence taken but did you even care to read my post at all?

    I need the image swap using an <input type="image"> BUTTON in a FORM as in

    <form action="{$PHPSELF}" method="POST" name="new_entry">
    //....
    <input type="image" name="submit" src="./images/speichern_off.gif" OnMouseOver="???" OnMouseOut="???">

    So basically i want to replace the usual submit button and at the same time i want to have an image flip on that same image. But it does not work

  4. #4
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wouldn't of read your post either... but i don't normally need to - i shoud be able to just scan the title and the first line and answer.

    The reason you get an Object Expected is because an input is in an entirely different part of the dom (document object model - if you're REALLY bad at JS: it describes the schema of hierarchy for objects in the html page).
    when you do document.all.images - you return an array (or collection) of objects - you then use the name [img] to access the object reference handle.

    Because you are not using an image - trying to access it through this collection won't work.

    Technical bit over.

    Now the best collection you could use is "all":
    document.all.[inpID].src bla as per usual.

    However - a faster access Method is to use: document.getElementById(inpID).src bla bla
    This does require a controlled environment of ie5+ ( or 5.5+) / NS6 compliant browsers - however i tend
    to exclude those who aren't on such a compliant browser
    due to plain obstinance

    Remember to give your input an ID and not to duplicate names or id's thorughout the dom unless on purpose or required (NEVER duplicate ID's they are linked to the reference handle i believe - and the dom can substantially collapse when trying to go through a unique collection with duplicate values)

    Hope this helps

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  5. #5
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    actually i did read your post, but it really didn't make sense as to the focus of what you wanted it to do.

    But I did learn something tho, thx, as i never realised that the input type image was a valid xhtml tag

    you have a couple options as Flawless said you referenced the object through an input tag, which is a form and not an reference of the image tag as each gets listed into an array, which ...src would not come into the input tag.

    you can make this code compatible with all browsers by using this

    PHP Code:

    document.getElementById;
    document.all;
    document.layers;

    if (
    x)
    {
     
    x('id').src
    }
    else if (
    y)
    {
      
    y.id.src
    }
    else if (
    z
    {
      
    //etc


    I would do it this way tho

    PHP Code:

    <script type="text/javascript"

    xoff = new Image(); xoff.src 'http://i.sitepoint.com/fi/buildOff.gif';
    xon  = new Image(); xon.src  'http://list.systinet.com/l/systinet/img/logo.gif';


    function 
    imgOn(what)
    {
      
    what.src xon.src;
    }
    function 
    imgOff(what)
    {
      
    what.src xoff.src;
    }

    </script> 
    <input type="image" name="submit" src="'imgOff(this)'" onmouseover='imgOn(this)' onmouseout='imgOff(this)'" /> 
    that way you dont have to reference the obj

  6. #6
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I concur - passing the reference handle to the option with the call is definately the best way of doing it.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  7. #7
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    besides that its the easiest way

  8. #8
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Andrew - think you might find the solution to this one fairly interesting:

    http://sitepointforums.com/showthrea...threadid=61883

    Let me know if you can think of anything else.

    p.s. Saw you log on yesterday - but you're pseudo remote scripting wasn't working because it wasn't refreshing the js file.
    To do this turn your ie settings for temporary internet pages to "get on every visit".
    It doesn't register the page as new otherwise - and loads it from cache.
    Maybe if i added a time dependant variable to the src it might help?!?! (nice thought there)

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •