NetTalk Central

Author Topic: displaying images in aform  (Read 4219 times)

olu

  • Sr. Member
  • ****
  • Posts: 352
    • View Profile
    • Email
displaying images in aform
« on: April 25, 2009, 12:09:58 PM »
hi i have multiply small  thumball  pictures in a form but i want to be able to click any of them and have it appear on another big  thumball   window within the form?

bshields

  • Sr. Member
  • ****
  • Posts: 392
    • View Profile
    • Inhabit
    • Email
Re: displaying images in aform
« Reply #1 on: April 25, 2009, 04:59:14 PM »
Hi,

If i understand correctly, you have a number of small images on a form, and as the user clicks on them you have a larger place on the form reserved for showing any of the images at higher res?

I can see a few ways of doing this, personally i'd use Javascript on the client side, but you could also try using standard nettalk.

The concept with javascript is basically this:

Add into the form some custom XHTML in the right place where you want your larger image to show i'd start with "Before </form>"

<img id="PreviewImage" src="images/blank.png" width=400px height=300px />

The id here is key, id is like class except with id there can be only one on a page, which will allow us to find this img later in Javascript.

Id also write a javascript function and stick into the page (once its all working nicely you could place it in your custom script files for use anywhere), meanwhile place it inside XHTML section say "Before <form>" will do..

<script type="text/javascript">
  function replaceImage(myID, newURL) {
    var imgTag = document.getElementById(myID)
    imgTag.src = newURL
  }
</script>


You've now done all the preparation work. All that is left is to call the Javascript function (on the client side) with those two arguments.

replaceImage('PreviewImage','images/image1.png');

You can wrap your thumbnail image in an anchor tag or use the onclick javascript extension:

<a href="javascript: replaceImage('PreviewImage','images/image1.png');" ...thumbnail image in here... </a>

or

<img src="images/thumbnail1.png" onclick="replaceImage('PreviewImage','images/image1.png');" />

The other method would be to try and use NetTalks built-in ajax to refresh a display control with a new value. It should work also.

Regards
Bill



olu

  • Sr. Member
  • ****
  • Posts: 352
    • View Profile
    • Email
Re: displaying images in aform
« Reply #2 on: April 26, 2009, 03:38:27 PM »
hi bill thanks but still abit stuck got the first part to work ,so that when i open the form itcretes the viewer with the first image i want but then on the thumbmail that i have created when i click on them it just doesnt work it does not load tye image to the viewer. i have added the code
You've now done all the preparation work. All that is left is to call the Javascript function (on the client side) with those two arguments.

<a href="javascript: replaceImage('PreviewImage','images/image1.jpg');" </a>

to the fields hyperlink but no joy . help.

bshields

  • Sr. Member
  • ****
  • Posts: 392
    • View Profile
    • Inhabit
    • Email
Re: displaying images in aform
« Reply #3 on: April 26, 2009, 06:35:16 PM »
Ok, Make sure you are using Firefox with Firebug installed, so we can debug. If Javascript isn't working its the easiest way to know whats going on.

We need to confirm when you click on an image we are calling our new function to replace the image. View the source inside your browser to confirm the anchor tag exists and looks like what we need.

If you can put your site public i'll check it for you.

I'm in Sydney GMT + 10

Regards
Bill

olu

  • Sr. Member
  • ****
  • Posts: 352
    • View Profile
    • Email
Re: displaying images in aform
« Reply #4 on: April 27, 2009, 06:01:59 AM »
hi thanks for the heads up firefox did the trick with it i could see straight away the errors of my way and all working now