onClick image swap question (newb) [Archive]

Click to See Complete Forum and Search --> : onClick image swap question (newb)

tchochkie

11-10-2003, 10:51 AM

I could not find the answer to this elsewhere in the forums, so forgive me if I'm cross-posting.
I have several large graphics files (400x1000 or so) that I wish to display on html pages as thumbs to save space. However, because these are thumbs of business form screencaps, which I would like the user to be able to read, I need to write a script that will swap the thumb with the full-sized image onClick. I can't use onMouseOver because users with no mouse scroll wheel will have to move their cursor off of the image to use the vertical scroll bar in the browser. After the user has enlarged the image and read the material, I would like them to be able to click on the (now large) image to return it to the thumbnail state. Can someone please tell me how to do this? Thanks

gil davis

11-10-2003, 11:35 AM

Lat's say you are clever enough to name your images so you can easily tell the difference between a thumbnail and a regular image. Then you can use this code:

<script>
function swap(it) {
tmp1 = it.src.split("big.");
tmp2 = it.src.split(".");
if (it.src.indexOf("big") == -1)
{it.src = tmp1[0] + "." + tmp1[1];}
else
{it.src = tmp2[0] + "big." + tmp2[1];}
}
</script>
...
<img src="hello.gif" onclick="swap(this)">

This would expect the thumbnail to be "hello.gif" and the regular to be "hellobig.gif". You would not be able to use "big." in any of the thumbnail file names.

tchochkie

11-10-2003, 12:27 PM

Thanks for responding Gil. As I am a newb to js, I have several questions regarding the above script.

When you use "big", is the script looking for any instance of a file name with "big" in it? I assume so since you note that I cannot use "big" in the thumb file name. I have an images folder in the site root folder, and all html files are in folders named "Module xx", also in the site root folder. So, to link to an image on the given html page, the path would be ../images/filename.gif etc. The image file names I am using for the example are:
cust_info_screen.gif (large image)
cust_info_screen_thumb.gif (thumbnail)

Also, onClick calls the function "swap(this)". Is this a funtion built into js? I was under the impression that you had to set up the function before you could call it.

I apologize for my denseness, but was unable to get the script to work. Any clarification would be appreciated. Thanks again.

gil davis

11-10-2003, 01:04 PM

Originally posted by tchochkie
When you use "big", is the script looking for any instance of a file name with "big" in it? I assume so since you note that I cannot use "big" in the thumb file name. I have an images folder in the site root folder, and all html files are in folders named "Module xx", also in the site root folder. So, to link to an image on the given html page, the path would be ../images/filename.gif etc. The image file names I am using for the example are:
cust_info_screen.gif (large image)
cust_info_screen_thumb.gif (thumbnail)If that is how you want to leave your names, then you can reverse the logic and replace "big." with "_thumb.".
Also, onClick calls the function "swap(this)". Is this a funtion built into js? I was under the impression that you had to set up the function before you could call it.
You must have skipped over the <script> part of my post that included the definition of the function called "swap()". The "this" part is a pointer to the image. In the function, the variable that receives the pointer is called "it". Perhaps a full-blown web page would clear the fog:

<html>
<head>
<title>Image swap on click</title>
<script>
function swap(it) {
tmp1 = it.src.split("_thumb.");
tmp2 = it.src.split(".");
if (it.src.indexOf("_thumb") > -1)
{it.src = tmp1[0] + "." + tmp1[1];} // make it big
else
{it.src = tmp2[0] + "_thumb." + tmp2[1];} // make it small
}
</script>
</head>
<body>
<img src="hello_thumb.gif" onclick="swap(this)">
</body>
</html>

tchochkie

11-10-2003, 01:43 PM

Thanks a ton, Gil. The script did exactly what I wanted it to do. Btw, I did not skip over the <script> portion in the head of the page. I was simply confused by the function call swap(this), considering that the function name in the head was swap(it). I'm trying to understand the scripts I use instead of just pasting them in, so thanks very much for your patience.;)

