Results 1 to 8 of 8

Thread: Any input on how to write this better

  1. #1
    Join Date
    Jun 2007
    Location
    California
    Beans
    226
    Distro
    Ubuntu 12.04 Precise Pangolin

    Any input on how to write this better

    Code:
    <img src="../images/image1_thumb.jpg" alt="thumb"
    onmouseover="window.document.getElementById('full').src='../images/image1.jpg';"
    onmouseout="window.document.getElementById('full').src='../images/full.png';"/>
    I'm looking for a better way to do this, or just write it. Maybe just a single function. Any ideas?

  2. #2
    Join Date
    Nov 2006
    Location
    Israel
    Beans
    765
    Distro
    Ubuntu 9.04 Jaunty Jackalope

    Re: Any input on how to write this better

    If you are doing this several times, then you can definately use a function.
    This is untested, but:
    Code:
    function return_default_image()
    {
            window.document.getElementById('full').src='../images/full.png';
    }
    function set_new_image(image)
    {
            window.document.getElementById('full').src='../images/' + image;
    }
    And then you would have:
    Code:
    <img src="../images/image1_thumb.jpg" alt="thumb" onmouseover="set_new_image('image1.jpg');" onmouseout="return_default_image();"/>
    Which looks quite a bit nicer to me
    Intel E6300 / MSI P4M890M / 2GB DDR2 677 / 80GB + 1TB SATA2 / GeForce 6200TC / DL DVD+-RW / Dell 24" U2410

  3. #3
    Join Date
    Jun 2007
    Location
    California
    Beans
    226
    Distro
    Ubuntu 12.04 Precise Pangolin

    Re: Any input on how to write this better

    very nice...very nice...

  4. #4

    Re: Any input on how to write this better

    And then unobtrusive JavaScript techniques allow you to move all the onsomething event handlers out completely, potentially into a separate JavaScript file:

    Code:
        <img src="/img/button0.gif" class="hoverable" />
    
        ...
        function imagemouseover() {
            this.src= this.src.replace('0.gif', '1.gif');
        }
        function imagemouseout() {
            this.src= this.src.replace('1.gif', '0.gif');
        }
    
        for (var i= document.images.length; i-->0;) {
            var image= document.images[i];
            if (image.className=='hoverable') {
                image.onmouseover= imagemouseover;
                image.onmouseout= imagemouseout;
            }
        }
    But then if all you're doing is a hover effect, you might be better off just using CSS :hover.

  5. #5

    Re: Any input on how to write this better

    Use CSS insted, and learn how to use JQuery.
    im dyslexic, please don't comment on my spelling
    blender 3d artist, visit my portfolio
    Quad-Ren, Open source, resolution independent 2D graphics engine
    Screen space is a precious resource, don't waste it

  6. #6
    Join Date
    Mar 2008
    Location
    UK
    Beans
    145
    Distro
    Ubuntu 10.04 Lucid Lynx

    Re: Any input on how to write this better

    You don't need to use getElementById. Just do:

    Code:
    <img src="../images/image1_thumb.jpg" alt="thumb"
    onmouseover="full.src='../images/image1.jpg'"
    onmouseout="full.src='../images/full.png'"/>

  7. #7

    Re: Any input on how to write this better

    Like I said above, Just use CSS:
    http://htmldog.com/articles/rollovers/
    im dyslexic, please don't comment on my spelling
    blender 3d artist, visit my portfolio
    Quad-Ren, Open source, resolution independent 2D graphics engine
    Screen space is a precious resource, don't waste it

  8. #8

    Re: Any input on how to write this better

    Quote Originally Posted by JohnFH View Post
    onmouseover="full.src='../images/image1.jpg'"
    I'm assuming you've omitted ‘id="full"’ on the img (like in smartbei's example), without which this doesn't make much sense.

    Even so, this isn't a good idea. Referring to an element with ‘id="foo"’ by using a global-scope ‘foo’ (or ‘window.foo’, which is the same thing) is a non-standard hack introduced by IE that [doesn't work | works differently | works unreliably] in other browsers. Firefox will spit a “Element referenced by ID/Name in global scope. Use W3C standard” warning to the console to let you know you're doing it wrong.

    ‘document.foo’ is another slightly-less-short shortcut that is often used, but it too has problems with cross-browser compatibility. Both ‘document.foo’ and ‘window.foo’ also suffer from problems when you use a name which clashes with a method or other property defined on ‘document’ or ‘window’. In this case, using the direct property access can leave you with the element, or the original member. And since every new browser/version can introduce new members of ‘document’ and ‘window’, you can't be sure that your element ID won't clash with a native member in a future browser.

    So, for accessing elements by ID, ‘document.getElementById()’ really is what you want. The old-style DOM-HTML form-navigation interfaces like ‘document.forms.formname.elements.fieldname’ can sometimes also be useful if you want to access fields by control name without having to use IDs, but otherwise definitely ‘getElementById()’.

    A more pleasant alternative in this case is to use ‘this.src’. In an event handler, ‘this’ points to the element that received the event.

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
  •