PDA

View Full Version : javascript image swap help



BoA
01-25-2007, 08:31 PM
www.m-carroll.com

I'm trying to get a simple image swap to change the main image when mouseover the thumbnails.

Main images named: image001.jpg - image018.jpg

Thumbnails named correspondantly: THUMB001.jpg-THUMB018.jpg

Also I would like the thumbnail with the mousover to go black and white. I have created black and white thumbnail images named: THUMB001b.jpg - THUMB018b.jpg

Any help appreciated

jscheuer1
01-25-2007, 08:41 PM
For the main part of that:

http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

To get the thumbs to change, just add to the onmouseover and add an onmouseout. The mouseover code for the above script is:


onmouseover="modifyimage('dynloadarea', 0)"

so:


<img src="THUMB001.jpg" onmouseover="modifyimage('dynloadarea', 0);this.src='THUMB001b.jpg';" onmouseout="this.src='THUMB001.jpg';>

BoA
01-25-2007, 09:38 PM
Having major probs figuring this out lol

Any chance u could look at my source and tell me what to paste into what?

Cheers - im a newbie at javascript

jscheuer1
01-25-2007, 09:41 PM
Do your best effort (it doesn't have to work), put it on the web somewhere and I'll check it out.

BoA
01-25-2007, 10:05 PM
www.m-carroll.com/index2.html

mburt
01-25-2007, 10:16 PM
Hmm... just try this, add it to your head:


<script type="text/javascript">
function swap(orig) {
var stmain = document.getElementById("main");
stmain.setAttribute("src",orig.src)
orig.onmouseout = function() {
stmain.setAttribute("src","http://www.m-carroll.com/stills/image011.jpg");
}
}
var directory = "stills"
window.onload = function() {
var obj = document.all ? document.all : document.getElementsByTagName("*");
for (i = 0;i < obj.length;i++) {
if (obj[i].tagName == "IMG") {
var string = obj[i].src.substring(obj[i].src.indexOf(directory),obj[i].src.length).substring(0,6);
if (string == directory) {
obj[i].onmouseover = function() {
swap(this)
}
}
}
}
}
</script>

BoA
01-25-2007, 10:19 PM
Doesn't do anything...

mburt
01-25-2007, 10:23 PM
Try it here:
http://mburt.funpic.org/testing/thumb.htm

BoA
01-25-2007, 10:28 PM
Brilliant - thanks for the hep your a legend

what bits do I change so that the full size images can be shown?

mburt
01-25-2007, 10:30 PM
I'm not sure, do you have the large images saved as different files?

BoA
01-25-2007, 10:31 PM
Yes saved as image001.jpg - to - image018.jpg

so instead of stills/THUMB001.jpg it would be stills/image001.jpg

mburt
01-25-2007, 10:33 PM
Ah, I see. Hmm. I'll try to fix it :)

BoA
01-25-2007, 10:37 PM
That swooshing one from before looked good ;)

mburt
01-25-2007, 10:39 PM
Okay. I've got it done, I simply replaced "THUMB" with "image" in every occurance.

<script type="text/javascript">
function swap(orig) {
var stmain = document.getElementById("main");
var newsrc = orig.src.replace(/THUMB/,"image");
stmain.setAttribute("src",newsrc)
orig.onmouseout = function() {
stmain.setAttribute("src","http://www.m-carroll.com/stills/image011.jpg");
}
orig.onclick = function() {
orig.onmouseout = null;
}
}
var directory = "stills"
window.onload = function() {
var obj = document.all ? document.all : document.getElementsByTagName("*");
for (i = 0;i < obj.length;i++) {
if (obj[i].tagName == "IMG") {
var string = obj[i].src.substring(obj[i].src.indexOf(directory),obj[i].src.length).substring(0,6);
if (string == directory) {
obj[i].onmouseover = function() {
swap(this)
}
}
}
}
}
</script>

Oh, and a new function: click the image to keep it to stay :)

BoA
01-25-2007, 10:49 PM
is there any way to keep last image without clicking?

mburt
01-25-2007, 10:57 PM
I made another update, you can check the link again. I took out the "onmouseout" feature, since I realized you had a thumb of the main image, so getting back to that one would be easy.
Here's the code:

<script type="text/javascript">
var main_images_dir = "image"
var thumb_images_dir = /THUMB/ // Do not close the back-slashes and only type between them
var directory = "stills"
function swap(orig) {
var stmain = document.getElementById("main");
var newsrc = orig.src.replace(thumb_images_dir,main_images_dir);
stmain.setAttribute("src",newsrc)
}
window.onload = function() {
var obj = document.all ? document.all : document.getElementsByTagName("*");
for (i = 0;i < obj.length;i++) {
if (obj[i].tagName == "IMG") {
var string = obj[i].src.substring(obj[i].src.indexOf(directory),obj[i].src.length).substring(0,6);
if (string == directory) {
obj[i].onmouseover = function() {
swap(this)
}

}
}
}
}
</script>
Change the variables with the directories if you want to :)

BoA
01-25-2007, 11:05 PM
Thanks a million - that's awesome!

I have a *Bonus* option - which would basically turn the Thumbnails b&w with mouseOver.

These are named stills/THUMB001b.jpg and so on.

If you can't help any thurther I understand.
I owe you a big pint!

mburt
01-25-2007, 11:57 PM
Thumbnails b&w with mouseOver
Huh? "b&w"?

BoA
01-26-2007, 12:47 AM
black and white

to change from stills/THUMB001.jpg to stills/THUMB001b.jpg and so on

mburt
01-26-2007, 01:33 AM
Okay, I'll try it.

mburt
01-26-2007, 01:46 AM
I tried it and no image appears? Do you have the black and white images uploaded yet?

BoA
01-26-2007, 11:49 AM
no they wern't up - they are now :D

Is it easy to do?

mburt
01-26-2007, 07:40 PM
You only have the thumbnails uploaded, do you have the full-sized ones up? (remember to keep the same file name, just with "b" at the end, before the ".jpg")

mburt
01-26-2007, 07:40 PM
Nevermind, we must've cross-posted. I'll be updating the beta version here:
http://mburt.funpic.org/testing/thumb.htm
Keep refreshing to see updates.

mburt
01-26-2007, 07:44 PM
Hmm. It's not working. For example, when I try to do the squirrel. The query is stills/image02b.jpg
And it won't load..

BoA
01-29-2007, 01:32 PM
I only wanted the thumbnails to go black and white. the main images are perfect as they are - full colour. Thanks for helping.