• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 410
  • Last Modified:

Toggle images onclick

I have a series of thumbnails in B&W and colour format.  When the thumbnail is clicked I would like:

1. A main image to change to show the full sized image.
2. The thumbnail image to toggle between B&W and colour.
3. The other thumbnails to revert back to B&W.

Any ideas greatly appreciated.  Thanks
0
Orroland
Asked:
Orroland
1 Solution
 
archrajanCommented:
u need something like this?
http://www.archanapatchirajan.com/imageradiobutton.html

but also incuding that the main picture frame shud change
if u want i can modify ur code
0
 
leos_Commented:
First I would give your pics a standard naming convention, and for simplicity, I'll assume all pics are jpegs.

ie:
b_picname.jpg = b&w thumbnail
c_picname.jpg = b&w thumbnail
m_picname.jpg = full size colour image

Second give your main picture on your web page an id

<img id="MainPic" src="m_defaultpic.jpg">

Third, default your thumbnails to b&w and add the javascript event handelers to run js code when they are clicked.

<img id="thumbnail1" src="b_car.jpg" onClick="GreyAllThumbs();updateMainPic(this.src);ColorThumbnail(this);">
<img id="thumbnail2" src="b_truck.jpg" onClick="GreyAllThumbs();updateMainPic(this.src);ColorThumbnail(this);">
<img id="thumbnail3" src="b_van.jpg" onClick="GreyAllThumbs();updateMainPic(this.src);ColorThumbnail(this);">

Fourth, add the js code

<script language="javascript">

function updateMainPic(thumbSource){
  //this function sets the mainpic to selected picture
  document.getElementByID('MainPic').src='m' + thumbSource.substring(1,thumbSource.length);
}

function ColorThumbnail(pic){
  //this function make the current thumbnail color
  pic.src='c' + pic.src.substring(1,pic.src.length);
}

function GreyAllThumbs(){
  //this function makes all the thumbnails b&w
  //this could be done dynamically, but here is a hardcoded method for now
  var thumb
  thumb = document.getElementById('thumbnail1').src;
  thumb = 'b' + thumb.substring(1,thumb.length);

  thumb = document.getElementById('thumbnail2').src;
  thumb = 'b' + thumb.substring(1,thumb.length);

  thumb = document.getElementById('thumbnail3').src;
  thumb = 'b' + thumb.substring(1,thumb.length);

}
</script>

good luck!








0
 
OrrolandAuthor Commented:
leos

Many thanks for your help.  Your code doesn't quite work.  My images all sit in an 'images' directory and I have named them all c_r1, b_r1, m_r1 etc.

Any ideas?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
PreeceCommented:
I've done something similar.  Have a look at:

http://skydrake.home.mindspring.com/photopix/home.html
0
 
leos_Commented:
you can make two sets of changes to compensate for the directory.

first set, which you've probably already done, prepend the directory infront of the filename
example:

src="images/b_car.jpg"

second step, adjust the substring call's starting point by the length of "images/" which I believe is 7.
example:

document.getElementByID('MainPic').src='m' + thumbSource.substring(8,thumbSource.length);
pic.src='c' + pic.src.substring(8,pic.src.length);
thumb = 'b' + thumb.substring(8,thumb.length);

I hope this helps.
0
 
OrrolandAuthor Commented:
leos

Still not working I'm afraid.  I get an "Object doesn't support this property or method" error when I click on any of the thumbnails.

Images:
<img src="images/m_r1.jpg" name="MainPic" width="345" height="230" id="MainPic" />

        <p><img id="thumbnail1" src="images/b_r1.jpg" onClick="GreyAllThumbs();updateMainPic(this.src);ColorThumbnail(this);"></p>
           <p><img id="thumbnail2" src="images/b_r2.jpg" onClick="GreyAllThumbs();updateMainPic(this.src);ColorThumbnail(this);"></p>
               <p><img id="thumbnail3" src="images/b_r3.jpg" onClick="GreyAllThumbs();updateMainPic(this.src);ColorThumbnail(this);"></p>
               <p><img id="thumbnail4" src="images/b_r4.jpg" onClick="GreyAllThumbs();updateMainPic(this.src);ColorThumbnail(this);"></p>
               <p><img id="thumbnail5" src="images/b_r5.jpg" onClick="GreyAllThumbs();updateMainPic(this.src);ColorThumbnail(this);"></p>

Script:

