JavaScript Forum

**keris** · 03-13-2007, 08:45 PM

Hi, Firstly let me apologise, I am new to this, and you are my first forum that I have joined. I hope that you can help me.
I am creating a website, and I am stuck on a java script problem.
I have created a table which has

I want to have thumbnails in the smaller boxes,
but once you click on them,
I want the middle image to be a bigger version of that thumbnail.
I have used the java script but when I view it in internet explorer it only shows white boxes with x's appear.
I have tried changing the location of the images, but still it does not work.
If you have any ideas, would love to hear from.
Many Thanks
Keris

**Learning Newbie** · 03-13-2007, 09:27 PM

First, try FireFox, and get the web developer add in. And try your site in FF. It could be a java error, or it could be a Microsoft error. This will at least tell you which.

What happens if you right-click the X where the image should be, and pull up the "properties" from the context menu?

**vangogh** · 03-13-2007, 10:43 PM

Kerry I would need to see some code or better the page in question. If you're seeing the red 'x' though it means that Internet Explorer isn't finding the images.

Assuming the images are on the server then whatever JavaScript code you're using is creating a path to the image that doesn't match the actual image location.

I hope that made sense. If you can post some code or a link to the page I'm sure myself or whoever gets here first will be able to let you know what's wrong.

**keris** · 03-14-2007, 12:49 PM

Hi, Thank you for your quick response.
I have managed to get a picture in the smaller boxes, but not the main box.
I have loaded the images and webpage.
www.keris-lhasa.com/kerisworld/indexs.html
Please take a look and advise me of your findings.
It is probably something so stupid, that I have over looked.
Many Thanks
Kerry

**vangogh** · 03-14-2007, 05:33 PM

Kerry I see a few things wrong. First your html is a bit of a mess. I see two sets of <html></html> tags for example. You can only have one set. A typical html page should have the format:

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

You've repeated a few of those and you should only be using one set of each.

I also notices some links pointing to file:///c...

That's a reference to your computer. No one else will have those files in the same location. You'll need to change those paths to match where the files are on the server.

Neither of the above though is directly related to the problem with the images not showing up.

With the images I just don't see where you've specified the path to the image. Here are two lines of code I see on your page:

Code:

<td><div align="center"><a href="javascript:changeImage('images/lhasa/yannick/pic1.jpg')"><img src="images/lhasa/yannick/yanpic1.jpg" width="110" height="82" border="0"></a></div></td>
<td><div align="center"><a href="javascript:changeImage('image/lhasa/')"><img src="image/lhasa/" width="110" height="82" border="0"></a></div></td>

if you look at the two lines of code in the first one you've specifically listed the path to an image. In the second one you only mention the folder where the image is probably located. But you need to specify the image itself.

With the JavaScript you have you're calling a function called changeImage, but I don't see that function on the page or included through another file. Maybe I missed it, but I couldn't find it.

You'll need that function in order for the javascript to work.

**keris** · 03-15-2007, 01:20 AM

Hi,
Referring to the image section, the first line of the image coding, I used the coding
<td><div align="center"><a href="javascript:changeImage('images/lhasa/yannick/pic1.jpg')"><img src="images/lhasa/yannick/yanpic1.jpg" width="110" height="82" border="0"></a></div></td>
here I quoted two pictures, firstly, pic1, secondly yanpic1.
The images do not change, so therefore I did not put any further image coding in, left them ready for when I sort of the problem.
Javascript function, if I do not have the function that you mentioned, where do I get it from. As everyone I have looked for the function relates to mouse over images, which is not what I want, I need for the thumb nail to be clicked on, in order for that image to be shown bigger.
Regarding the C:///files, that is my son, who has been trying to help.
I will change those in order to make them correct.
I think I have tried to remove the second set of html tags and this just messed up the page if removed. I will have another go.
Look forward to your reply
Many Thanks
Kerry

**vangogh** · 03-15-2007, 01:54 AM

Kerry you wouldn't really get the function you'd have to write it. It's a little late for me now, but I'll try to write something simple for you tomorrow.

I just want to check what you want to make sure I'm understanding. When someone clicks one of the thumbnail images you want a larger version of the image to appear in the center? But only when they click and not when they rollover the thumbnail.

So in the line of code above when someone clicks on yanpic1.jpg you want pic1.jpg to appear in the center?

**keris** · 03-15-2007, 07:20 AM

Hi,
Thank you for quick response.
Yes, thats right someone clicks on one of the thumbnail images I would like a larger version of that image to appear in the center? Yes thats correct, only when they click and not when they rollover the thumbnail.
Many Thanks
Kerry

So in the line of code above when someone clicks on yanpic1.jpg you want pic1.jpg to appear in the center.

**ExpressoDan** · 03-15-2007, 11:50 AM

I've got a super easy javascript function I like to use. I've given you the entire script with some sample images in the attachment.

This part is the function. It goes in between the <head> </head> tags

Code:

<script type="text/javascript">
 function replaceImg(path) {
 	var imgDest = document.getElementById('image');
	var imgSrc = path;
	imgDest.setAttribute("src", imgSrc);
	}
