Mouseover/Java Question

Discussion in 'HTML' started by William Hughes, May 29, 2005.

  1. Situation:

    I am using the following Javascript - based on Mike Cullen's MouseOver Button
    Wizard ( http://www.mobw.net ) - to animate my site's navigation buttons:

    <HEAD>

    <script language="JavaScript">
    var browser = '';
    var version = '';
    var entrance = '';
    var cond = '';
    // BROWSER
    if (browser == ''){
    if (navigator.appName.indexOf('Microsoft') != -1)
    browser = 'IE'
    else if (navigator.appName.indexOf('Netscape') != -1)
    browser = 'Netscape'
    else browser = 'NN';
    }
    // VERSION?
    if (version == ''){
    version= navigator.appVersion;
    paren = version.indexOf('(');
    whole_version = navigator.appVersion.substring(0,paren-1);
    version = parseInt(whole_version);
    }
    // BROWSER & VERSION
    if (browser == 'IE' && version >= 4) entrance = 'yes';
    if (browser == 'IE' && version < 4) entrance = 'no';
    if (browser == 'Netscape' && version >= 2.02) entrance = 'yes';
    if (browser == 'Netscape' && version < 2.02) entrance = 'no';
    if (entrance=='yes'){
    name0a=new Image;name0a.src="./img/btn-top.bmp";
    name0b=new Image;name0b.src="./img/btn-top-m.bmp";
    name0c=new Image;name0c.src="./img/btn-top-o.bmp";

    [... (16 other button definitions deleted)]

    name17a=new Image;name17a.src="./img/btn-online.bmp";
    name17b=new Image;name17b.src="./img/btn-online-m.bmp";
    name17c=new Image;name17c.src="./img/btn-online-o.bmp";
    }
    function lighten(imgName) {
    if (entrance == 'yes'){
    imgOn = eval(imgName + 'b.src');
    document[imgName].src = imgOn;
    }
    }
    function darken(imgName) {
    if (entrance == 'yes'){
    imgOff = eval(imgName + 'a.src');
    document[imgName].src = imgOff;
    }
    }
    function darken2(imgName) {
    if (entrance == 'yes'){
    imgClick = eval(imgName + 'c.src');
    document[imgName].src = imgClick;
    }
    }
    </script>

    </HEAD>

    Within my pages, I use the following:

    <BODY>

    <br><br>
    <center>
    <!--Button Number 16-->
    <a href="print.htm" target="_self" onmouseover="lighten('name15');
    window.status='Go to the Print References page'; return true"
    onmouseout="darken('name15'); window.status=''; return true"
    onmousedown="darken2('name15'); window.status='Loading...'; return true"
    onmouseup="darken('name15')"><img src="./img/btn-print.bmp" name="name15"
    alt="Click button to go to the Print References page" border="0"></a>
    <!--Button Number 17-->
    <a href="video.htm" target="_self" onmouseover="lighten('name16');
    window.status='Go to the Video References page'; return true"
    onmouseout="darken('name16'); window.status=''; return true"
    onmousedown="darken2('name16'); window.status='Loading...'; return true"
    onmouseup="darken('name16')"><img src="./img/btn-video.bmp" name="name16"
    alt="Click button to go to the Video References page" border="0"></a>
    <!--Button Number 18-->
    <a href="websites.htm" target="_self" onmouseover="lighten('name17');
    window.status='Go to the Online References page'; return true"
    onmouseout="darken('name17'); window.status=''; return true"
    onmousedown="darken2('name17'); window.status='Loading...'; return true"
    onmouseup="darken('name17')"><img src="./img/btn-online.bmp" name="name17"
    alt="Click button to go to the Online References page" border="0"></a>
    </center>

    </BODY>

    Both code sections are loaded with #INCLUDE statements.

    Problem:

    If I use the same button more than once in the body of the page, only the first
    instance is animated; the subsequent uses are not, although they are functional.
    What am I doing wrong?

    Also, I am considering eliminating the ONMOUSEOUT statements. If I undertand the
    function correctly, this will cause the ONMOUSEOVER and/or ONMOUSEDOWN text to
    remain in the status bar. Is this correct?
     
    William Hughes, May 29, 2005
    #1
    1. Advertising

  2. William Hughes wrote:

    > Situation:
    >
    > I am using the following Javascript


    Your subject line talks about Java. Java and JavaScript have about as much
    in common as Car and Carpet.

    > <script language="JavaScript">


    Missing required type attribute.

    > if (navigator.appName.indexOf('Microsoft') != -1)
    > else if (navigator.appName.indexOf('Netscape') != -1)


    User agent string detection instead of object detection with no provision
    for most modern browsers.

    It is not a good script. I strongly suggest you ditch it.

    > <br><br>


    Use margins, not multiple hard line breaks.

    > <center>


    Deprecated. Use CSS.

    > <!--Button Number 16-->
    > <a href="print.htm" target="_self" onmouseover="lighten('name15');
    > window.status='Go to the Print References page'; return true"


    Most browsers let users block mucking about with the status bar - and with
    good reason - its annoying and hides useful information from the user. I
    suggest you get rid of that. Consider the title attribute for advistory
    information.

    > onmouseup="darken('name15')"><img src="./img/btn-print.bmp" name="name15"


    ..bmp files are highly inappropriate for use on the web. Try PNG, JPEG or
    GIF.

    > alt="Click button to go to the Print References page" border="0"></a>


    The alt attribute is supposed to be a text replacement for the image, not a
    tooltip. See my previous reference to the title attribute and try:

    alt="Print References"

    > <!--Button Number 17-->
    > <a href="video.htm"


    There is a distinct lack of anything between the links, this can cause it to
    be difficult to tell where one link ends and the next starts (especially in
    text only browsers). Try marking up the list of links as a list.

    http://css.maxdesign.com.au/listamatic/

    > Both code sections are loaded with #INCLUDE statements.


    I'd suggest using <script src="..." ...></script> for including the
    JavaScript. That will let the user cache it between pages and save
    bandwidth (yours and theirs).

    > If I use the same button more than once in the body of the page, only the
    > first instance is animated; the subsequent uses are not, although they are
    > functional. What am I doing wrong?


    Probably having two elements with the same name and trying to reference them
    by it.

    > Also, I am considering eliminating the ONMOUSEOUT statements. If I
    > undertand the function correctly, this will cause the ONMOUSEOVER and/or
    > ONMOUSEDOWN text to remain in the status bar. Is this correct?


    Try it and see.

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, May 29, 2005
    #2
    1. Advertising

  3. On Sun, 29 May 2005 14:09:15 +0100, in alt.html David Dorward
    <> wrote:
    > William Hughes wrote:
    >
    > > Situation:
    > >
    > > I am using the following Javascript

    >
    > Your subject line talks about Java. Java and JavaScript have about as much
    > in common as Car and Carpet.


    Sorry; wasn't aware of the difference.

    > > <script language="JavaScript">

    >
    > Missing required type attribute.


    Had that elsewhere.

    > > if (navigator.appName.indexOf('Microsoft') != -1)
    > > else if (navigator.appName.indexOf('Netscape') != -1)

    >
    > User agent string detection instead of object detection with no provision
    > for most modern browsers.


    ???

    > Most browsers let users block mucking about with the status bar - and with
    > good reason - its annoying and hides useful information from the user. I
    > suggest you get rid of that. Consider the title attribute for advistory
    > information.


    Done.

    > > onmouseup="darken('name15')"><img src="./img/btn-print.bmp" name="name15"

    >
    > .bmp files are highly inappropriate for use on the web. Try PNG, JPEG or
    > GIF.


    The bitmaps were small, @2k each.

    > There is a distinct lack of anything between the links, this can cause it to
    > be difficult to tell where one link ends and the next starts (especially in
    > text only browsers). Try marking up the list of links as a list.
    >
    > http://css.maxdesign.com.au/listamatic/


    Nice. Very nice. I've fiddled with one of the examples and come up with
    something that works better than the Javascript version I had... which pretty
    much renders my earlier Javascript and your objections to it irrelevant.

    The changes also reduced the filesize of each page considerably.
     
    William Hughes, May 29, 2005
    #3
  4. William Hughes wrote:

    >> > if (navigator.appName.indexOf('Microsoft') != -1)
    >> > else if (navigator.appName.indexOf('Netscape') != -1)

    >>
    >> User agent string detection instead of object detection with no provision
    >> for most modern browsers.

    >
    > ???


    http://jibbering.com/faq/#FAQ4_26

    >> .bmp files are highly inappropriate for use on the web. Try PNG, JPEG or
    >> GIF.


    > The bitmaps were small, @2k each.


    File size is not the only consideration, support for rendering such images
    is weaker too.

    >> http://css.maxdesign.com.au/listamatic/

    >
    > Nice. Very nice. <snip>
    > The changes also reduced the filesize of each page considerably.


    Fantastic.

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, May 29, 2005
    #4
  5. On Sun, 29 May 2005 22:28:26 +0100, in alt.html David Dorward
    <> wrote:
    > William Hughes wrote:


    > >> http://css.maxdesign.com.au/listamatic/

    > >
    > > Nice. Very nice. <snip>
    > > The changes also reduced the filesize of each page considerably.

    >
    > Fantastic.


    Danke. Now if I could just find a way to put all the overhead from several dozen
    iterations of

    <img src="./img/st-sunk.gif"
    alt=" (Lost in battle) "
    align=middle
    hspace=5
    title="Ship sunk due to enemy action, including scuttling due to battle damage"
    >


    into CSS, I'd be a happy camper. Maybe I'll just have to wait for CSS3...
     
    William Hughes, May 30, 2005
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Steve Chatham

    ASP dotnet question - mouseover

    Steve Chatham, Nov 17, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    432
    Chris Jackson
    Nov 17, 2003
  2. Toronto Newf

    CSS Mouseover Question

    Toronto Newf, Jan 9, 2005, in forum: HTML
    Replies:
    12
    Views:
    4,288
  3. =?Utf-8?B?SGFyZHkgV2FuZw==?=

    Image mouseover/mouseout attributes and Theme/Skin question

    =?Utf-8?B?SGFyZHkgV2FuZw==?=, Feb 13, 2007, in forum: ASP .Net
    Replies:
    0
    Views:
    426
    =?Utf-8?B?SGFyZHkgV2FuZw==?=
    Feb 13, 2007
  4. Lam

    question about image and mouseover

    Lam, Jul 4, 2003, in forum: Javascript
    Replies:
    9
    Views:
    97
    Evertjan.
    Jul 7, 2003
  5. Leandro Ardissone

    mouseover question

    Leandro Ardissone, Jun 7, 2006, in forum: Javascript
    Replies:
    0
    Views:
    78
    Leandro Ardissone
    Jun 7, 2006
Loading...

Share This Page