www.webdeveloper.com
Page 1 of 3 123 LastLast
Results 1 to 15 of 39

Thread: img src as a variable?

  1. #1
    Join Date
    Jan 2006
    Posts
    41

    img src as a variable?

    in my javascript i set a variable called vara="whatever.gif"

    I want to be able to use this variable in a href command such as:-
    <img src="vara">

    BUT OF COURSE this syntax is wrong.. How would I define the img src line to use the variable?

    D

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    One solution is to give your image an id:

    document.getElementById('image_id').src=vara;
    or
    document.getElementById('image_id').setAttribute('src',vara);

  3. #3
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    But if you need to change it from a href


    <a href="#" onclick="this.nextSibilig.src=vara;return false"><img src="something.jpg"></a>

    make sure that your variable vara is a global and make sure that there is no empty space (gap) between the two tags (<a><img></a>)

  4. #4
    Join Date
    Jan 2006
    Posts
    41
    hi kor,
    theres a difficulty with this...

    in the header of html i define the javascript variable and the img src needs to use this... the javascript juggles some if conditions so the <img src needs to somehow call the active variable value.. if it was kor.gif the the <img src line would use this ... if the javascript for some reason defines the variable differently then the <img src would reflect this..

  5. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    let's clarify: To change an attribute you need a method (I have gave it to you). To apply a method you need a function or a statement triggered by an event. Now i have only gave you example of how an event onclick will apply a method. Now... Tell me more about your problem. Which suppose to be that event which will trigger the function? Which will be the element which will nest the event. Is your variable a global one? Give us more details, even a little bit of your code, if any

  6. #6
    Join Date
    Jan 2006
    Posts
    41
    also when the html runs another program would have already defined the variables in the script (it created the file).

    so in the javascript definitions it would set vara="image1.gif" ...

    some functions also use this variable at times BUT:-

    Like mentioned it would be nice just to have the variable referenced in the
    <img src=vara><br>

    etc..

    but vara in line above has to have some syntax?

  7. #7
    Join Date
    Jan 2006
    Posts
    41
    In this simple cut down example i would want to have the variable referenced where i have ????? and in this case it ends up using 10.jpg

    any ideas?

    <html>
    <head>
    <title></title>
    <script language="JavaScript">
    var vara = "10.jpg"
    </script>
    </head>
    <body>
    <img src="?????"></a>
    </body>
    </html>

  8. #8
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Which will be the event? You need an event and an element which will nest the event. The action... Which will be the action? when user loads the page, when clicks something, when rollover something... The event?

  9. #9
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    element-event-function-reference/statements/methods-result

  10. #10
    Join Date
    Jan 2006
    Posts
    41
    i just showed you a portion of the html.... all i am asking was if there were nothing else in the html what would we put in the ????? .... to make this little
    html work.. dont worry about other functions etc..

  11. #11
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    It looks like you miss the essence of javascript. You need an event. And you need to reference somehow the element whom attributes you want to change. You can not just "put" a variable somewhere. I guess you need the onload event (which is a window's event) Now the code could be something like this:
    PHP Code:
    <script type="text/javascript">
    onload = function(){
    var 
    vara='10.jpg';
    document.getElementById('mypic').setAttribute('src',vara)
    }
    </script>
    ...
    <img id="mypic" src="neutral.jpg"> 
    That will change onload the url of your picture. You need to have a "neutral" picture, something, in case user has javascript disabled...

    What is your final aim, after all? Looks like more a server-side job than a client-side job
    Last edited by Kor; 01-17-2006 at 05:13 AM.

  12. #12
    Join Date
    Jan 2006
    Posts
    41
    hi
    i have not gone crazy...

    lets try this one then:-

    <script language="JavaScript">
    var vara = "10.jpg"


    function funcelf() {
    document.celi.src='????';

    what would i put for ???? so that it references the value of vara?

    i havent added other bit of html or function in here to keep question simple.

    thanks

  13. #13
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    what would i put for ???? so that it references the value of vara?
    Nothin will happend. Let me repeat again. It looks like you don't get how javascript works. To change/create attributes/elements/values you need a method. To make that method work, you need a function. To call that function you need an event. Now, simply inserting that variable as attribute's value woun't work because both method and event are missing. This is javascript, it is not me who invented it...

  14. #14
    Join Date
    Jan 2006
    Posts
    41
    im seeking a method to wrap around this so it performs how i need.. please be patient with me as not crazy but trying to simulate something as echoed in example i gave.. i didnt include all html etc... send me a private if you can?

  15. #15
    Join Date
    Jan 2006
    Posts
    41
    Kor,
    Dont worry too much that the stuff has no real explanation of use right now..

    Heres an example of what I was trying to ask... its just a simple bit of html just to explain to you what I am after..

    <html>
    <head>
    <title></title>
    <script language="JavaScript">
    //variables
    var vara = "1.JPG"
    var varb = "2.JPG"
    var varc = "3.JPG"

    function funcdo() {
    if(vara == "1.JPG"){
    document.mycell.src='***value of varb**'
    var vara = "***value of varc**'
    }
    <a href="#" onClick="javascript:funcdo();"><img src="**value of varc**" name="mycell" border="0"></a>
    </body>
    </html>

    So what I am after is the syntax to put in to the spaces where I have ** becuase I dont know the syntax here to use!!. Want to replace example ***value of varx*** with some javascript correct syntax.

    I want the html also to load so that this visually populates the browser when html launched (as shown above):-

    <img src="**value of varc**" name="mycell" border="0">

    I also know that I am using the names of jpg files in the variables; its just that i want to have it like that so using 1.JPG as opposed to 1 etc... So that it just maps a variable same as a file name for now.. and no real reason why it really has to be a JPG suffix but I prefer..

    I of course would use 3 jpg image files as well..

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles