...

View Full Version : changing some properties on load



Carnio
11-04-2004, 07:55 AM
I have the following function that is called onLoad (in body tag)

function linkSet() {

var thisImg, thisLink;
thisImg = document.getElementsByTagName('img');
thisLink = document.getElementsByTagName('a');

for (i = 0; i < thisLink.length; i++) {
thisImg[i].src = thisLink[i].href + '_thumb.jpg';
thisLink[i].target = '_blank';
}
}

basically all that's on the page (since it is an included file), is a bunch of thumbnails that are links to their full sized pics. To make things easier I wanted to have javascript do some tedious work for me. The images' sources are all set to a spacer image, I want the image source to be changed to the href of the link concatenated with '_thumb.jpg'

(i changed the names of the thumbs to blah.jpg_thumb.jpg ... so if there is a way to take off the first .jpg when setting the src, that would be helpful too; that way i dont have to have it look messy, though I am using a batch file to make thumbnails and wouldnt be hard to include it.)

I also want the links to open a new window when clicked, and dont want to set each one individually in dreamweaver or otherwise.

Any help is appreciated.

~Stagmo

ca_redwards
11-04-2004, 08:33 AM
I have the following function that is called onLoad (in body tag)

function linkSet() {

var thisImg, thisLink;
thisImg = document.getElementsByTagName('img');
thisLink = document.getElementsByTagName('a');

for (i = 0; i < thisLink.length; i++) {
thisImg[i].src = thisLink[i].href + '_thumb.jpg';
thisLink[i].target = '_blank';
}
}

basically all that's on the page (since it is an included file), is a bunch of thumbnails that are links to their full sized pics. To make things easier I wanted to have javascript do some tedious work for me. The images' sources are all set to a spacer image, I want the image source to be changed to the href of the link concatenated with '_thumb.jpg'

(i changed the names of the thumbs to blah.jpg_thumb.jpg ... so if there is a way to take off the first .jpg when setting the src, that would be helpful too; that way i dont have to have it look messy, though I am using a batch file to make thumbnails and wouldnt be hard to include it.)

I also want the links to open a new window when clicked, and dont want to set each one individually in dreamweaver or otherwise.

Any help is appreciated.

~Stagmo

This is easily done, when there are no extraneous links, nor images...


<html>
<head>
<script type="text/javascript" language="javascript">
function thumb(){
with(document){
if(links.length==images.length){
for(var i=0;i<links.length;i++){
links[i].target='_blank';
images[i].src=links[i].href.replace(/\.jpg/i,'_thumb.jpg');
}
}
}
}
</script>
</head>
<body onload="thumb()">
<a href="images/foo.jpg"><img src="images/1.gif"></a><br>
<a href="images/bar.jpg"><img src="images/1.gif"></a>
</body>
</html>


My thumb() function walks through all of the link/image pairs, targeting a new "_blank" window, and reassigning the image's src to the corresponding link's href (but only after replacing its ".jpg" with "_thumb.jpg").

Does this help?

Carnio
11-04-2004, 08:46 AM
actually for some reason it's still not doing anything...

are you sure there is an i after /\.jpg/ ?
also is there anything else, i have the correct body tag and everything is placed in the right spot (in the head tag with the script tag and everything)?

I also wanted to know... can I put the thumbs in a subfolder and still make it work, should i just use a variable and use the replace thing twice? or is there another way to do it?

Kor
11-04-2004, 08:53 AM
Try this:


<script language="JavaScript" type="text/JavaScript">
function linkSet() {
var thisImg=document.getElementsByTagName('img');
var thisLink=document.getElementsByTagName('a');
var thisName=new Array()
for (var i=0; i<thisLink.length; i++) {
thisName[i]=thisLink[i].getAttribute('href').split('.');
thisName[i]=thisName[i][thisName[i].length-2].split('/');
thisName[i]=thisName[i][thisName[i].length-1];
thisImg[i].setAttribute('src',thisName+'_thumb.jpg');
thisLink[i].setAttribute('target','_blank');
}
}
onload=linkSet
</script>

Carnio
11-04-2004, 09:09 AM
hold up, it worked when i changed the if ( images.length == links.length) to if(true).. well it somewhat works, it actually screws up a bunch of images now, but the target works, and some images appear, while it changes others on the page...

... so basically i have more images than links or visa versa

Since the page that I'm doing this on is included using PHP, it probably counts the other images on the encompassing page, anyway around this?

Carnio
11-04-2004, 09:51 AM
OK so i fiddled with the thumb suggestion a bit to fit my needs, I came up with this:


function thumb(){
var j = 0;
with(document){
for(var i=4;i<links.length;i++){ //4 because there are 4 links before the first thumbnail.
while (images[j].src != 'http://www.foobar.com/images/spacer.gif' && j <= images.length) {j++;}

images[j].src = links[i].href.replace(/\.jpg/,'_thumb.jpg');

links[i].target = '_blank';
}

}
}


this works, but I'd like to see if i can do it with a relative address for the spacer.gif. Also if there is a way to put the thumbs in a subfolder and still reference them in the code that would be helpful.

*Edit* if there is a way to check for how many links come before that first image that is "spacer.gif", or get around having to hardcode the number of links before hand, that would be helpful too



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum