PDA

View Full Version : [RESOLVED] GURU question - javascript load image in different area?

wuffy77
10-13-2007, 01:06 PM
Hi there,

I have several hundred html files with the below basic setup:

<ul>
<li><a href="image1.jpg">image one</a></li>
<li><a href="image2.jpg">image two</a></li>
<li><a href="image3.jpg">image three</a></li>
<li><a href="image4.jpg">image four</a></li>
</ul>

<div id="targetdiv">
<img src="image1.jpg" width=500px height=500px/>

</div>

Now I want it so that when I mouseover the items in the list, it will change the image in the target div to the href-ed image - HOWEVER it needs to be kept at 500x500 pixels in the targetdiv.

Can any genius solve this - I figure if you're a javascript guru, this might be something quite simple - and could save me hours!
coothead
10-13-2007, 01:31 PM
Hi there wuffy77,

here you go....
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#targetImg {
width:500px;
height:500px;
}
</style>

<script type="text/javascript">
window.onload=function() {
anc=document.getElementById('imglist').getElementsByTagName('a');
for(c=0;c<anc.length;c++) {
anc[c].onmouseover=function() {
swapImage(this.href);
}
}
}
function swapImage(pic) {
document.getElementById('targetImg').src=pic;
}
</script>

</head>
<body>

<ul id="imglist">
<li><a href="image1.jpg">image one</a></li>
<li><a href="image2.jpg">image two</a></li>
<li><a href="image3.jpg">image three</a></li>
<li><a href="image4.jpg">image four</a></li>
</ul>

<div>
<img id="targetImg" src="image1.jpg" alt=""/>
</div>

</body>
</html>
wuffy77
10-13-2007, 01:56 PM
hi coothead,

thanks for the reply - however I can't seem to get that to work?

I've created an html just copying/pasting your code and the only part I've changed is the image links to real images, but it doesn't appear to mouseover... ;(

was it working on yours or did you just write out the code Guru-style! ;)
coothead
10-13-2007, 02:18 PM
Hi there wuffy77,

ooooops, I am sorry about my 'faux pas'. :o :o :o

I did not use images to test the code.
Instead, I tested the script by swapping the alt text.
When submitting to this post I forgot to change alt to src.
My apologies for this clumsiness. :agree:
I have edited my previous post and it will now work OK. ;)
wuffy77
10-13-2007, 02:27 PM
Heh fantastic stuff Coothead - I bestow upon thee the title of 'Guru' thenceforth ye shall no longer be ~ bald headed old fart ~ !

Thanks very much - it works fantastically & you've no idea how much time you've just saved me!

One little question (whilst I've got the attention of your throbbing cranium!)

Several of the images are very large (2000x2000 pixels) and so it takes a while after mouseover to load - is there a way to utilise the same variables you created to preload the images? - below is the script suggested from the forum FAQs - so can you automatically fill the array of images to preload?

<script type="text/javascript">
//<![CDATA[
// Specify images to preload here:
var preload = new Array('image1.gif', 'image2.gif', 'image3.gif');

var loader = new Array();
for(var i = 0; i < preload.length; i++){
loader[i] = new Image();
loader[i].src = preload[i];
}
//]]>
</script>
coothead
10-13-2007, 02:58 PM
Hi there wuffy77,

adding the preloader is no problem. :agree:

The script will now look like this...
<script type="text/javascript">
var preload=new Array('image1.jpg','image2.jpg','image3.jpg','image4.jpg');
var loader=new Array();
for(i= 0;i< preload.length;i++){
loader[i]=new Image();
loader[i].src=preload[i];
}
window.onload=function() {
anc=document.getElementById('imglist').getElementsByTagName('a');
for(c=0;c<anc.length;c++) {
anc[c].onmouseover=function() {
swapImage(this.href);
}
}
}
function swapImage(pic) {
document.getElementById('targetImg').src=pic;
}
</script>
wuffy77
10-13-2007, 03:45 PM
hi Coothead - hmm that doesn't appear to do the preload?

if I manually enter each image into this line:
var preload=new Array('image1.jpg','image2.jpg','image3.jpg','image4.jpg');

It does the preload correctly, however what I need is for it to automatically build the array using the image location of each a link within the UL?
coothead
10-13-2007, 04:27 PM
Hi there Wuff77,
...however what I need is for it to automatically build the array using the image location of each a link within the UL
Not possible. :disagree:
You are attempting to 'put the cart before the horse'. :supereek:
The links do not exist until the images have loaded. ;)
wuffy77
10-13-2007, 05:19 PM
ah - that makes sense! (doh!)

Would it be possible to load the images once the page has loaded? ie after one second or something?
diades
10-13-2007, 07:06 PM
Hi Guys

If I may, just a quick suggestion; you can do away with the array (if that preload is all that you need it for) as your image names are all the same bar the added numeric. Thus:

var numImages = 5 //Just change this to cover the number of images
var loader=new Array();
for(i= 0;i< numImages;i++){
loader[i]=new Image();
loader[i].src='image' + i + '.jpg';
}

If you have several hundred images then that should save some time typing them plus some byte type real-estate.
If the names are different, however, just ignore me :)
wuffy77
10-14-2007, 03:11 AM
Hi diades,

nice thought - unfortunately they're not predictable like that - I've got around 1000 images that need linked up - hence if I have to update one place rather than two it'll save me a lot of time!! ;)

Had a thought though - what about the other way around?

Would it be possible to set the array as the place I update each time and use javascript to set the href links?
coothead
10-14-2007, 04:19 AM
Hi there wuffy77,
...I've got around 1000 images that need linked up...
...and...
...Several of the images are very large (2000x2000 pixels) and so it takes a while after mouseover to load...
Are you seriously planning to preload all of these images so that a mouseover effect on your links will work instantaneously?. :confused:
If Hell hasn't frozen over by the time that this preloading is completed, I could easily imagine that any visitor to your site,
confronted by the page's pristine whiteness, would have long since departed your site, if not this world. :supereek:

Now, without further ado, on to your question. :D
Would it be possible to set the array as the place I update each time and use javascript to set the href links?
Yes, this is possible, subject, of course, to the previously mentioned provisos. ;)
wuffy77
10-14-2007, 04:35 AM
heh! sorry - should have been clearer - I've got around 250 html files that need to be created and each will preload 4 or 5 of these images.

So I'll have to copy and paste the html file and then update the code to the correct images, hence I'm trying to reduce the amount of code I have to change each time to the absolute minimum (especially as these 1000 are just the start! Ultimately it'll be over 20,000!)
coothead
10-14-2007, 05:40 AM
Hi there wuffy77,

in that case, try this...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#targetImg {
width:500px;
height:500px;
}
</style>

<script type="text/javascript">

var preload=new Array('image1.jpg','image2.jpg','image3.jpg','image4.jpg');

var txt=new Array('image one','image two','image three','image four');

var loader=new Array();
var lst=new Array();
var ach= new Array();

for(c=0;c<preload.length;c++){
loader[c]=new Image();
loader[c].src=preload[c];

lst[c]=document.createElement('li');
ach[c]=document.createElement('a');
txt[c]=document.createTextNode(txt[c])

ach[c].setAttribute('href',preload[c]);
ach[c].appendChild(txt[c]);
lst[c].appendChild(ach[c]);
}

window.onload=function() {
for(c=1;c<lst.length;c++){
document.getElementById('imglist').appendChild(lst[c]);
}
anc=document.getElementById('imglist').getElementsByTagName('a');
for(c=0;c<anc.length;c++) {
anc[c].onmouseover=function() {
swapImage(this.href);
}
}
}
function swapImage(pic) {
document.getElementById('targetImg').src=pic;
}
</script>

</head>
<body>

<ul id="imglist">
<li><a href="image1.jpg">image one</a></li>
</ul>

<div>
<img id="targetImg" src="image1.jpg" alt="">
</div>

</body>
</html>
Note:- You must put the first link in to ensure page validation. ;)
wuffy77
10-14-2007, 05:44 AM
I am in awe.

Nothing more can be said!
coothead
10-14-2007, 06:08 AM
Hi there Wuffy77,

if that now suits your requirements, then I would suggest that you split the javascript into two like this...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#targetImg {
width:500px;
height:500px;
}
</style>

<script type="text/javascript">
var preload=new Array('image1.jpg','image2.jpg','image3.jpg','image4.jpg');
var txt=new Array('image one','image two','image three','image four');
</script>

<script type="text/javascript" src="basic.js"></script>

</head>
<body>

<ul id="imglist">
<li><a href="image1.jpg">image one</a></li>
</ul>

<div>
<img id="targetImg" src="image1.jpg" alt="">
</div>

</body>
</html>

The basic.js file can then be placed on every page and the editing parts are readily available. ;)
var loader=new Array();
var lst=new Array();
var ach= new Array();

for(c=0;c<preload.length;c++){
loader[c]=new Image();
loader[c].src=preload[c];

lst[c]=document.createElement('li');
ach[c]=document.createElement('a');
txt[c]=document.createTextNode(txt[c])

ach[c].setAttribute('href',preload[c]);
ach[c].appendChild(txt[c]);
lst[c].appendChild(ach[c]);
}

window.onload=function() {
for(c=1;c<lst.length;c++){
document.getElementById('imglist').appendChild(lst[c]);
}
anc=document.getElementById('imglist').getElementsByTagName('a');
for(c=0;c<anc.length;c++) {
anc[c].onmouseover=function() {
swapImage(this.href);
}
}
}
function swapImage(pic) {
document.getElementById('targetImg').src=pic;
}
wuffy77
10-14-2007, 08:44 AM
you have a paypal account for some beer money? ;)
coothead
10-14-2007, 09:07 AM
Hi there wuffy77,
you have a paypal account for some beer money?
;)
That is a very kind thought. :agree:
But I am just an amateur. ;)
wuffy77
10-14-2007, 09:39 AM
Don't worry Coothead - the trick is to keep drinking the beer and you'll soon be a pro! ;)

On a more serious note do you do freelancing at all? I've got a few things that may be done in the near future and I think your 'amateur' skills could save us a lot of time!!
coothead
10-14-2007, 10:03 AM
Hi there wuffy77,
...do you do freelancing at all?
I just do this for mental stimulation. ;)
You're always welcome to post your problems here and I am sure that I or some other member will take a crack at it.
Of course, some may take more interest with the dangling of a financial carrot. ;)
wuffy77
10-15-2007, 01:18 PM
I'm back!

Just a quick question - I notice when the mouseover images are created they don't have the click link (ie where you normally click and it loads the image fullsized).

How can I put this back?
coothead
10-15-2007, 05:20 PM
Hi there wuffy77,

How can I put this back?

These alterations might work. ;)

Add the this highlighted line to the javascript...

function swapImage(pic) {
document.getElementById('targetImg').src=pic;
document.getElementById('targetImg').parentNode.href=pic;
}

...and the highlighted snippets to the html...

<div>
<a href="image1.jpg"><img id="targetImg" src="image1.jpg" alt=""></a>
</div>

...and the highlighted rule to the css..

<style type="text/css">
#targetImg {
width:500px;
height:500px;
border:0 solid;
}
</style>


...and the highlighted....

No that's it. :D
wuffy77
10-16-2007, 02:21 PM
hmm - the forum wouldn't let me write my message as it said it was too short, funny I thought it summed everything up quite nicely, anyway here it is...

Genius.
coothead
10-16-2007, 06:22 PM
Hi there wuffy77,
hmm - the forum wouldn't let me write my message as it said it was too short, funny I thought it summed everything up quite nicely, anyway here it is...

Genius.
spare my :o :o :o :o :o 's