Randy webb and others

[Richard]

Ok. I've quoted the inner stuff as needed.
When I click on the "form" {no errors} all I get is a momentary whiteout of
the saturn image and the saturn image returns intact.
No image swapping, no text is written.
Now what?


<script type="text/javascript">

function changeImage(imageName,imageSource,divName,divText){
document.images[imageName].src=imageSource;
document.getElementById(divName).innerHTML = divText;
}


</script>

<form action="#">
<input type="image" src="images/thmb001.jpg" value="101"
onclick="changeImage('main','images/thmb002.jpg','sample','hello')">
</form>

<div id="sample" >

<img src="images/saturn.gif" name="main">


</div>

 

[Randy Webb]

Ok. I've quoted the inner stuff as needed.
When I click on the "form" {no errors} all I get is a momentary whiteout of
the saturn image and the saturn image returns intact.

You should read Richard Cornford's reply to your last thread. Stop using
a submit button for something other than what it was intended to do -
submit a form. If you test your page again, after the saturn image
returns intact, you should notice that the URL has changed and has a #
appended to the end of it. If it were not for the form submission, you
would see the text but no image.

No image swapping, no text is written.

Yes it is.
Image gets changed.
innerHTML gets changed (removing the img tag).
Form gets submitted.
Page returns unchanged (except the URL has # appended to it).

Now what?

First, you change the input type="image" to a link/image. Then, you get
the image out of the div tag.

<script type="text/javascript">

function changeImage(imageName,imageSource,divName,divText){
document.images[imageName].src=imageSource;
document.getElementById(divName).innerHTML = divText;
}

If one wanted to get pedantic, that function lacks a lot of feature
detection that I chose to leave out of it for fear that I may have to
attempt to explain it to you.

</script>

<form action="#">
<input type="image" src="images/thmb001.jpg" value="101"
onclick="changeImage('main','images/thmb002.jpg','sample','hello')">
</form>

<div id="sample" >

<img src="images/saturn.gif" name="main">


</div>

<div id="sample"></div>
<img src="images/saturn.gif" name="main" width="XX" height="XX"
alt="----------">

<a href="images/thmb002.jpg" target="_new"
onclick="changeImage('main',this.href,'sample','hello');
return false">
<img src="images/thmb002.jpg" border="0" width="XX" height="XX"
alt="----------">
</a>

There is a reason that I put the width, height and alt attributes in the
image tag. I will leave it up to you to attempt to discover what they
are for.

 

[Richard]

Thanks for the assistance randy.
With your clues, I actually found a simple script that works just the way I
wanted.
Somewhat similar to your input, but a little easier for me to understand and
follow.
All I need to do now is figure out how to add the text and I'm in business.

So maybe tonight I'll have it online.

Thanks for the help.

 

[MikeB]

Isn't this is the third thread in as many days on the same stuff?.

 

[Randy Webb]

Isn't this is the third thread in as many days on the same stuff?.

Ayup. And if we are lucky it will take less than 38 threads for RtS to
grasp the concept.

 

[MikeB]

Ayup. And if we are lucky it will take less than 38 threads for RtS to
grasp the concept.

I wouldn't hold my breath..

The OPs "With your clues, I actually found a simple script that works" misses
the mark of what a "Programming Language" encapsulates.

The Idea of taking your (very own) concept and expressing what and how you want
something to happen with your (very own) interpretation of it within the
limitations of the programming language,seems to somehow have escaped the OP.

You have been too kind and verrryyy patient...

 

[Randy Webb]

Thanks for the assistance randy.

Then please do me the favor of quoting what you are replying to.

With your clues, I actually found a simple script that works just the way I
wanted.
Somewhat similar to your input, but a little easier for me to understand and
follow.
All I need to do now is figure out how to add the text and I'm in business.

To be honest, I don't see how it could get any simpler than what I gave
you. Especially given your requests/requirements of what the script
would do. But for my own use I would use an array (or just a plain
object) and pass the reference number instead of all the text:


<script type="text/javascript">

var myArray = new Array()
myArray[0] = new Array('newImage0Name','divText0')
myArray[1] = new Array('newImage1Name','divText1')
myArray[2] = new Array('newImage2Name','divText2')
myArray[3] = new Array('newImage3Name','divText3')
myArray[4] = new Array('newImage4Name','divText4')


function changeImage(arrayEntry){
document.images['imageName'].src=myArray[arrayEntry][0];
document.getElementById('divName').innerHTML = myArray[arrayEntry][1];
}

Where divName and imageName are the names of the image/div and
hard-coded in the page.

Then, you call it thus:

onclick="changeImage(0);return false"

So maybe tonight I'll have it online.
Maybe.

Thanks for the help.

Welcome.