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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    img src = [string]?

    i'm quite new to javascript and was wondering if anyone could help me out with this...

    for the sake of convenience i would like to be able to use a variable as my image source:
    var "example" = "picture.jpg";
    then later on, <img src=[the string 'example']>. i don't know if this can be done somehow. any suggestion is greatly appreciated!

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Code:
    <script type="text/javascript">
    //preload image
    var example = new Image();
    example.src = "picture.jpg";
    
    window.onload = function(){
    document.images['ex'].src = example.src;
    }
    </script>
    ...
    <img name="ex" src="default.jpg" />
    But which one do you prefer, your own convenience or accessibility of your pages to users? I asked this because if javascript is disabled, the image will not be changed.

  • #3
    New Coder
    Join Date
    May 2004
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ducksarepeople2
    i'm quite new to javascript and was wondering if anyone could help me out with this...

    for the sake of convenience i would like to be able to use a variable as my image source:
    var "example" = "picture.jpg";
    then later on, <img src=[the string 'example']>. i don't know if this can be done somehow. any suggestion is greatly appreciated!
    I don't understand how using a javascript variable for an image source is more "convenient" than simply inserting a regular image tag. Is this for a web page to be displayed online/intranet or strictly for one user's computer?

    I wrote a custom Insert Image Dialog for the WYSIWYG editor I'm developing, but I don't think that is what you are looking for.

  • #4
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Only if you want to change the property value of your image object.

    Technically, javaScript is more of a hassle than anything else, unless you get into complicated pieces of code, and unless you fully understand the language backwards, and forwards. You have this, in your previous post:

    for the sake of convenience i would like to be able to use a variable as my image source:
    var "example" = "picture.jpg";
    then later on, <img src=[the string 'example']>. i don't know if this can be done somehow. any suggestion is greatly appreciated!
    Your example does not work because you arent really connecting your HTML to JavaScript. To connect, often times, the 2 languages, you will have to use what is called an event-handler. Without this, there's no way of your html to make a hook-up, as it were. For this reason, whenever you want to give your visitor the option for example of changing the bgcolor property of your document, you will more often than not need to create a function, and then connect the function to an event-handler. To be specific, take the following:

    Code:
    function changePropValue( obj  )
    {
      if (obj )
        {
         the_chosen   = obj.selectedIndex;
         document.bgcolor = obj.options[the_chosen].value;
        }
    }
    The above would be more, or less the structure of your function. Bear in mind that the above is absolutely useless unless you call/activate the function by attaching it to an event-handler. To do that, this is more or less what you would do:

    Code:
    <input type="button" value="change" onClick = "changePropValues(document.b1.b2);" >
    Do you see the part in green above? Thats an event-handler, and it will trigger the function by the name of changePropValues(). Notice also, how within the brackets of the function, there's a string. This string is basically the information the function will need in order for it to run properly. Whenever you feed a function content, you are basically storing the content inside the functions parameter area. Without this, the parameters of a function will remain empty. Bear in mind that not all functions need a parameter, but many do, and of those that have one, you will need to supply it details in order for it to work, otherwise, it will not. At any rate, when you called the function with your event handler, and you fed it the additonal info, all you have done was tell the function what form element it should be chosing from.

    But in relation to your main question about how to connect JavaScript to HTML, you dont generally do so, unless you use what is called the dot syntax, and that generally starts with the word document. Even when you use the object known as document as the means by which you connect to your file, the bottom line remains that you will have to use the object between the script tags. But you never connect things directly via the tags, or the properties of the tags themselves.

    This is why your example would not work.

    You cant give a property of any given tag for a value the actual name of a variable. It would be nice, but it doesnt work like that. Instead, you create within the script tags, all the code that you need, and once, thats done, you create within your actual html tags, the event-handler the connection you need for the activation of a function. The reason for this, is that you are working with 2 totally different languages technically speaking.

    Remember, that all your codes will always be between the two script tags. If you dont do that, then you will never go from one language, to another. This is why the script tags exist. For example:

    Code:
    <script language="javascript">
    
    function changePropValues( paramOne)
    {
    if (param_One )
        {
         the_chosen   = param_One.selectedIndex;
         document.bgcolor = param_One.options[the_chosen].value;
        }
    
    }
    </script>
    The above is the way you tell the browser that it needs to go over, and beyond HTML.

    At any rate, lets look at what Glen has said above:

    Code:
    <script type="text/javascript">
    //preload image
    var example = new Image();
    example.src = "picture.jpg";
    
    window.onload = function(){
    
    document.images['ex'].src = example.src;
    
    }
    </script>
    ...
    <img name="ex" src="default.jpg" />
    Do you see how the word document is used, and how it is then followd by the array known as images[]? This is called the dot syntax, and this is generally how JavaScript connects to your document, hence the name document. But regardless of the dot syntax, the main point remains, that it must be contained within the script tags. JavaScript is a programming language, and as such, it is seperate from HTML. For this reason then, whenever you are interested in creating pieces of code that does something, you will need to write the code with-in the script tags, and not within the actual html tags themselves. This may seem odd considering the fact that technically speaking you are inserting an event-handler within the actual HTML tag themselves, this is nontheless an examption, and it is done for a good reason, i would imagine.

    At any rate, you need to use the script tags to seperate your HTML from JavaScript, and you use event-handlers to activate specific areas of your code, like a function. HTML is the actual object that you want to manipulate, but you dont manipulate it directly. You manipulate through JavaScript, and not otherwise. To do this, you use what are called objects, and variables are objects. An object is not a value. Hence, what you wanted to do would not work.

    I hope i have helped answer your question.
    Last edited by SpiritualStorms; 06-26-2004 at 07:26 AM.
    LovesWar

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    Perhaps something like this will work in your situation:

    <script>
    var pic="ip.gif";
    </script>

    <img src="" onerror="this.src=pic">

  • #6
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lol

    Well, looks like i was wrong. LOL. I really think i will go blow my brain out.
    LovesWar


  •  

    Posting Permissions

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