PDA

View Full Version : images linkable from external file?

bazz
04-12-2003, 11:36 AM
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?
HairyTeeth
04-12-2003, 12:54 PM
See if this is what you want.

File 1: Page that displays images.

<html>
<head>
<script type="text/javascript" language="javascript" src="img.js"></script>
<title>Image Display Page</title>
</head>
<body>
<script type="text/javascript" language="javascript">
<!--;
parseImages();
// -->
</script>
</body>
</html>


FILE 2: The external js file. Save it as img.js

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:

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.
bazz
04-12-2003, 03:34 PM
very good thanks but....

Aha, I have worked it out. :cool:
bazz
04-12-2003, 04:11 PM
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. :thumbsup:

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.