Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

swap image and change text

Status
Not open for further replies.
styleBunny

styleBunny

Technical User
Jun 20, 2002
133
AU
Hi there,

I haven't done any js for ages and i canna work out why this function wont swap the image AND write a new line of text! They both work fine by themselves, but when slapped together, there is no love. i get the feeling it does the image swap, then gets rid of it and writes the text. Wierd. Any help is appreciated.

Cheers
Paul.

<SCRIPT LANGUAGE = Javascript>
function ChangeImage(x)
{


document.IMG1.src = "gif/image" + x + ".gif";
document.writeln("hello");

}
</SCRIPT>
 
Sort by date Sort by votes
The writeln does indeed clear out the document. However, if all you need is the picture and the line, you can make them both 'writeln's:

document.writeln("<img src='gif/image"+x+".gif' />");
document.writeln("hello");

'hope that helps.

--Dave
 
Upvote 0 Downvote
If your image swap is in a page that's already written, what lookingforinfo told you won't work. You'll need to put your text inside a <div> that has an ID and then change it with document.getElementById().

If you want an example of this on the Internet, you can see it used in a slide show presentation at . Just view the source and you'll see the Javascript code for switching captions along with images.

Lee
 
Upvote 0 Downvote
I agree with you, Lee. Stylebunny said that both lines worked on their own, implying to me that she must be re-writing the whole page (since she was apparently satisfied with the results of the writeln command by itself). Otherwise I would have recommended something like what you said.

--Dave
 
Upvote 0 Downvote
Hi guys,

thank you both for your help :)
Though i am having some trouble making getElementById to work.

I have this much to specify where i want the text to go:
document.getElementById('text')

But getting the write or writeLn to work i cant do so far. I get errors saying that the object wont support the write method and such.

Thanks for your help so far,
SB.

 
Upvote 0 Downvote
Here tis. I have had no luck with either images nor text changes using getElementById, should i be referencing the div id or the image id (name="IMG1")?

<HTML>
<head>

<style type="text/css">
#text{
background-color:#D4BFFF;
}
#pic{
background-color:#FFDFFF;
}
</style>


<SCRIPT LANGUAGE = Javascript>

function ChangeImage(x)
{

var a = document.getElementById("text");
a.IMG1.src = "gif/image" + x + ".gif";

}

</SCRIPT>

</head>

<BODY>

<CENTER>

<div id="text">

this is text.

</div>

<div id="pic">

<IMG NAME = "IMG1" SRC = "gif/image1.gif" WIDTH = 236 HEIGHT = 118>

</div>

<BR>
<BR>

<a href="#" javascript onClick = "ChangeImage(2)">switch</a>

</CENTER>

</BODY>

</HTML>

 
Upvote 0 Downvote
Hi Lee,

I did take a look at it, but i could make much of the functions they were using. They were creating instances of the photo function... and i was confused... i didnt think this was going to be that complicated hehe :)

sb.
 
Upvote 0 Downvote
Hello styleBunny,

These are the changes I would recommend.

[1] Within the body.[tt]
<a href="#" [red]javascript[/red] onClick = "ChangeImage(2)">switch</a>
[/tt]
[2] Within the function.[tt]
a.[blue]document.[/blue]IMG1.src = "gif/image" + x + ".gif";[/tt]

regards - tsuji
 
Upvote 0 Downvote
Further notes:

Forget the include another obvious, probably typo.

[3] Within the function.[tt]
var a = document.getElementById("[red]pic[/red]");[/tt]

- tsuji
 
Upvote 0 Downvote
You didn't specify what text you're going to change to each time, or how you're going to store that. In the example I gave you, I stored the caption for each picture in a JS object, but you could use an array of strings instead. Somehow, though, you need to list the names of the photos and the captions that go with them or the Javascript won't have the information to display. How you list them determines how the function needs to be written to change the photo and the caption.

Lee
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
723
rogerte
rogerte
AbidingDude
  • Locked
  • Question
replaceChild() and Keeping Relationships
Replies
1
Views
811
AbidingDude
AbidingDude
berkshirea
  • Locked
  • Question
Change the Default Pop Up Message 2
Replies
8
Views
778
berkshirea
berkshirea
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
553
waubain
waubain
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
349
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top