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 4 of 4
  1. #1
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

    images linkable from external file?

    Hi.

    I have the need for a script which enables an image to be placed on many pages from one image file. Can I do this using JavaScript similarly to how an external .css file works?

    If so, could anyone help me with the script I must follow. I would like it to work such that:

    1. if the image is removed in the future, that the portion on the HTML on which it had been visible is now totally blank. No placeholders, No broken link icon.
    2. if I put two images in the .js file, they appear beside each other on the HTML page with abut 1px between them.
    2. The only info on the HTML page (except the class info), is the link-to-external .js file.
    3. the script for every page on which it is used, is the same.

    Holefully this isn't too demanding of your time. much appreciated either way.

    thanks.

    I've just re-read it and that sounds like I want you to do alot. really if I could get a few pointers on how to write the .js file, I could probably work out the positioning using .css?

  • #2
    Regular Coder
    Join Date
    Mar 2003
    Posts
    176
    Thanks
    0
    Thanked 0 Times in 0 Posts
    See if this is what you want.

    File 1: Page that displays images.
    Code:
    <html>
    <head>
    <script type="text/jav&#97;script" language="jav&#97;script" src="img.js"></script>
    <title>Image Display Page</title>
    </head>
    <body>
    <script type="text/jav&#97;script" language="jav&#97;script">
    <!--;
    parseImages();
    // -->
    </script>
    </body>
    </html>
    FILE 2: The external js file. Save it as img.js
    Code:
    function cons(imgName,imgWidth,imgHeight,imgAlt){
    this.imgName = imgName;
    this.imgWidth = imgWidth;
    this.imgHeight = imgHeight;
    this.imgAlt = imgAlt;
    }
    
    var imgArray = new Array();
    imgArray[0] = new cons('IMAGE_1.gif','50','38','First Image');
    //imgArray[1] = new cons('IMAGE_2.gif','50','38','Second Image');
    
    function parseImages(){
    var imgStr='';
    var imgPath="images/"
    	
        if(imgArray.length==0){
        	return false;
        }else{          
        	imgStr+="<table border='1' align='center'>";
        	imgStr+="<tr>";
        
    		for(i=0;i<imgArray.length;i++){
        		imgStr+="<td>";
        		imgStr+="<img src='"+ imgPath + imgArray[i].imgName + "' ";
              	imgStr+="width='" + imgArray[i].imgWidth + "' ";
              	imgStr+="height='" + imgArray[i].imgHeight + "' ";
              	imgStr+="alt='" +imgArray[i].imgAlt + "' />";
              	imgStr+="</td>";
        	}
        
        	imgStr+="</tr>";
        	imgStr+="</table>";
        	document.write(imgStr);
    	}
        return true;    	
    }
    Explanation:
    FILE 1 accesses an external js file (called img.js) which is located in the same folder as FILE 1.

    You need to replace the array values (bold text) in the js file with your own values (in this order):
    1. image name (and file extension i.e: jpg, gif)
    2. width
    3. height
    4 alt

    Images for this script are accessed in a sub-folder called (oddly enough) 'images'. You can alter the imgPath value (bold text) to the directory where you store your images.


    I have commented out (//) imgArray[1] to show you the document with only one image displaying. Remove the comments (//) from before imgArray[1] to display it on the web page.

    To prevent all images displaying, simply comment out all the array indices like so:
    Code:
    var imgArray = new Array();
    //imgArray[0] = new cons('IMAGE_1.gif','50','38','First Image');
    //imgArray[1] = new cons('IMAGE_2.gif','50','38','Second Image');
    Lastly, i haven't tested this in any depth, but it works fine on IE5.0 and Moz1.0. It also needs a preload script which I'll get to you in due course.

    Cheers.
    Last edited by HairyTeeth; 04-12-2003 at 01:45 PM.

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    very good thanks but....

    Aha, I have worked it out.
    Last edited by bazz; 04-12-2003 at 03:53 PM.

  • #4
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Oh well, I thought I had but whilst the first image will display, the second doesn't. I have checked the file path but can't see anything wrong with it.

    Any ideas??

    sorted! Took me to re-read your excellent post.

    Many thanks.

    Just one thing I have noticed, I understood you to say that I should amend the file path to where I store my images.

    Well I left it just as images/ (where my images are ../../../images/name of folder/image_1.gif

    They still load into the window.
    Last edited by bazz; 04-12-2003 at 04:15 PM.


  •  

    Posting Permissions

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