NetTalk Central
NetTalk Web Server => Web Server - Ask For Help => Topic started by: olu 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?
-
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
-
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.
-
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
-
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