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 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Printing JavaScript inline to alter imgage directory inside src=""

    Hi there all,

    Is there a JavaScript equivalent to a PHP echo which can be placed inline inside a image src?

    I.e,

    <img src="../directory/<?PHP echo $variable; ?>/image.jpg">

    <img src="../directory/<script>variable</script>/image.jpg">


    Thanks

  • #2
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I found this elsewhere,

    <script>
    ...
    var theURL = "www.google.com";
    ...
    </script>

    <a href="javascript:document.location=theURL" >Other Page</a>


    Is there something like this for src=""


    Ok, bye

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,692
    Thanks
    25
    Thanked 657 Times in 656 Posts
    The whole reason for JavaScript is to facilitate user interaction. The user does something like entering an area or clicking an area and something happens, a image changes, your wisked away to another page.

    PHP just writes the the page(in easy terms). Example your last post. WHY? you could have just wrote the HTML to do this:
    <a href="jwww.google.com" >Other Page</a>
    No need for JS.

    You want to change an image. The question is when. Here is how to do that when a button is clicked.

    The HTML
    <img id="image" src="http://www.codingforums.com/images/1.jpg"><br />
    <button type="button" onclick="changeit();">Another Picture</button>


    The JS
    <script type="text/javascript">
    function changeit(){
    document.getElementById('image').src = 'images/2.jpg'
    }
    </script>

    Just noticed the INLINE in title to do the above inline use:
    <img id="image" src="images/1.jpg" onclick="this.src='images/2.jpg'">

    Or could use onmouseover instead of onclick
    Last edited by sunfighter; 07-05-2014 at 06:24 PM.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #4
    New Coder
    Join Date
    Feb 2010
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I think, it you wrap it up in a function, you will be able to do something like this, assuming you give the image an ID.

    Code:
    function doSource() {
    
    document.getElementById('IdOfImage').src="SOURCE FOR IMAGE";
    
    }
    The doSource() function will be called by a user action. Eg an onClick event on a button.

  • #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 JavaChump View Post
    I found this elsewhere,

    <script>
    ...
    var theURL = "www.google.com";
    ...
    </script>

    <a href="javascript:document.location=theURL" >Other Page</a>


    Is there something like this for src=""


    Ok, bye
    That isn't JavaScript - that's garbage that will break for a significant portion of your visitors.

    The correct way to do that would be:

    Code:
    <style>
    #other {border:0; background-color:inherit; color:#00f; text-decoration:underline; cursor:pointer;}
    </style>
    <button id="other">Other Page</button>
    <script>
    var theURL = "www.google.com";
    document.getElementById('other').onclick = function() {document.location=theURL;
    </script>
    Similarly for your image since you need the value to be able to display the image at all you'd add the image from JavaScript:

    Code:
    <span id="myimg"></span>
    <script>
    var imgvar = 'variable';
    var myimage = document.createElement('image');
    myimage.src="../directory/"+imgvar+"/image.jpg";
    document.getElementById('myimg')..appendChild(myimage);
    </script>
    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.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by felgall View Post
    var myimage = document.createElement('image');
    should be img not image
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #7
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok this is good,

    This is all a bid really to bring the size of the images down when the viewport is scaled. I've seen other messy methods to change content within a page and thought it would be so much easier just to have 2 folders on the server with different sized images in them for different devices.

    So I have this...


    <script>
    var wi = $(window).width(); // Stores the numerical value of the width into the variable "wi"
    if (wi <= 500){var mediaSize = "mobileMedia";} else {var mediaSize = "media";}
    </script>

    Now what I am after is changing the directory according to this initial code. So using my original example, I want to change the directory name of the img src="" inline for each page.

  • #8
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry,

    Adding to the last post I'm hoping there is a way to echo? print? mediaSize as a variable into the src="" like so...

    <img src="http://www.codingforums.com/directory/<?PHP echo $mediaSize; ?>/image.jpg">

    <img src="http://www.codingforums.com/directory/<script>mediaSize</script>/image.jpg">

    Thank you very much for all your insights!

  • #9
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    P.S

    I know you can swap full image paths with a conditional statement, I just wanted to know if you can change them inline using JavaScript. It would save soooo much coding/clunk.

    Thanks again

  • #10
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello all,

    This is the closest thing I can find to what I'm trying to achieve but I'm not quite sure how to implement it.

    $(function() {
    if($(window).width() <= 310) {
    $("img").each(function() {
    $(this).attr("src", $(this).attr("src").replace("images/620x410/", "images/310x205/"));
    });
    }
    });

    I tried this but with no joy


    $(function() {
    if($(window).width() <= 500) {
    $("img").each(function() {
    $(this).attr("src", $(this).attr("src").replace("media/", "mobileMedia/"));
    });
    }
    });`

    Any thoughts?

  • #11
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    From what I have been reading lately it seems that this may be the wrong approach. Apparently browsers load any images they can before any JavaScript or even css. That is, if there is a path to an image within a src="" originally on page load, it will be loaded first before our code is loaded to make the conditional changes.

    So, I'm wondering if there is a way to either print a src="imagepath/image.jpg" within an img tag or leave the src="" empty and add the path by id when the JavaScript in the head is run?

  • #12
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    320 views, Coding Forums... LOL

  • #13
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,692
    Thanks
    25
    Thanked 657 Times in 656 Posts
    Every time you post here the thread gets bumped to the top of the list and I look at it. So add 10 views for me.
    And you know what?
    I don't know what you want so no answer.

    Why not post your code and ask what your having a problem with in next post.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #14
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,918
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Quote Originally Posted by JavaChump View Post
    From what I have been reading lately it seems that this may be the wrong approach. Apparently browsers load any images they can before any JavaScript or even css. That is, if there is a path to an image within a src="" originally on page load, it will be loaded first before our code is loaded to make the conditional changes.

    So, I'm wondering if there is a way to either print a src="imagepath/image.jpg" within an img tag or leave the src="" empty and add the path by id when the JavaScript in the head is run?
    Really, if your only concern is to change the image size while resizing the viewport, this can all be done with CSS, and I think modern browsers are pretty good at interpolation when it comes to scaling down images, so that’s not a big deal. Have you ever heard of CSS media queries?


  •  

    Tags for this Thread

    Posting Permissions

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