Menu
Community /Pin to ProfileBookmarkYou mean sort of have many different albums on one page, and when you click a link the old images are replaced by the next set so that you can 'cycle through'? If that's it, it is possible in JavaScript, but you would be better off using PHP is your server supports it. Well, not exactly. I am using nested tables, and there are three tables. One is for names of images, which are also javascript links. One table has the image in it, the third table has the description text. I want to click on the javascript link, and have the picture swap to the relevant picture (which I've done using 'swap image'), but also at the same time have the text in the third table to switch to describe the relevant picture also. I'm not sure if you can 'swap text' just like you can with images? And I do have php on my server, but I don't know how to use it. I'd like to figure out if there is a javascript way to do this, and if not, what method I could use? (Including PHP)
Thanks! [color=maroon]It would be better if you posted a link so I could see what you have and so that I could incorporate the new code into your already working code.[/color] [/font][/b]
[b]Jona[/b]Oh thats awesome. My question is now, what would be the "idofmyspan"? And where would I put this code, inside the <span></span>?
<span id="myspan"></span>
and then
document.getElementById("myspan").firstChild.nodeValue="Texttochangeto";I'll try to use more understandable variable names in future.
:rolleyes: What we are trying to say is that it can be named anything, as long as they are both the same. Basically, the code that cijori posted will allow you to change the text that is within a <span>.
Thanks!!!! here's the link:http://www.pumpkinjuice.com/costarica.htm
Then, you can use cijori's code, like this: (items in [b]bold[/b] either added or changed to make better)
Then make a function in the head that swaps your text:
Thank you!!! I can't wait to go home and try it out. I'll let you know how it goes. Thanks for being so helpful.. you're awesome!
I got this swap text script to work (absolutely chuffed, thanks ? ), but on page 1 of the site (http://www.lobacz.com - move mouse over 'gallery'), I wanted the description of the left-hand thumbnail 'The Park Project is based on this image' to be on two lines - 'The Park Project' on the top line and the rest on the bottom line.
However, when I go to put <br /> in the code, like so:
it makes the swap text not function at all (well, it does when I put my mouse over the right hand thumbnail - where the description for that particular picture shows on the top line but the old text still remains on the bottom line - after that the script does nothing).
I would be very grateful if someone could tell me how I could overcome this ?
Thanks in advance,
Tyskie01.
As you can see I have changed the function thing like you said, and I added the <br /> after the word 'Project' in both cases. Now when I put my mouse over the right hand image it works great! The text changes to what I want it to. However, when I put my mouse over the left hand picture thereafter nothing happens. The function stops working.
I'm guessing I missed something - 'what' do I call exactly as before (your 3rd point) and what tags would I be closing? Something to do with the <br />? (your 4th point).
Thanks again, hope to hear from you soon,
Tyskie01.I haven't looked through it in detail, but try getting rid of the line break - write
"The Park Project<br /> is based on this image"
not
"The Park Project<br />
is based on this image".
[img]http://img353.imageshack.us/img353/6277/tinglu6.jpg [/img]
but the <br /> isn't there in the original div.
Does that not work for you?That works beautifully! Thanks! The way ours differed is that you kept the line break for the second instance, but I took them both out because I thought that that was what you wanted me to do.
But your code works great, thanks again.
Heh. I should probably work on the ol' communication skills some time ?
Glad it works.
javascript as described above...
and here is the form i need to put it in.
also might there be a way to get a different url to be the "next_url" depending on what the user selects as an option??
Swapping Text??
Hi, I need some serious help! I am making a photo album in dreamweaver, and I have a list of links that are attached to behaviors… (swap image, etc.) Well, I want captions under my pictures, and I’d like the captions to change with the pictures when you click on the link. Basically, a javascript function. I use dreamweaver, but could insert the code manually if I knew it.
Does anyone know how to do this? Is it possible? Is it even javascript? It’s driving me nuts…
Please help!
Sign in
to post a comment23 Comments(s) ↴
0
@NevermoreMay 28.2003 — #reply?
0
@lemonjennyauthorMay 28.2003 — #Thanks!
reply?
0
@JonaMay 28.2003 — #[b][font=arial][b]Jona[/b]
reply?
0
@NevermoreMay 28.2003 — #To swap text, put it inside a <span></span>, and then use this code:<i>
</i>document.getElementById("idofyourspan").firstChild.nodeValue="Texttochangeto";reply?
0
@lemonjennyauthorMay 28.2003 — #reply?
0
@pyroMay 28.2003 — #It would be the id of your span. ? <span id="myspan"></span>
and then
document.getElementById("myspan").firstChild.nodeValue="Texttochangeto";
reply?
0
@NevermoreMay 28.2003 — #:rolleyes:
reply?
0
@lemonjennyauthorMay 28.2003 — #oK guys, you're going to think i'm a total idiot... but I'm still unclear of where I put that code, and what to put in place of "myspan". What is my span? ?reply?
0
@pyroMay 28.2003 — #reply?
0
@lemonjennyauthorMay 28.2003 — #Okay, so maybe this will make it easier. Here is the page that I'm trying to work with. I already have a few of the swapped images in place, still have more to add. (thats what all the 2's are) Anyway, maybe if you see this page and the code, you can help me (maybe tell me where to put the code you told me?)Thanks!!!! here's the link:
reply?
0
@pyroMay 29.2003 — #I see that you already have a div, so there is no need to add the span -- the div will work fine. Anyway, give your div and id, so it looks like this:<div id="mydiv" align="center" style="color:#003300" size: 80%; font-family:Verdana, Arial, Helvetica, sans-serif;">(Text that I want to change) Welcome to my Costa Rica photo album! 8 girls, including me, ventured down into the jungle to find great beaches, and good times. Here are a few pictures of things we found.</div>Then, you can use cijori's code, like this: (items in [b]bold[/b] either added or changed to make better)
<a href="[b]#[/b]" onClick="MM_swapImage('costatitle','','Images/CostaRica/HammokFeetPalm.jpg',1); [b]swapText('this is the text to use'); return false;[/b]">Hammock</a>Then make a function in the head that swaps your text:
function swapText(what) {
document.getElementById("mydiv").firstChild.nodeValue=what; //this will change the text in mydiv to the text you specified when calling the function
}reply?
0
@lemonjennyauthorMay 29.2003 — #reply?
0
@Tyskie01Jun 05.2007 — #BUMP!! This thread was very useful. I posted my own with a problem but it's not appeared yet so I just thought I'd say here that - I sorted my own problem out up to a point.I got this swap text script to work (absolutely chuffed, thanks ? ), but on page 1 of the site (
However, when I go to put <br /> in the code, like so:
="MM_swapImage('main','','the park WEB.jpg',1); swapText('The Park Project<br />
is based on this image'); return false;"></div></td>it makes the swap text not function at all (well, it does when I put my mouse over the right hand thumbnail - where the description for that particular picture shows on the top line but the old text still remains on the bottom line - after that the script does nothing).
I would be very grateful if someone could tell me how I could overcome this ?
Thanks in advance,
Tyskie01.
reply?
0
@NevermoreJun 05.2007 — #Be handy to see the function you're using, but assuming you're using the same one as before:- [LIST=1]
document.getElementById("mydiv").firstChild.nodeValue=what; //this will change the text in mydiv to the text you specified when calling the function
}
function swapText(what) {
document.getElementById("mydiv").innerHTML=what; //this will change the HTML in mydiv to the HTML you specified when calling the function
}
[/LIST]
reply?
0
@Tyskie01Jun 05.2007 — #Thanks for that, but I'm a bit confused. Let me give you the page code...<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Park Project</title>
<style type="text/css">
<!--
body,td,th {
font-family: Verdana;
font-size: 16px;
color: #CCCCCC;
}
body {
background-color: #000000;
}
a {
font-size: 16px;
color: #CCCCCC;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #CCCCCC;
}
a:hover {
text-decoration: none;
color: #CCCCCC;
}
a:active {
text-decoration: none;
color: #CCCCCC;
}
.style1 {color: #000000}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function swapText(what) {
document.getElementById("description").innerHTML=what; //this will change the HTML in mydiv to the HTML you specified when calling the function
}
//-->
</script>
<link href="description.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MM_preloadImages('mother and baby WEB.jpg','the park WEB.jpg')">
<table width="900" align="center" bgcolor="#000000">
<tr>
<td width="11">&nbsp;</td>
<td colspan="5" rowspan="3"><div align="center"><img src="the park WEB.jpg" name="main" width="382" height="486" id="main" /><br />
The Park Project</div></td>
<td width="29">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="475">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="227"><div align="right"><img src="the park WEB.jpg" name="leftthumb" width="120" height="120" id="leftthumb" onmouseover="MM_swapImage('main','','the park WEB.jpg',1); swapText('The Park Project<br />
is based on this image'); return false;"></div></td>
<td colspan="3"><div id="description" align="center">The Park Project<br />
is based on this image</div></td>
<td width="227"><div align="left"><img src="mother and baby WEB.jpg" name="rightthumb" width="120" height="120" id="rightthumb" onmouseover="MM_swapImage('main','','mother and baby WEB.jpg',1); swapText('mother and baby'); return false;"></div></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td width="161"><div align="center" class="style1">&lt;&lt; back</div></td>
<td width="44"><div align="center"><a href="http://www.lobacz.com" onmouseover="MM_goToURL('parent','http://www.lobacz.com');return document.MM_returnValue">home</a></div></td>
<td width="155"><div align="center"><a href="page2.html" onmouseover="MM_goToURL('parent','page2.html');return document.MM_returnValue">next &gt;&gt;</a></div></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<link rel='stylesheet' type='text/css' href='table.css'>
<script type="text/javascript" language="JavaScript">
<!--
//Disable right mouse click Script
//By Maximus ([email protected]) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com
var message="© Ted Lobacz";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
// -->
</script>
</body>
</html>
As you can see I have changed the function thing like you said, and I added the <br /> after the word 'Project' in both cases. Now when I put my mouse over the right hand image it works great! The text changes to what I want it to. However, when I put my mouse over the left hand picture thereafter nothing happens. The function stops working.
I'm guessing I missed something - 'what' do I call exactly as before (your 3rd point) and what tags would I be closing? Something to do with the <br />? (your 4th point).
Thanks again, hope to hear from you soon,
Tyskie01.
reply?
0
@NevermoreJun 05.2007 — #"The Park Project<br /> is based on this image"
not
"The Park Project<br />
is based on this image".
reply?
0
@Tyskie01Jun 05.2007 — #Nope, well, the function keeps working but the bottom line won't go away and if I put the mouse over the left picture it actually inserts "The Park Project<br /> is based on this image" like so:[img]but the <br /> isn't there in the original div.
reply?
0
@NevermoreJun 05.2007 — #Hmm works fine for me. The code I'm using is this:[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Park Project</title>
<style type="text/css">
<!--
body,td,th {
font-family: Verdana;
font-size: 16px;
color: #CCCCCC;
}
body {
background-color: #000000;
}
a {
font-size: 16px;
color: #CCCCCC;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #CCCCCC;
}
a:hover {
text-decoration: none;
color: #CCCCCC;
}
a:active {
text-decoration: none;
color: #CCCCCC;
}
.style1 {color: #000000}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function swapText(what) {
document.getElementById("description").innerHTML=what; //this will change the HTML in mydiv to the HTML you specified when calling the function
}
//-->
</script>
<link href="description.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MM_preloadImages('mother and baby WEB.jpg','the park WEB.jpg')">
<table width="900" align="center" bgcolor="#000000">
<tr>
<td width="11"> </td>
<td colspan="5" rowspan="3"><div align="center"><img src="the park WEB.jpg" name="main" width="382" height="486" id="main" /><br />
The Park Project</div></td>
<td width="29"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="475"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td width="227"><div align="right"><img src="the park WEB.jpg" name="leftthumb" width="120" height="120" id="leftthumb" onmouseover="MM_swapImage('main','','the park WEB.jpg',1); swapText('The Park Project<br />is based on this image'); return false;"></div></td>
<td colspan="3"><div id="description" align="center">The Park Project<br />
is based on this image</div></td>
<td width="227"><div align="left"><img src="mother and baby WEB.jpg" name="rightthumb" width="120" height="120" id="rightthumb" onmouseover="MM_swapImage('main','','mother and baby WEB.jpg',1); swapText('mother and baby'); return false;"></div></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td width="161"><div align="center" class="style1"><< back</div></td>
<td width="44"><div align="center"><a href="http://www.lobacz.com" onmouseover="MM_goToURL('parent','http://www.lobacz.com');return document.MM_returnValue">home</a></div></td>
<td width="155"><div align="center"><a href="page2.html" onmouseover="MM_goToURL('parent','page2.html');return document.MM_returnValue">next >></a></div></td>
<td> </td>
<td> </td>
</tr>
</table>
<link rel='stylesheet' type='text/css' href='table.css'>
<script type="text/javascript" language="JavaScript">
<!--
//Disable right mouse click Script
//By Maximus ([email protected]) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com
var message="© Ted Lobacz";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
// -->
</script>
</body>
</html>[/CODE]Does that not work for you?
reply?
0
@Tyskie01Jun 05.2007 — #But your code works great, thanks again.
reply?
0
@NevermoreJun 05.2007 — #That works beautifully! Thanks! The way ours differed is that you kept the line break for the second instance, but I took them both out because I thought that that was what you wanted me to do.
But your code works great, thanks again.[/QUOTE]
Heh. I should probably work on the ol' communication skills some time ?
Glad it works.
reply?
0
@SipherDrakonJun 21.2007 — #I can't seem to get this function to work with my webpage. Any thoughts on why it's not swapping my text like it should. Also, is there any way to get it to only swap the text when the option"plain blue border" is chosen, and then swap back when the "designer border" is chosen again.??javascript as described above...
<i>
</i><script language="javascript">
function swapText(what) {
document.getElementById("myspanid").firstChild.nodeValue=what; //this will change the text in myspanid to the text you specified when calling the function
}
</script>and here is the form i need to put it in.
<FORM ACTION="http://us.2.p9.webhosting.yahoo.com/forms?login=vansawardsplus" METHOD="post" NAME="Personalize" onsubmit="return ValidateForm();">
<INPUT TYPE="hidden" NAME="form" VALUE="contactpage">
<INPUT NAME="Subject" TYPE="hidden" SIZE=32 VALUE="Additional Information for 68CHSA">
<INPUT NAME="Personalize" TYPE="checkbox" VALUE="No"> No Personalization&nbsp;
<p>
<input type="hidden" name="on0" value="Style">
<select name="Style" onchange="swap(this.options[selectedIndex].value)", "swapText('Product Description: 6X8 Gray Speckled Plaque. Plain Bordered plate
with a poem by Carol Huyser.')">
<option value="">Select a Border
<option value="images/68chsa2lrg.jpg">Designer Border
<option value="images/68chsalrg.jpg">Plain Blue Border
</select><br>
<input type="hidden" name="next_url" value="http://www.alwaysinmyheartinc.com/noform/68chsa.htm">
<p><i>Your Email Address:</i><font color=red>*&nbsp; </font>&nbsp;<INPUT NAME="Email_Address" TYPE="text" SIZE=20 VALUE="">&nbsp;&nbsp;
<input type="submit" value="Submit" name="Submitted_Successfully"><input type="reset" value="Reset" name="B2"></p>
</form>
also might there be a way to get a different url to be the "next_url" depending on what the user selects as an option??
reply?