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.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Noob question about DOM and images

    Hi guys n gals... hoping someone can help me with this.

    I have a main image in my page that changes based on what the user
    has selected in a dragdown box (<select><option>) type setup. That all works fine but I have another little image that says "INFO" and the onClick event for it is supposed to grab the document.getElementById("myimage").src and pass it to my identifypicture() function.

    This all works great and the alert box I want shows up just fine, except that it always takes the .src which is hardcoded into the HTML document that shows up by default when a user loads the page. If the picture gets changed via the dropdown box, the old .src of the default image is still picked up via the DOM. Is there a way to use the DOM to grab the .src of the image that is currently being displayed?

    Hopefully I've explained this well enough, and my thanks in advance for your help.

    Cheers,
    Todd

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Show us the codes and markups involved.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    canadiantodd80 (10-21-2008)

  • #3
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks, I'll drop it in when I get back to class tomorrow as I have the code stored there.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,190
    Thanks
    10
    Thanked 569 Times in 550 Posts
    if the code reads the .src from the dom, it should reflect the current file you see displayed.

    you might be accessing it upon bootup and memorizing it at that time, while it's still the default value.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #5
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Alright I'm back and here's the code I'm working on.. hopefully it helps. It seems pretty basic but I can't wrap my head around why it won't grab the current .src, only the hardcoded one...

    Select Scale: <select name="scale" id="scaleselect" onChange="chgMap(this.options[this.selectedIndex].value)">
    <option id="500000" value="images/500000.jpg" selected="selected">1 : 500,000</option>
    <option id="250000" value="images/250000.jpg">1 : 250,000</option>
    <option id="50000" value="images/50000.jpg">1 : 50,000</option>
    <option id="10000" value="images/10000.jpg">1 : 10,000</option>
    <option id="2000" value="images/2000.jpg">1 : 2,000</option>
    </select>

    So this creates my dropdown box that allows me to change images between the different scales based on which option is selected... so far so good.

    <img src="images/500000.jpg" width="720px" height="480px" name="mapimg" id="mapimg" />

    My image hardcoded to display 500000.jpg by default... this is the .src that is always passed to my next function coming up... even if the picture has been changed using the dropdown box above.

    <img border="0px" src="images/identify.gif" onClick="metaData(document.getElementById('mapimg').src)" id="ident" name="ident" />

    So this is a little pic that says "Get Info" and when clicked, passes the .src of the displayed 'mapimg' picture to my metaData() function... this is where I think my problem lies, but I have no idea why...

    And finally.. my function which takes the .src as an argument and uses a bunch of if/else ifs to see what .src it is and alert box accordingly.

    function metaData(whichMap) {
    if (whichMap = "images/500000.jpg") {
    alert("Insert data here...");
    }
    else if (whichMap = "images/250000.jpg") {
    alert("Insert data 2 here...");
    }
    else if (whichMap = "images/50000.jpg") {
    alert("Insert data 3 here...");
    }
    else if (whichMap = "images/10000.jpg") {
    alert("Insert data 4 here...");
    }
    else {
    alert("Insert data 5 here...");
    }
    }

    As you can see it's pretty simple stuff, it's only an intro to JScript course but for some reason this doesn't want to link the correct .src to my function as it always displays the result for the 1st IF statement. I'm stumped... anyone have any ideas?

    Cheers
    Todd

  • #6
    Regular Coder fishluvr's Avatar
    Join Date
    Nov 2005
    Posts
    110
    Thanks
    1
    Thanked 12 Times in 12 Posts
    = (assignment operator -- myVar = "1")
    == (is equivalent to -- myVar == 1 // true)
    === (equals strictly -- myVar === 1 // false)
    ><((((>`..`..`...><((((>`..`..`.. ><((((>`..`..`...><((((>

  • #7
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Boy, do I feel stupid.. should have saw that as I have similar code in the page that uses the "==" comparison.

    Thanks for pointing it out for me though... an extra set of eyes always helps!

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,968
    Thanks
    0
    Thanked 236 Times in 233 Posts
    That's why below is a good programming practice to avoid that equality operator typo.
    Code:
    if (1 == myVar){
      ...
    }
    If in case you had if (1 = myVar), it will throw a runtime error and immediately alerts the developer that there's something wrong in the code.

    BTW, if you access the src of an image, it will give you the absolute path, so the code should check for occurrence of the filename and not equality.

    Code:
    if (whichMap.indexOf("images/500000.jpg") != -1) {
       alert("Insert data here...");
    }


  •  

    Posting Permissions

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