...

View Full Version : multiple images swap and swap back onclick



Lisawynn
11-03-2006, 07:06 PM
Hi. I found this post:

http://www.codingforums.com/showthread.php?t=69993&highlight=onclick+image+swap

with this script:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body>
<script type="text/Javascript">
var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
function imageflip (toggleimage) {
tab = document.getElementById(toggleimage);
if (tab.src.match('One.gif')) {
tab.src=ImgPath+'Two.gif';
}
else {
tab.src=ImgPath+'One.gif';
}
}
</script>

<img id="myimage" onclick="imageflip('myimage')" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100">
</body>

</html>



and it works great for one image BUT I have multiple images that I would like to have use the same script.

Any help would be great!!!

Thanks!

brandonH
11-04-2006, 01:34 PM
that script will do it for multiple images.

you just have to call it with each image's id value


this is the image you are using now:
<img id="myimage" onclick="imageflip('myimage')" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100">
the highlighted section is the part that calls the script, but notice that inside the ( )'s is 'myimage' also notice that the id of that image happems to be 'myimage'. this is how the scripts knows what image it is dealing with.
if you want a universal call method use this:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body>
<script type="text/Javascript">
var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
function imageflip (toggleimage) {

if (toggleimage.src==ImgPath+toggleimage.id+"1.gif")) {
toggleimage.src=ImgPath+toggleimage.id+"2.gif";
}
else {
toggleimage.src=ImgPath+toggleimage.id+"1.gif";
}
}
</script>

<img id="myimage" onclick="imageflip(this)" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100">
</body>

</html>



ok to further explain it.....
make sure that when you create the <img> tag that it has an id set to it, and that the id value is the name of the image file without the number and no file extention.

i.e.: if the two images you are swapping back and forth between are named cars1.gif and cars2.gif you would do as so:

<img id=cars src="http://www.vicsjavascripts.org.uk/StdImages/cars1.gif" onclick="imageflip(this);">

f another img in the window is swapping between two images named dogs1.gif and dogs2.gif you would do as so:

<img id=dogs src="http://www.vicsjavascripts.org.uk/StdImages/dogs1.gif" onclick="imageflip(this);">


so you need to asign an id value to the html img tagthat corrisponds to the image files you are swapping it to. you also need to make sure that these files are properly named as such.


hope this is what you needed. if you need any furher help, just let me know.

Lisawynn
11-06-2006, 05:06 PM
Hey BrandonH!!! Thanks so much for responding to my post. I have tried out what you have suggested and still cannot seem to get it to work. Here is what I have:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script type="text/Javascript">
var ImgPath='images/collapse';
function imageflip (toggleimage) {

if (toggleimage.src==ImgPath+toggleimage.id+"1.gif") {
toggleimage.src=ImgPath+toggleimage.id+"2.gif";
}
else {
toggleimage.src=ImgPath+toggleimage.id+"1.gif";
}
}
</script>

</head>

<body>
<img id=admin src="images/collapse/admin1.gif" onclick="imageflip(this);">
</body>

</html>


I think I understand about giving the image an id which I have done as "admin". The images will still not flip back and forth when you click on the original image. My images are named "admin1.gif" and "admin2.gif". I haven't added any additional images yet because I want to get this to work first. Any other suggestions as to what is happening? I haven't been coding for awhile and I am thinking its like a language - if you don't speak it regularly you sort of lose it and have to start all over again!!!

brandonH
11-06-2006, 06:20 PM
give me the exact file path and name of two images that you have on your site that you want to swap back and forth.

I tried finding your images, but could not....

brandonH
11-06-2006, 06:32 PM
wow! i'm a dumb dumb yet again, lol.


i found the problem........

var ImgPath='images/collapse';

that needs to be set to the full path name, not the short path name.

reason is, because when you set an images src (wether with long or short) it will actually set it to the long path. so, when you run the script and it checks to see what the src value is:

if (toggleimage.src==ImgPath+toggleimage.id+"1.gif")

if you have ImgPath set to "/images/yourpic.gif"
and the src value of the image is http://www.yoursite.com/images/yourpic.gif
, then obviously the two values are not identical..... therefore it will not change. so just set your ImgPath var to the full path , and it should work beautifully.

Lisawynn
11-06-2006, 06:32 PM
Hey there!!!

Unfortunately, you won't be able to access them. I am developing for an internal site that is not accessible to the public. The original coding I posted was from another post that I was referencing to get the idea across of what I am trying to accomplish. I have attached the image files for you. Again, I really appreciate you spending time on this. I am saving the images in the following folder on my internal site:

images/collapse/admin1.gif
images/collapse/admin2.gif

The other images I am using are the same idea. For example:

images/collapse/common1.gif
images/collapse/common2.gif

Lisawynn
11-06-2006, 06:36 PM
Hey Sailor!!!

It is working now. Sorry, I didn't see your second post before I sent my last post.

Can't thank you enough!! This was driving me crazy!!!

Take Care!!

brandonH
11-06-2006, 06:43 PM
the code above will work, but it will display the images' file path in the status bar everytime the user clicks on it. if you preload the images, that wont happen.

use this:





if (document.images){
//for each picture creat a set of
pics= new Array();

pics[0]= new Image();
pics[0].src="admin1.gif";

pics[1]= new Image();
pics[1].src="admin2.jpg";

pics[2]= new Image();
pics[2].src="anotherpic1.gif";

pics[3]= new Image();
pics[3].src="anotherpic2.jpg";

//and so on......
}

Lisawynn
11-06-2006, 08:28 PM
Works great!!! Thank you x10...... What about combining this with a mouseover? For example, mouse hovers over image, image changes but only stays if clicked. When clicked, new image replaces original image. When clicked again, image returns to original image.

brandonH
11-06-2006, 10:45 PM
that would be a lengthy script in itself, and it would wind up not giving you the out come you want i think, lol.

say the first image is loaded. you mouseover it and it changes to the other image. if youdont click on it, the only way to make it change back would be onmouseout. the difficulty there is that if the user does click in the image, when they mouse out, it would change back.


i do have an idea though, i gatta write it out and see if it works. will post if it does, and if not, will post say it doesnt.

brandonH
11-06-2006, 11:42 PM
well it can be done, and with alot less script then i thought!

her it is:




<script type=text/javascript>
var ImgPath='file:///H:/hartmanc/ProfData/Desktop/projects/';
var mouseO='0';
function imageflip (toggleimage) {
if(mouseO=='0'){
if (toggleimage.src==ImgPath+toggleimage.id+"1.jpg"){
toggleimage.src=ImgPath+toggleimage.id+"2.jpg";
}
else{
toggleimage.src=ImgPath+toggleimage.id+"1.jpg";
}}
}
</script>

<img id="closeup" onclick="mouseO='1';" onmouseover="imageflip(this)" onmouseout="imageflip(this);mouseO='0';" width="100" height="100" src="closeup1.jpg" >



you will have to chage all the images names and file path of course....

I hope I have been able to help you get done what you needed. enjoy..

Lisawynn
11-07-2006, 02:37 PM
Hey brandonH!!! It works perfectly. Thanks again. You have been extremely helpful!!!!! Take Care!!!

M.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum