Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 25
  1. #1
    New Coder
    Join Date
    Aug 2013
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts

    JS to index images?

    I know little of HTML and less of JS, so forgive me for goofs, but i need help.

    I have seven images that i want to index or cycle thru.
    With HTML usemap i can select "Page-" or "Page+" part of a presented image.
    Presently, the onMouseover() passes a fixed image name to a few JS scripts that can nicely "roll over" the numbers of those seven image pages: forward or backwards in sequence 1,2,,6,7,1.
    The onMouseover() fixed image names do get properly changed.
    Took me two weeks to get this far.

    But i want to _cycle_ thru all of them by use of the onMouseover().
    Help?
    Code:
    <script type="text/javascript">
    var title="images/CodatronP1.png";
    var dir=-1;
    function incrPage(dir,title)
     {
      var num=parseInt(title.substr(16,1).valueOf());
      if (dir===-1)
       {
       num=num-1;
       if (num===0) {num=7;}
       }
      else
       {
       num=num+1;
       if (num===8) {num=1;}
       }
       title=title.substr(0,16)+num+title.substr(17);
       return title;
    // Sequence is 1,2,,7,1 for plus, 1,7,6,,1 for minus
    }
    // var hi=incrPage(-1,"images/CodatronP1.png");
    </script>
    
    <script type="text/javascript">
    function SwPage(updn,nam) {
     if (updn == "up") {
        var NUpg=incrPage(1,nam);
        document.getElementById("imgpage").src = NUpg;
      }
      else {
        var NUpg=incrPage(-1,nam);
        document.getElementById("imgpage").src = NUpg;
      }
    }
    </script>
               <!-- Closer!
            Visiting "Page -" switches to Pg2 which is before cited Pg3
            Visiting "Page +" switches to Pg6 which is before cited Pg5
              It would seem that if HTML could var src we might be in business
               -->
      <div class=" container_24">
       <div class="wrapper">
     <img id="cha" src="images/ShuttleN.png" alt="Select+-"  usemap="#PageSelect" >
       <div class="wrapper">
         <img id="imgpage" src='images/CodatronP1.png' alt="Page">
    
          <map id="mappage" name="PageSelect">
    <area shape="rect" alt="Minus" coords="65,0,135,35"
           onMouseover="SwPage('dn','images/CodatronP3.png')"  >
    <area shape="rect" alt="Plus" coords="590,0,668,35"
           onMouseover="SwPage('up','images/CodatronP5.png')"  >
    <area shape="default" nohref="nohref" alt="" >
          </map>
       </div>
      </div>

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,021
    Thanks
    15
    Thanked 239 Times in 239 Posts
    To start with 'onmouseover', all lower case letters, is not a function, it's an action that can call a function.
    Code:
    onmouseover="incrPage(arg0,arg1);"
    Is what you would add to the element you want to mouse over. You have to supply the values of arg0 and arg1.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    New Coder
    Join Date
    Aug 2013
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Solved!

    Well, for starters, i have a HUGE gripe!
    What in the H E double toothpicks is an AD in the background for KeyBank (and from the verbage) apparently an invisible YouTube video?
    I had to enable NoScript add-on to kill that garbage.
    **
    Now to real business.
    I had thought i had spelled onMouseover correctly; please check below in working code.
    Code:
    <script type="text/javascript">
    var title="images/CodatronP1.png";
    var dir=-1;
    function incrPage(dir,title)
     {
      var num=parseInt(title.substr(16,1).valueOf());
      if (dir===-1)
       {
       num=num-1;
       if (num===0) {num=7;}
       }
      else
       {
       num=num+1;
       if (num===8) {num=1;}
       }
       title=title.substr(0,16)+num+title.substr(17);
       return title;
    // Sequence is 1,2,,7,1 for plus, 1,7,6,,1 for minus
    }
    
    function SwPage(updn) {
       var Pnam=document.getElementById("imgpage").src;
    // above gives full URL, so must parse
       var NamLoc=Pnam.search("images");
       var ISnam=Pnam.substr(NamLoc);
     if (updn == "up") {
        var NUpg=incrPage(1,ISnam);
        document.getElementById("imgpage").src = NUpg;
      }
      else {
        var NUpg=incrPage(-1,ISnam);
        document.getElementById("imgpage").src = NUpg;
      }
    }
    </script>
    <div class=" container_24">
     <div class="wrapper">
     <img src="images/ShuttleN.png" alt="Select+-"  usemap="#PageSelect" >
      <div class="wrapper">
       <img id="imgpage" src='images/CodatronP1.png' alt="Page">
       <map id="mappage" name="PageSelect">
        <area shape="rect" alt="Minus" coords="65,0,135,35" onMouseover="SwPage('dn')"  >
        <area shape="rect" alt="Plus" coords="590,0,668,35" onMouseover="SwPage('up')"  >
        <area shape="default" nohref="nohref" alt="" >
       </map>
      </div>
     </div>
    What was surprising as all heck, was my crazy idea to use document.getElementById("imgpage").src "backwards" from all documented and apparently standard usage.
    "Standard" usage is like GET<--WhatIgot and i tried like WhatIwant<--GET.
    Sorry for the unconventional description etc but that simplified things for me.
    Note the FULL URL is returned in the second form, but only the id text is replaced in the first form.
    In any case, in the "standard" form, it looks strange that a "GET" does not get, but puts.
    *
    Thanks; hope my unconventional use of "GET" is useful for others.

  • #4
    New Coder
    Join Date
    Aug 2013
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts

    SOLVED follow-up

    In my function incrPage(dir,title) one of the JS lint sites complained about
    var num=parseInt(title.substr(16,1).valueOf());

    What does "Missing radix parameter" mean here?
    Thanks.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by robertbaer View Post
    In my function incrPage(dir,title) one of the JS lint sites complained about
    var num=parseInt(title.substr(16,1).valueOf());

    What does "Missing radix parameter" mean here?
    Thanks.
    parseInt is for converting numbers between different bases. It takes two parameters. The first is a string with the value in base 2 or base 16 or base 36 or whatever and the second is the radix - a number identifying which base the number in the string is in. Valid values for the radix are anything between 2 and 36 but there is no point in using 10 as then the function doesn't have any conversion to do. There are a dozen or more better ways to convert a string to a number.

    var num=+title.substr(16,1).valueOf();
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • The Following 2 Users Say Thank You to felgall For This Useful Post:

    Arbitrator (08-30-2013), robertbaer (08-28-2013)

  • #6
    New Coder
    Join Date
    Aug 2013
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Angry "SOLVED" oopsie

    Yes, i read the description of that function and it implied that the second parameter was not needed if one was using base 10.
    In any case, i absolutely needed type integer and that was all i could find
    What you said prolly works fine.
    *
    BUT meanwhile, i foolishly used W3C and corrected my HTML, then to compound matters, i foolishly used JShint and corrected my JS.
    Well, i tossed out my "bad" code and replaced it with the "corrected" code.
    The whole page is royally messed and i have NO clue now as how to fix it.
    Is there anyone that i can pay to do that?
    I mean someone competent, and not expensive?

  • #7
    New Coder
    Join Date
    Aug 2013
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Smile SOLVED oopsie follow-up

    Cancel "alert"; problem from dern NoScript again.
    I get bit online if i do not enable it, and then get burnt when coding if i forget to disable it.

    The code works and does what i wanted.

    Thanks, everyone!

  • #8
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,366
    Thanks
    11
    Thanked 590 Times in 571 Posts
    Quote Originally Posted by felgall View Post

    var num=+title.substr(16,1).valueOf();
    what's the valueOf() do for you here? (seems the same result w/o it...)
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #9
    New Coder
    Join Date
    Aug 2013
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I absolutely needed type integer, period.

  • #10
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,366
    Thanks
    11
    Thanked 590 Times in 571 Posts
    Quote Originally Posted by robertbaer View Post
    I absolutely needed type integer, period.
    then you need to use something besides JS, which only has Numbers.

    use Math.floor("434.234") to turn a string or number into an integer value.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #11
    New Coder
    Join Date
    Aug 2013
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    No; i had extracted one character from a string, and needed to change the type to integer; i did not need Einstein (math floor).

  • #12
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by robertbaer View Post
    No; i had extracted one character from a string, and needed to change the type to integer; i did not need Einstein (math floor).
    If you want to keep it simple:

    Code:
    var num = Number(title.charAt(16));
    That will return an integer every time.

    Or you can use felgall's abbreviated syntax (though I personally prefer the former for readability reasons):

    Code:
    var num = +title.charAt(16);
    If you insist on using substrings, you might want to use the standardized version:

    Code:
    var num = Number(title.substring(16, 17));
    Though a less brittle way to get the number is to use regular expressions. Then you can change the file names and directory structure and your script will still work:

    Code:
    // Returns number immediately preceding ".png".
    var num = Number(title.match(/(\d+)\.png/)[1]);
    // ...
    // Reconstitute the previous title with the new number.
    return title.replace(/\d+(\.png)/, String(num) + "$1");
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    robertbaer (08-31-2013)

  • #13
    New Coder
    Join Date
    Aug 2013
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I like that first number() approach; it is KISS.

    The comment about a "less brittle" way is very apropos in that the returned URL (if that indeed is what is returned by the GET) on a mobile pone is apparently quite different than what i saw online and offline.
    I could see that selecting page+ started chain of actions, and an apparent loading of new visual page.
    Seems that the "fixed" stuff gets re-loaded, and then the part for the new image gets parsed by the browser and then i see "page error" and some kind of URL error.
    Hard as all hell to see as the font is in the region of 4 points.

    Naturally, i do not understand the "syntax" for squat with all those slashes scattered around..
    I do not mind blindly doing a copy,and i will do so and try that out online and offline; mobile trys are almost impossible as i have to beg for use.

    Thanks!

  • #14
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by robertbaer View Post
    Hard as all hell to see as the font is in the region of 4 points.
    If your website interface isn't readable on a mobile, you might want to consider styling it differently for mobile devices using CSS media queries.

    Quote Originally Posted by robertbaer View Post
    Naturally, i do not understand the "syntax" for squat with all those slashes scattered around..
    Code:
    // Returns the number immediately preceding ".png".
    var num = Number(title.match(/(\d+)\.png/)[1]);
    • The match method returns an array of regular expression matches where the full match is the first match ([0]).
    • The first and last slash indicate the start of a regular expression literal. (The non-literal form: RegExp((\d+)\.png/)[1]).)
    • \d matches a digit (0 through 9).
    • The plus sign indicates "one or more of", so one or more digits can be matches, but not zero digits.
    • The period/full stop (.) is the character used for "any character". Since a literal period/full stop character match is desired here, the character must be escaped with a backslash to disable its ordinary function.
    • The parentheses save the digits portion—since that's only portion wanted—as a "backreference". Backreferences are saved as additional items in the match method array. There's only one backreference, so that'd be the second item in the array ([1]).
    • Summary: match any string (URL) that contains one or more digits before ".png" and only return the digits part of the match.


    Code:
    return title.replace(/\d+(\.png)/, String(num) + "$1");
    This regular expression is almost the same. Instead, you're taking the URL (title), matching the digits plus ".png" portion of it that was matched before, and replacing that matched portion with a new string: the new number plus the file extension. To maintain the file extension for use in the replacement text, parentheses were used to create a backreference. A dollar sign followed by the number of the backreference is how you call a backreference in the replace method. (The numbers start at one here, not zero).

    After all that, the replace method returns the full URL with the old text replaced with the new text.

    Note that I probably overcomplicated the second regular expression. Since the first and second regular expressions fix the file type to PNG, there's no real need to use a backreference in the replace method. That simplifies things to:

    Code:
    return title.replace(/\d+\.png/, String(num) + ".png");
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    robertbaer (08-31-2013)

  • #15
    New Coder
    Join Date
    Aug 2013
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Please refer to the following (from "above"):

    Originally Posted by robertbaer
    Hard as all hell to see as the font is in the region of 4 points.

    If your website interface isn't readable on a mobile, you might want to consider styling it differently for mobile devices using CSS media queries.
    *
    Please read carefully what i said..the message i was complaining about (at 4 points) was an error message that came out of the Great Bucket of Bits, the "browser" and its interaction with the net; i have no control over error message fonts or presentation.
    Al i can possibly do is to change coding so that the getting of the next picture has the correct string / format, so that the (internally completed) result is correct - even for weird mobile phone URL access.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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