gil davis

11-10-2003, 02:01 PM

No problem. Do you understand the function definition now, and the difference between "this" and "it"?

novoselent

11-12-2003, 03:56 PM

hmm I couldn't get it to work even copying it directly into a blank page.

sorry, I'm a newb at this too.

It's not looking in the right dir for the images, which part do you change to tell it to look in the "/images/" folder?

tchochkie

11-12-2003, 04:05 PM

novo you have to specify the path in the <img> tag. For instance, my page is in a folder called "Modulexx", and the images are in the "images" folder, both of which are in the site root folder. The path I use to point to the image is
<img src="../images/image_thumb.gif" onClick="swap(this)">. Hope that helps.

novoselent

11-12-2003, 04:06 PM

yes I've done that part, the initial thumnail is displaying correctly, but it's not looking in that same dir for the swap file

why not?

tchochkie

11-12-2003, 04:13 PM

novo if you are using the code from gil's second example, be sure that the large and small images have the same filename, with the exception that the small image will have _thumb at the end. This is the only thing that I can think of off hand, as you said you copied and pasted the sript from this thread. It might be helpful if you post your <img> tag, along with the filepaths of the images relative to the site root.

novoselent

11-12-2003, 04:15 PM

ok not sure what I did but I got it to change to the swap image, but it's not posting the image at it's correct size.

it's squishing it into the same size as the thumbnail...it's also a one way click, it won't switch back to the thumbnail after the "big" image is swapped in

novoselent

11-12-2003, 04:21 PM

tchochkie

11-12-2003, 04:23 PM

As far as the sizing of the second image goes, I'm using tables to position the graphics. Try something like this:

<table width="100%" border="0" cellpadding="10px">
<tr>
<td><img src="../images/filename.gif" onClick="swap(this)></td>
</tr>
</table>

This table should expand to accomodate the larger image. You can set the width to whatever, I chose % in this case to keep it liquid.

novoselent

11-12-2003, 04:26 PM

but I'm not setting any size at all right now on either images, it should be displaying the images at their normal sizes right?

this is eventually gonna go into another page, but I can't even get it to work right just on a blank page with nothing but the image on it

tchochkie

11-12-2003, 04:29 PM

Yes, the images should be displaying at their default sizes. I looked at your script and the code looks ok. Just check that the contents of the <script> tag are in the <head> section. Other than that, I can't think of what might be wrong with it.

novoselent

11-12-2003, 04:32 PM

there's nothing else in the head tags

you can see what it's doing for yourself here:
http://216.95.232.234/test.htm

novoselent

11-12-2003, 04:35 PM

wierd...it keeps forcing the image width and heighth in, even though I keep deleting it

why would it do that?

tchochkie

11-12-2003, 04:37 PM

Ok, try these two things:

1. The first line after <script> should be 
The reason for this is that the browser sees the <script> tag, and expects js, vbs, etc. If it sees anything in between the script tags that looks like html, it breaks the script (thus the commenting of the script tag contents).

2. Try removing the width and height parameters from the <img> tag.

Hope this helps

novoselent

11-12-2003, 04:43 PM

adding the additional lines in the script tags didn't change anything...it still won't return back to the thumbnail on the second click

...and for some reason the page is inserting the width and heighth parameters automatically no matter what I do

previewing it in frontpage, it does the first swap correctly, but then as soon as I publish the file it adds those stupid parameters and I can't seem to stop it from doing it

tchochkie

11-12-2003, 04:43 PM

Also, in the "if" statement, there should be a capital O in indexOf.

tchochkie

11-12-2003, 04:52 PM

novo I don't use FrontPage, but in my experience MS apps are always trying to format things for you and it's quite annoying. You might want to try copying the html into a text editor, and save it in the same folder as an.htm file. This will at least tell you if FrontPage is sticking the image size into the tag. And tell your IT dept to get you a copy of Dreamweaver :D