</script>

If you want to include a path to your images, say there in a folder called images then change this line imgDest.setAttribute("src", imgSrc); to this imgDest.setAttribute("src", "images/"+ imgSrc);

This is your body:

Code:

<img id="image" src="img002_image.jpg" alt="This is an alt tag. It needs to be on all your images" />
<a href="javascript:replaceImg('img002_image.jpg')"><img src="img002_thumb.jpg" alt="Image" /></a><a href="javascript:replaceImg('img003_image.jpg')"><img src="img003_thumb.jpg" alt="Image" /></a>

Include the name of the image in the function as I have done above when I call the function replaceImg('img002_image.jpg').

I hope this isnt too confusing... let us know if it helps

**vangogh** · 03-15-2007, 05:00 PM

Thanks Dan. You saved me some time.

Kerry Dan's script should work for you and the one would have written would have been very similar. Please let us know if you have any problems with it. We'll be happy to help.

**ExpressoDan** · 03-16-2007, 10:09 AM

No problem... As soon as I read, "a little late for me now" I knew the feeling and I had a script handy so, I thought I'd try to save you some time.

**vangogh** · 03-17-2007, 02:14 AM

Kerry, don't forget to let us know if the script is working or if you need any help with it.

**kids** · 03-17-2007, 08:03 AM

ExpressoDan! I think your code is "swapimage", isn't it?

Code like this we can see in many site, where they use to make Menubar, Navigator...

???

**keris** · 03-17-2007, 08:00 PM

Hi,
I have given myself a bit of time off.
I have smashed cups, and huge arguements, as I cant get to grips with the old coding.
Been told to give up on it.
But I wont let this bet me.
I am now having a go at the coding that you gave me.
Starting from scratch with a blank page.
I would appreciate it, if once I have done this, if you could have a look at the page, and tell me if the coding needs tidying up.
Better still I think It would be better for me to get someone to design a blank that I can just use.
What do you think.
Many Thanks
Kerry

**keris** · 03-17-2007, 08:04 PM

Is there anyway of getting help without making myself look so stupid by not showing all of my posts on this forum.
I am used to using dreamweaver and creating pages in design mode.
It is totally different in code mode.
It makes me feel useless and incapable, and yet I have already designed my own website which is up and running.
I have decided to change my website, due to comments that have been made to me about the way it looks and the impression that it gives to people.
Hence designing new site.
Just trying to explain myself, even though, everyone can read this.
Kerry

**ExpressoDan** · 03-19-2007, 10:25 AM

@ kids ,
I'm not sure I understand what your asking. I think the code I posted above is probably very versatile... I'm sure many people can use it in a variety of different ways.

@ keris,
In the attachment I posted above, I included a blank html page with some sample images so that you can dissect it in it's simplest form. Take a look at it and see if you can figure out what's going on. No worries though, we all start some where. This business is always changing so most of the time I am in learning mode. Don't give up!!!!!

**vangogh** · 03-19-2007, 07:11 PM

Kerry don't worry about asking questions. We all started in the same place and like Dan said things change fast and we're all still learning.

I think the best way to help is to ask questions right on the forum. That way the first person who has an answer for you can reply and you can get a quicker answer and also a variety of answers which can sometimes be valuable There's usually more than one solution to every problem.

**Learning Newbie** · 03-19-2007, 08:49 PM

Quote:

Originally Posted by keris

Is there anyway of getting help without making myself look so stupid by not showing all of my posts on this forum.
I am used to using dreamweaver and creating pages in design mode.
It is totally different in code mode.
It makes me feel useless and incapable, and yet I have already designed my own website which is up and running.
I have decided to change my website, due to comments that have been made to me about the way it looks and the impression that it gives to people.
Hence designing new site.
Just trying to explain myself, even though, everyone can read this.
Kerry

Oh come on. I've worked with people who designed web sites in Word. Now they look stupid. You look like somebody who's tackling a difficult new skill.

Don't loose sight of that.

**keris** · 03-23-2007, 10:59 PM

Hi,
Not been on for a couple of days, as been working my socks off on my page.
Good News is that I have done it, and now just finishing off the boring stuff, writing. This is my new design for mysite, this being the first page nearly complete.
http://www.keris-lhasa.com/kerisworld/jessica.html
Im over the moon with it, please let me have your comments, as they would be greatly appreciatd.
Please bear in mind that the links are not connected yet!!
THANK YOU for all your encouragement.
Kerry

**vangogh** · 03-24-2007, 01:08 AM

Kerry it looks good and I see you got the JavaScript to work. Congrats. I notice that the images take a long time to load though.

Did you optimize them for the web? I'm not sure what program you use for image editing. In Photoshop I save images for the web and usually use jpgs with a quality of 30 for images like you have. It will reduce the file sizes significantly and help the page to load faster.

The image in the header with your logo takes the longest to download, but even the images in the center take longer than they should to load after clicking on the thumbnail.

But again it looks good. I'm really glad you got the image swap to work and glad we get to see all the images that are supposed to be there.