<script language="javascript">

function updateMainPic(thumbSource){
  //this function sets the mainpic to selected picture
 document.getElementByID('MainPic').src='m' + thumbSource.substring(8,thumbSource.length);
}

function ColorThumbnail(pic){
  //this function make the current thumbnail color
  pic.src='c' + pic.src.substring(8,pic.src.length);
}

function GreyAllThumbs(){
  //this function makes all the thumbnails b&w
  //this could be done dynamically, but here is a hardcoded method for now
  var thumb
  thumb = document.getElementById('thumbnail1').src;
  thumb = 'b' + thumb.substring(8,thumb.length);

  thumb = document.getElementById('thumbnail2').src;
  thumb = 'b' + thumb.substring(8,thumb.length);

  thumb = document.getElementById('thumbnail3').src;
  thumb = 'b' + thumb.substring(8,thumb.length);
 
  thumb = document.getElementById('thumbnail4').src;
  thumb = 'b' + thumb.substring(8,thumb.length);
 
  thumb = document.getElementById('thumbnail5').src;
  thumb = 'b' + thumb.substring(8,thumb.length);

}
</script>
0
 
leos_Commented:
Orroland,

sorry about that, I had not actually tested the code, just wrote it on the fly.  This code is tested and should give you what you want.
It shouldn't matter now where you store your images, it will look for the last slash in the url for each pic.

leos_

<img src="images/m_r1.jpg" name="MainPic" width="345" height="230" id="MainPic" />

        <p><img id="thumbnail1" src="images/b_r1.jpg" onClick="GreyAllThumbs();updateMainPic(this.src);ColorThumbnail(this);"></p>
           <p><img id="thumbnail2" src="images/b_r2.jpg" onClick="GreyAllThumbs();updateMainPic(this.src);ColorThumbnail(this);"></p>
             <p><img id="thumbnail3" src="images/b_r3.jpg" onClick="GreyAllThumbs();updateMainPic(this.src);ColorThumbnail(this);"></p>
             <p><img id="thumbnail4" src="images/b_r4.jpg" onClick="GreyAllThumbs();updateMainPic(this.src);ColorThumbnail(this);"></p>
             <p><img id="thumbnail5" src="images/b_r5.jpg" onClick="GreyAllThumbs();updateMainPic(this.src);ColorThumbnail(this);"></p>


<script language="javascript">

function updateMainPic(thumbSource){
  //this function sets the mainpic to selected picture
 //document.getElementById('MainPic').src='m' + thumbSource.substring(8,thumbSource.length);
      //alert(thumbSource);
 document.getElementById('MainPic').src = replaceLeadingCharacter(thumbSource,'m');
}

function ColorThumbnail(pic){
  //this function make the current thumbnail color
  //alert(pic.src.substring(0,pic.src.lastIndexOf('/')+1) + 'c' + pic.src.substring(pic.src.lastIndexOf('/')+2,pic.src.length));
  //pic.src=pic.src.substring(0,pic.src.lastIndexOf('/')+1) + 'c' + pic.src.substring(pic.src.lastIndexOf('/')+2,pic.src.length);
  pic.src=replaceLeadingCharacter(pic.src,'c');
}

function GreyAllThumbs(){
  //this function makes all the thumbnails b&w
  //this could be done dynamically, but here is a hardcoded method for now
  var thumb

  thumb = document.getElementById('thumbnail1').src;
  document.getElementById('thumbnail1').src = replaceLeadingCharacter(thumb,'b');

  thumb = document.getElementById('thumbnail2').src;
  document.getElementById('thumbnail2').src = replaceLeadingCharacter(thumb,'b');

  thumb = document.getElementById('thumbnail3').src;
  document.getElementById('thumbnail3').src = replaceLeadingCharacter(thumb,'b');

  thumb = document.getElementById('thumbnail4').src;
  document.getElementById('thumbnail4').src = replaceLeadingCharacter(thumb,'b');

  thumb = document.getElementById('thumbnail5').src;
  document.getElementById('thumbnail5').src = replaceLeadingCharacter(thumb,'b');

}

function replaceLeadingCharacter(sString, cNewCharacter){
      return sString.substring(0,sString.lastIndexOf('/')+1) + cNewCharacter + sString.substring(sString.lastIndexOf('/')+2,sString.length);
}
0
 
OrrolandAuthor Commented:
Brilliant, thank you :)
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now